• Demos
    • JavaScript Charts
    • JavaScript StockCharts
  • Download/NPM
    • Download CanvasJS
    • Install via NPM
  • Integrations
    Front End Technology Samples
    • React Charts
    • Angular Charts
    • Vue.js Charts New!
    • jQuery Charts
    • Dashboards
    Server Side Technology Samples
    • PHP Charts
    • Python Charts New!
    • 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 StockChart with Price & Volume

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

Below StockChart example shows Price & Volume using multiple charts. API comes with syncing of tooltip across multiple charts as a handy feature. Try moving mouse over datapoints to see tooltip syncing across charts.

Try Editing The Code

Download Copy JSFiddle
window.onload = function () {
  var dataPoints1 = [], dataPoints2 = [], dataPoints3 = [];
  var stockChart = new CanvasJS.StockChart("chartContainer",{
    theme: "light2",
    exportEnabled: true,
    title:{
      text:"Bitcoin Price & Volume"
    },
    charts: [{
      toolTip: {
        shared: true
      },
      axisX: {
        lineThickness: 5,
        tickLength: 0,
        labelFormatter: function(e) {
          return "";
        }
      },
      axisY: {
        prefix: "$"
      },
      legend: {
        verticalAlign: "top"
      },
      data: [{
        showInLegend: true,
        name: "Stock Price (in USD)",
        yValueFormatString: "$#,###.##",
        type: "candlestick",
        dataPoints : dataPoints1
      }]
    },{
      height: 100,
      toolTip: {
        shared: true
      },
      axisY: {
        prefix: "$",
        labelFormatter: addSymbols
      },
      legend: {
        verticalAlign: "top"
      },
      data: [{
        showInLegend: true,
        name: "Volume (BTC/USD)",
        yValueFormatString: "$#,###.##",
        dataPoints : dataPoints2
      }]
    }],
    navigator: {
      data: [{
        dataPoints: dataPoints3
      }],
      slider: {
        minimum: new Date(2018, 06, 01),
        maximum: new Date(2018, 08, 01)
      }
    }
  });
  $.getJSON("https://canvasjs.com/data/docs/btcusd2018.json", function(data) {
    for(var i = 0; i < data.length; i++){
      dataPoints1.push({x: new Date(data[i].date), y: [Number(data[i].open), Number(data[i].high), Number(data[i].low), Number(data[i].close)]});;
      dataPoints2.push({x: new Date(data[i].date), y: Number(data[i].volume_usd)});
      dataPoints3.push({x: new Date(data[i].date), y: Number(data[i].close)});
    }
    stockChart.render();
  });
  function addSymbols(e){
    var suffixes = ["", "K", "M", "B"];
    var order = Math.max(Math.floor(Math.log(Math.abs(e.value)) / Math.log(1000)), 0);
    if(order > suffixes.length - 1)
      order = suffixes.length - 1;
    var suffix = suffixes[order];
    return CanvasJS.formatNumber(e.value / Math.pow(1000, order)) + suffix;
  }
}                            

Related Customizations in StockChart

  • chart.height
  • charts
  • Candlestick Chart
  • Quick Links

    • Chart Docs
    • StockChart Docs
    • About Us
    • FAQs

    Server Side Technologies

    • ASP.NET MVC Charts
    • PHP Charts
    • JSP Charts
    • Spring MVC Charts

    Front Side 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

    ©2025 Fenopix Privacy Policy Cookies Policy Careers