Tutorial on using ToolTips in StockChart - 1 | JSFiddle Sample Code

Tutorial on using ToolTips in StockChart - 1 | JSFiddle Sample Code

by mustadirmahmood

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://cdn.canvasjs.com/canvasjs.stock.min.js"></script>

<div id="chartContainer" style="height: 450px; width: 100%;"></div>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/docs/stockcharts/basics-of-creating-html5-stockchart/tooltip/" target="_blank" title="Tutorial on using ToolTips in StockChart ">https://canvasjs.com/docs/stockcharts/basics-of-creating-html5-stockchart/tooltip/</a></div>

JavaScript

window.onload = function () {
  var dataPoints1 = [], dataPoints2 = [], dataPoints3 = [];
  var stockChart = new CanvasJS.StockChart("chartContainer",{
    title:{
      text:"LTC/USD"
    },
    theme: "light2",
    charts: [{
      toolTip:{
        content: "{x}: {y}"
      },
      data: [{
        type: "line",
        name: "Open Price",
        dataPoints : dataPoints1
      }]
    }, 
    {
      toolTip:{
        content: "{x}: {y}"
      },
      data: [{
        type: "line",
        name: "Closing Price",
        dataPoints : dataPoints2
      }]
    }
    ],
    navigator: {
      enabled:false
    }
  });
  $.getJSON("https://canvasjs.com/data/docs/ltcusd2018.json", function(data) {
    for(var i = 1; i < 11; i++){
      dataPoints1.push({x: i * 2, y: Number(data[i].open)});
      dataPoints2.push({x: i * 3, y: Number(data[i].close)});
    }
    stockChart.render();
  });
}