Displaying single value on tooltip for duplicate data - CanvasJS JavaScript Charts
Displaying single value on tooltip for duplicate data - 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
var chart = new CanvasJS.Chart("chartContainer",{
title:{
text: "Shared ToolTip"
},
toolTip: {
shared: true,
contentFormatter: function ( e ) {
var arr = [];
for(var i = 0; i < e.entries.length; i++) {
if(arr.indexOf(e.entries[i].dataPoint.y) === -1)
arr.push(e.entries[i].dataPoint.y);
}
return CanvasJS.formatDate(e.entries[0].dataPoint.x, "MMM DD YYYY") + ": " + arr;
}
},
data: [
{
type: "line",
dataPoints: [
{ y: 5, x: new Date(2012, 01, 1)},
{ y: 10, x: new Date(2012, 01, 3)},
{ y: 12, x: new Date(2012, 01, 5)},
{ y: 20, x: new Date(2012, 01, 7)},
{ y: 25, x: new Date(2012, 01, 11)}
]
},
{
type: "line",
dataPoints: [
{ y: 5, x: new Date(2012, 01, 1)},
{ y: 20, x: new Date(2012, 01, 3)},
{ y: 20, x: new Date(2012, 01, 5)},
{ y: 30, x: new Date(2012, 01, 7)},
{ y: 45, x: new Date(2012, 01, 11)}
]
},
{
type: "line",
dataPoints: [
{ y: 10, x: new Date(2012, 01, 1)},
{ y: 15, x: new Date(2012, 01, 3)},
{ y: 20, x: new Date(2012, 01, 5)},
{ y: 35, x: new Date(2012, 01, 7)},
{ y: 45, x: new Date(2012, 01, 11)}
]
}
]
});
chart.render();