• Demos
    • Chart Demos
    • StockChart Demos
  • Download
    • Download Chart
    • Download StockChart
  • Integrations
    • Front End Technology Samples
      • React Charts
      • Angular Charts
      • jQuery Charts
      • Dashboards
    • Server Side Technology Samples
      • PHP Charts
      • ASP.NET MVC Charts
      • Spring MVC Charts
      • JSP Charts
  • License
  • Blog
  • Docs
    • Chart Documentation
    • StockChart Documentation
  • Support Forum
    • Chart Support
    • StockChart Support
  • My Account
  • My Account
  • KEY FEATURES
    • StockChart with Numeric Axis
    • StockChart with Date-Time Axis
    • StockChart with Annotation / Indexlabel
    • StockChart with Print & Export as Image
    • Multi-Series StockChart with Navigator
    • StockChart with Async Data Loading
    • StockChart with Price & Volume
    • StockChart with Tooltip & Crosshair Syncing
    • StockChart with Combination Charts
    • Dynamic / Live StockChart
    • Dynamic / Live StockChart with StripLine
    • Stock Chart with DatePicker
  • CHART TYPES
    • StockChart with Line using JSON Data
    • StockChart with Spline Chart
    • StockChart with Area Chart
    • StockChart with Spline Area & Navigator
    • StockChart with Candlestick & Range Selector
    • StockChart with OHLC using JSON Data
    • StockChart with Range Spline Area
  • TECHNICAL INDICATORS
    • StockChart with SMA
    • StockChart with EMA
    • StockChart with MACD
    • StockChart with Technical Indicators

JavaScript Multi-Series StockChart with Navigator

Download JavaScript StockChart Samples
  • JavaScript StockChart Samples
  • JavaScript Chart Samples
  • React Chart Samples
  • Angular Chart Samples
  • jQuery Chart Samples
  • PHP Chart Samples
  • ASP.NET Chart Samples
  • JSP Chart Samples
  • Spring MVC Chart Samples
  • Dashboard Samples

Below StockChart Demo shows multi-series column chart with shared tooltip & Navigator. Try moving mouse over datapoints to observe shared tooltip showing values of both the dataseries. You can also try other chart combinations by changing type property.

Read More >>

Try Editing The Code

window.onload = function () {
  var dataPoints1 = [], dataPoints2 = [];
  var stockChart = new CanvasJS.StockChart("chartContainer",{
    theme: "light2",
    animationEnabled: true,
    title:{
      text:"Multi-Series StockChart with Navigator"
    },
    subtitles: [{
      text: "No of Trades: BTC/USD vs BTC/EUR"
    }],
    charts: [{
      axisY: {
        title: "No of Trades"
      },
      toolTip: {
        shared: true
      },
      legend: {
            cursor: "pointer",
            itemclick: function (e) {
              if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible)
                e.dataSeries.visible = false;
              else
                e.dataSeries.visible = true;
              e.chart.render();
            }
        },
      data: [{
        showInLegend: true,
        name: "No of Trades in $",
        yValueFormatString: "#,##0",
        xValueType: "dateTime",
        dataPoints : dataPoints1
      },{
        showInLegend: true,
        name: "No of Trades in €",
        yValueFormatString: "#,##0",
        dataPoints : dataPoints2
      }]
    }],
    rangeSelector: {
      enabled: false
    },
    navigator: {
      data: [{
        dataPoints: dataPoints1
      }],
      slider: {
        minimum: new Date(2018, 00, 15),
        maximum: new Date(2018, 02, 01)
      }
    }
  });
  $.getJSON("https://canvasjs.com/data/docs/btcvolume2018.json", function(data) {
    for(var i = 0; i < data.length; i++){
      dataPoints1.push({x: new Date(data[i].date), y: Number(data[i].volume_btc_usd)});
      dataPoints2.push({x: new Date(data[i].date), y: Number(data[i].volume_btc_eur)});
    }
    stockChart.render();
  });
}                            

Related Customizations in StockChart

  • slider
  • slider.maskInverted
  • slider.outlineInverted
  • Chart Types
  • Multi-Series Charts
  • © fenopix
    • About Us
    • FAQs
    • Careers
    • Privacy Policy
    Server Side Technologies
    • ASP.NET MVC Charts
    • PHP Charts
    • JSP Charts
    • Spring MVC Charts
    Front End Technologies
    • JavaScript Charts
    • jQuery Charts
    • React Charts
    • Angular Charts
    • JavaScript StockCharts
    Contact
    • Fenopix, Inc.
    • 2093 Philadelphia Pike,
    • #5678, Claymont,
    • Delaware 19703
    • United States Of America