Tooltip helps to display specific datapoint value
tootip enables to show specific datapoint value on mouseover.
HTML
<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;">
JavaScript
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Display Specific DataPoint Value"
},
axisX: {
interval:10,
},
axisY:{
includeZero: false
},
toolTip: {
//shared:true, //Enables to show the datapoints of plotted chart in sharing form
content:"x: {x}, y: {y}" //Only x or Y value can be display
},
data: [
{
type: "spline",
dataPoints: [
{ x: 10, y: 450 },
{ x: 20, y: 414 },
{ x: 30, y: 520 },
{ x: 40, y: 460 },
{ x: 50, y: 450 },
{ x: 60, y: 500 },
{ x: 70, y: 480 },
{ x: 80, y: 480 },
{ x: 90, y: 410 },
{ x: 100, y: 500 },
{ x: 110, y: 480 },
{ x: 120, y: 510 }
]
},
{
type: "line",
dataPoints: [
{ x: 10, y: 350 },
{ x: 20, y: 314 },
{ x: 30, y: 320 },
{ x: 40, y: 360 },
{ x: 50, y: 350 },
{ x: 60, y: 300 },
{ x: 70, y: 380 },
{ x: 80, y: 380 },
{ x: 90, y: 310 },
{ x: 100, y: 350 },
{ x: 110, y: 380 },
{ x: 120, y: 310 }
]
}
]
});
chart.render();