JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
JavaScript
window.onload = function () {
var dataPointClicked = false;
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Dataseries line Click Event Handler"
},
data: [{
type: "line",
click: function(e) {
dataPointClicked = true;
alert("Clicked on DataPoints: \n x: " + CanvasJS.formatDate(e.x, "MMM YYYY") + ", y: " + e.y);
},
lineThickness: 5,
dataPoints: [
{ x: new Date(2012, 0, 1), y: 450 },
{ x: new Date(2012, 1, 1), y: 414 },
{ x: new Date(2012, 2, 1), y: 520 },
{ x: new Date(2012, 3, 1), y: 460 },
{ x: new Date(2012, 4, 1), y: 450 },
]
}]
});
chart.render();
// Binding Click Event Handler to canavas
var canvas = document.getElementsByClassName("canvasjs-chart-canvas")[1];
canvas.addEventListener("click", lineClickHandler);
var lineThickness = chart.data[0].lineThickness;
function lineClickHandler(e) {
if(dataPointClicked){
dataPointClicked = false;
return;
}
var offsetX = e.offsetX, offsetY = e.offsetY;
var lenPrevDps = null, lenNextDps = null, lenDps = null;
for (var i = 1; i < dps.length; i++) {
if (offsetX < dps[i][0] && offsetX > dps[i - 1][0] || offsetX < dps[i - 1][0] && offsetX > dps[i][0]) {
// Distance from click event coordinate to datapoint before it
lenPrevDps = sqRootFunc(squareFunc(dps[i - 1][0] - offsetX) + squareFunc(dps[i - 1][1] - offsetY));
// Distance from click event coordinate to datapoint after it
lenNextDps = sqRootFunc(squareFunc(dps[i][0] - offsetX) + squareFunc(dps[i][1] - offsetY));
// Distance between two datapoints within where the click event coordinate lies
lenDps = sqRootFunc(squareFunc(dps[i - 1][0] - dps[i][0]) +...