One of the distinctive features of AnyStock is its ability to place several chart plots in one stack in which all series are scrolled and hovered simultaneously.
The main purpose of creating several plots instead of one multi-axes plot is making the management of different Y-scales easier and data from the series more easy to read. Using plots helps you to watch the data points with the same X value simultaneously and be able to compare them.
Here is a sample code to create three plots, two with column series and one with the OHLC.
// create stock chart chart = anychart.stock(); // create first plot on the chart with column series var plot_1 = chart.plot(0); plot_1.column(mapping); // create second plot on the chart var plot_2 = chart.plot(1); // create ohlc series on the second plot plot_2.ohlc(ohlcMapping); // create third plot var plot_3 = chart.plot(2); // create column series on the third plot plot_3.column(columnMapping);
We can change a lot in plots appearance: series, their number, axes, colors, etc. Let's start with adjusting the series.
Here is a sample of a chart with several plots and series:
// create stock chart chart = anychart.stock(); // create first plot on the chart with column series var plot_1 = chart.plot(0); plot_1.column(columnMapping); plot_1.line(lineMapping); // create second plot on the chart var plot_2 = chart.plot(1); // create ohlc series on the second plot var secondSeries = plot_2.ohlc(ohlcMapping);
In AnyStock axes are attached to plots, not achart. While the X-axis is the only one for all plots, each plot can have different Y axes.
// create an additional axis var extraYAxis = plot_line_ohlc.yAxis(1); extraYAxis.orientation("right"); extraYAxis.scale(extraYScale);
We can position plots wherever we want and make them of the size we need. This can be done using bounds() or other methods such as width(), height(), top(), etc. The whole list of these methods you can find here. By default, each new plot will be placed under the existing ones. Let's now create a simple three-plot AnyStock chart and position two of them next to each other.
// set the first plot position through bounds var plot_1 = chart.plot(0); plot_1.bounds(0,0,"45%","45%"); // set the second plot position through width, height, top var plot_2 = chart.plot(1); plot_2.width("100%"); plot_2.height("45%"); plot_2.top("50%"); // set the third plot bounds var plot_3 = chart.plot(2); plot_3.bounds("55%", 0, "45%", "45%")
Each plot can have a separate title, which is set and configured using the title() method.
// create a stock chart var chart = anychart.stock(); // create the first plot var plot_1 = chart.plot(0); // set the title of the first plot plot_1.title("Rates");
Here is a sample of a chart with three plots. Titles of the first two plots are enabled and configured, and the third one has default settings (no title):
Each plot can have a legend, see Legend article to learn more about the legend configuration.
No Data Message
Disabling and Removing
If you want to disable plot temporarily use the enabled() method, the series and settings will stay there once you enable plot again.
To remove plot with all its contents and settings use the