import { CIQ } from "https://jsfiddle.chartiq.com/chart/js/advanced.js"; // Activate the License Key import getLicenseKey from "https://jsfiddle.chartiq.com/chart/key.js"; getLicenseKey(CIQ); import quoteFeedSimulator from "https://jsfiddle.chartiq.com/chart/examples/feeds/quoteFeedSimulator.js"; // Declare a CIQ.ChartEngine object. This is the main object for drawing charts. const stxx = new CIQ.ChartEngine({ container: document.querySelector(".chartContainer") }); // connect the chart to the feed stxx.attachQuoteFeed(quoteFeedSimulator, { refreshInterval: 15 }); stxx.setChartType('line'); // Load the primary chart stxx.loadChart( "SPY", null, function() { // In the callback, add a series that creates a renderer with a y axis on the left. // Make sure to give it an explicit name so you can then use it to attach more series to it, // allowing multiple series to be linked to the same left y-axis. // Note that all series attached to the same renderer become one group, and will be moved and deleted together. // So to maintain individuality, you must have a render per series: See https://jsfiddle.net/chartiq/uo97g326/ stxx.addSeries( "NOK", { renderer: "Lines", // create a line renderer //type: "mountain", // of mountain type yAxis: { // and give it its own y axis position: "left", // on the left textStyle: "#0044FF", // with labels of color #0044FF decimalPlaces: 0, // no decimal places on the labels maxDecimalPlaces: 0, // and no defimal places on the last price floating label either. }, name: "left_axis_renderer", // Call the custom renderer "left_axis_renderer", so it can be referenced by other series. color: "#FFBE00", // Set the line color to "#FFBE00" //width: 4, // and a width of 4. display: "NOK Sample", // Finally, use a different display name of "NOK Sample" on the tooltip. }, function() { stxx.addSeries( // Now that the first series and rederer has been set "SNE", { // add the 2nd series using that same renderer. name: "left_axis_renderer", color: "#FF1300", display: "Sony Sample", } ); } ); // This one attaches automatically to the primary series. So no renderer/axis is needed. stxx.addSeries("IBM", { display: "Primary axis line - right", color: 'purple', shareYAxis: true }, function() {}); } );
<link rel="stylesheet" type="text/css" href="https://jsfiddle.chartiq.com/chart/css/stx-chart.css" media="screen" /> <div class="chartContainer" style="width:100%;height:400px;position:relative;"></div>