AnyStock Series Overview


AnyStock supports a lot of different series types. Here's a sample where we have put three of them.

    // create the column series
    var columnSeries = plot_column.column(mapping);"Highest rates");

	// create ohlc series
    var ohlcSeries = plot_line_ohlc.ohlc(ohlcMapping);"ACME Corp. Stock Prices");

	// create line series
    var lineSeries = plot_line_ohlc.line(lineMapping);
    lineSeries.yScale(extraYScale);"Number of income requests worldwide");

JsFiddle Playground

You can see that the whole chart is somewhat divided in two parts, where one contains ohlc and line series and the second one has column in it, while both parts have identical x-Axis and are being scrolled simultaneously. This can be done using plots. You can read about them here. Also one of our plots has two axes. You can find information about managing axes here.

AnyStock Series Adjusting

Series in AnyStock chart are much alike normal series of Basic charts, except for having "hovered" and "selected" state. So we can adjust the colors of the series in normal state, adjust the tooltips, etc. Let's now create a sample with adjusted colors and tooltips.

    // create column series
    var firstSeries = firstPlot.column(mapping);"Highest rates");

    // create ohlc series on the second plot
    var secondSeries = secondPlot.ohlc(ohlcMapping);
    // set width for columns in percent
    secondSeries.pointWidth('50%');"ACME Corp. Stock Prices");

    // create column series on the third plot
    var thirdSeries = thirdPlot.column(columnMapping);"Lowest rates");
    //set gradient fill for the series
    thirdSeries.fill(['#dd2c00', "#ffd54f", "#ef6c00"], 0, true, 0.8);

JsFiddle Playground

AnyStock Scroller Series Adjusting

In case of adding the thumbnail series to the scroller, you should know that those series have the "selected" state. Let's add a background series of a column type to the scroll bar background and adjust its "selected" state colors.

    // create a thumbnail series in the scroller
    var thSeries = chart.scroller().column(lineMapping);

    // define the shown part of a chart 
    // set the color for the selected columns in the thumbnail series

JsFiddle Playground

List of supported series

Find them in the Supported Series list.

You are looking at an outdated 7.10.0 version of this document. Switch to the 8.0.1 version to see the up to date information.