Here's a sample where we put three of them.
// set the plots var plot_line_ohlc = chart.plot(0); var plot_column = chart.plot(1); // create the column series var rates = plot_column.column(mapping); rates.name("Highest rate"); // create ohlc series var prices = plot_line_ohlc.ohlc(ohlcMapping); var pricesName = prices.name("ACME Corp."); // create line series var requests = plot_line_ohlc.line(lineMapping); requests.name("Requests");
You can see that the whole chart is divided in parts, where one contains OHLC and Line series and the second one has column in it, both parts have identical X Axis and are scrolled simultaneously. This parts we call plots, you can read about them Chart Plots article.
You can adjust the colors of the series, adjust the tooltips, etc. Let's now create a sample with adjusted colors.
// set the filling color for the rates series rates.fill('#00838F'); // set stroke for the requests series requests.stroke("#00796B");
Adding a background series of a column type to the scroll bar background and adjusting its "selected" state colors:
// create a thumbnail series in the scroller var thSeries = chart.scroller().column(lineMapping); // define the shown part of a chart chart.selectRange('2014-02-01','2014-05-06'); // set the color for the selected columns in the thumbnail series thSeries.selectedFill("#4527A0");