Sets the click event handler for dataPoint which is triggered when user clicks on a dataPoint . Upon event, a parameter that contains event related data is sent to the assigned event handler. Parameter includes dataPoint and dataSeries corresponding to the event.
Default: nullvar chart = new CanvasJS.Chart("container",
{
.
.
data: [{
dataPoints: [
{ x: 10, y: 71, click: function(e){
alert( e.dataSeries.type + ", dataPoint { x:" + e.dataPoint.x + ", y: "+ e.dataPoint.y + " }" ); },
},
],
},
]
.
.
});
chart.render();
e:{
x,
y,
chart,
dataPoint,
dataSeries,
dataPointIndex,
dataSeriesIndex
}
4 Comments
Is there a way to have a click event direct the user to a new page (within the currently opened window) and send data to that new page’s load event?
On the new page I would like to be able to display a table filled with data related to the dataPoint the user clicked. But I don’t want to have hundreds of pages (one for each dataPoint), rather I would like to have the dataPoint click event send a key to the new page and then that page will use the key to determine what data will fill the table and populate the table accordingly.
Is this possible?
Is it possible to add a click event to the x axis labels? I am running into issue with having the datapoint be the only click for a drill down chart as they can’t click it when it is 0 which does happen from time to time and as it is representing a % and not a number it still needs to be drilled down from time to time. Is this possible?
Craig,
Axis doesn’t support click event as of now. In, your case click event with zero value will fire on axis line, only when toolTip is shown.
I see that clicking zero does work but this is also sometimes difficult to click everytime. I sometimes have to click several times until I can get the data point just right. Is there another option that I am not thinking of?