Customized Shared ToolTip in Line Chart - CanvasJS JavaScript Charts

Customized Shared ToolTip in Line Chart - 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",{
    zoomEnabled: true,
    title: {
        text: "Customized Shared ToolTip in Line Chart"
    },
    
    toolTip: {
       contentFormatter: function(e){
           
           var content =  CanvasJS.formatDate(e.entries[0].dataPoint.x, "DD MMM YYYY") + "</br>------------";
           
           for(var i = 0; i < e.entries.length; i++){
               var entry = e.entries[i];
               
               content += "</br>" + entry.dataSeries.name + ": " +  entry.dataPoint.y;
           }
           
           return content;
		},
        
        shared: true
	},
        
    data: [
        {
            type: "line",
            name: "A",
            dataPoints: randomData(new Date(2010, 0, 1), 100, 200)
        },
        {
            type: "line",
            name: "B",
            dataPoints: randomData(new Date(2010, 0, 1), 50, 200)
        },
        {
            type: "line",
            name: "C",
            dataPoints: randomData(new Date(2010, 0, 1), 50, 200)
        }
    ]
    
});

chart.render();

function randomData(startX, startY, length) {
    var dataPoints = [];
    var y1 = startY;

    for (var i = 0; i < length; i += 1) {
        y1 += (Math.random() * 10 - 5) << 0;

        dataPoints.push({
            x: new Date(startX.getTime() + (i * 24 * 60 * 60 * 1000)),					
            y: y1
        });
    }
    return dataPoints;
}