Tooltip for selected DataSeries - CanvasJS JavaScript Charts
Tooltip for selected DataSeries - CanvasJS JavaScript Charts
by canvasjs
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
/*
To display tooltip for selected dataseries
Here : Q1 and Q3 are skipped
*/
var chart = new CanvasJS.Chart("chartContainer",
{
toolTip: {
shared: "true" //disable here.
},
title:{
text: "Shared ToolTip"
},
data: [
{
type: "stackedColumn",
toolTipContent : null,
name: "Q1",
dataPoints: [
{ y: 2.25, label:"2006"},
{ y: 3.66, label:"2007"},
{ y: 5.18, label:"2008"},
{ y: 5.50, label:"2009"},
{ y: 6.75, label:"2010"},
{ y: 8.57, label:"2011"},
{ y: 10.64, label:"2012"}
]
},
{
type: "stackedColumn",
name: "Q2",
dataPoints: [
{ y: 2.45, label:"2006"},
{ y: 3.87, label:"2007"},
{ y: 5.36, label:"2008"},
{ y: 5.52, label:"2009"},
{ y: 6.82, label:"2010"},
{ y: 9.02, label:"2011"},
{ y: 11.80, label:"2012"}
]
},
{
type: "stackedColumn",
name: "Q3",
toolTipContent : null,
dataPoints: [
{ y: 2.68, label:"2006"},
{ y: 4.23, label:"2007"},
{ y: 5.54, label:"2008"},
{ y: 5.94, label:"2009"},
{ y: 7.28, label:"2010"},
{ y: 9.72, label:"2011"},
{ y: 13.30, label:"2012"}
]
},
{
type: "stackedColumn",
name:"Q4",
dataPoints: [
{ y: 3.20, label:"2006"},
{ y: 4.82, label:"2007"},
{ y: 5.70, label:"2008"},
{ y: 6.67, label:"2009"},
{ y: 8.44, label:"2010"},
{ y: 10.58, label:"2011"},
{ y: 14.41, label:"2012"}
]
}
]
});
chart.render();