CanvasJS allows users to register different event handlers on dataSeries and dataPoints, legend and Chart. This way charts can be made more interactive. Available Events are click, mouseover, mouseout and mousemove at dataSeries, dataPoints & legend. rangeChanging and rangeChanged events are available in Chart. In this section we’ll talk about event handling in dataSeries and dataPoints.
For events related to legend please refer to legend options. For events related to Chart please refer to rangeChanging and rangeChanged.
Mouse events can be specified at two places – dataSeries level and dataPoint level.
In this section we will discuss, methods which are used to register behaviors to take effect when the user interacts with the chart.
var chart = new CanvasJS.Chart("container",
{
.
.
data: [
{//dataSeries
click: function(e){
alert( e.dataSeries.type+ " x:" + e.dataPoint.x + ", y: "+ e.dataPoint.y);
},
dataPoints: [
{ x: 10, y: 24, click: function(e){alert( "x: " + e.dataPoint.x + " y: " + e.dataPoint.y )} },
]
},
]
.
.
});
chart.render();
Sets the click event handler for dataSeries/dataPoint which is triggered when user clicks/taps on a dataSeries/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.
Click on various columns in the example Below to see data being Fetched by the handler.
Sets the mouseover event handler for dataSeries/dataPoint which is triggered when user moves Mouse Over a dataSeries/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.
Mouseover on various columns in the example Below to see data being Fetched by the handler.
Sets the mousemove event handler for dataSeries/dataPoint which is triggered when user Moves mouse on a dataSeries/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.
Mousemove on various columns in the example Below to see data being Fetched by the handler.
Sets the mouseout event handler for dataSeries/dataPoint which is triggered when user moves mouse out of a dataSeries/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.
Mouseout on various columns in the example Below to see data being Fetched by the handler.
With Four methods we have a wide range of chart interactions available.
In the next example, We attach both click event at dataSeries and first dataPoint. Click on first Column to See.
43 Comments
Good stuff…A question though: I wish to disable tool tips and all mouse functions. Is this possible?
Nick,
Yes. toolTip object is available under Chart options. We are updating toolTip section in the documentation. So it should be available in couple of days.
Below is how you can disable toolTip.
var chart = new CanvasJS.Chart(“container”,
{
.
toolTip:{
enabled: false,
}
});
Do you support dragging or can it be achieved with the existing events? I’d like to create line charts which the user can interact with by dragging individual data points to new positions.
jlemmett,
As of now this feature is not available. Though CanvasJS support events, it doesn’t provided pixel to value conversion API. So it is not possible yet.
But that would be a useful feature I guess. If you can explain a bit more on the use case, I’ll try doing it in the free time let you know if we can implement it as part of the library.
Here’s a rough sketch of the use case: http://postimg.org/image/j5h32u0pz/
Basically I want to show line charts based on some initial state and allow the user to modify that state by interacting with the chart. I want to then persist those changes so that the chart can later be shown shown based on the new state (and modified again etc).
I hope this clarifies the idea.
jlemmett,
I looked into the requirement and it turns out the effort level required is higher than what I expected initially. So it will not be feasible to implement this feature at this point in time. But we’ll consider this in the future versions.
Sunil, I understand. Thank you for looking into it anyway!
I am facing issue with pie chart, not able to get the click event in pie chart on mobile device..Please help..
can u please let me know which decive/model it is… it would also help if u can post your code in forum so that I can reproduce the issue…
I am using Android 4.1.2 (api level 17). I checked on iphone it works properly.. but not on Android…
Thanks for reporting. I’ll try reproducing the issue and get back.
I am facing issue with pie chart, not able to get the click event in pie chart on mobile device..Please help.
Madhu,
We are unable to reproduce the issue. Can you please provide us your mobile and browser details so that we can look into it.
How to disable the default click event in doughnut charts? I dont want to allow the pieces to move when the user click on it.
how do i enable touch events for the chart plots.
Nice work, easy to use the API. However, when I added another canvas in this page, I found that I can’t add keyDown event for this new canvas though.
As i see your API doen not support dragging events but can it be achieved with the existing events?
I’d like to create column charts which the user can interact with by dragging individual data points.
I need the co-ordinates of the x-axis start point of drag and end point of drop event.
I tried with below code but unfortunately its not working.
var isDragging = false;
$(“#status”).html(“status:”);
$(“a”)
.mousedown(function() {
$(“#status”).html(“status: DRAGGED”);
})
.mouseup(function() {
$(“#status”).html(“status: dropped”);
});
please help me to resolve this issue.
I hope this clarifies the idea.
Hi, i’m filling chart via webservice but i cannot make events working.
In this example there is json string coming from webservice (escaped), do you know why the click event is not fired?
var test = “{\”zoomEnabled\”:\”true\”,\”panEnabled\”:\”true\”,\”title\”:{\”text\”:\”TestEvent\”},\”data\”:[{\”type\”:\”line\”,\”dataPoints\”:[{\”label\”:\”07:52\”,\”y\”:46.0, \”click\”:\” function(e) { alert(\’clicked!!!\’); }\”}]}]}”;
var chart = new CanvasJS.Chart(“chartContainer”,JSON.parse(test));
chart.render();
Thank you!!
Watching source code it seems that via json string the click event handler is a string instead of a function. In this line:
userContext[eventContext[eventType]] the type is a string instead of a function and of course it doesn’t work.
How can i make events work with a json string?
Any news about this topic?
Carlo,
It is not valid to define function as part of JSON data. It is better to attach event handlers on the client side after loading JSON.
Is it possible to change the type of graph (ie. from column to line) dynamically when a user clicks on a button?
kearsten,
Yes, please refer this example.
I’m currently testing CanvasJS on my site and I’m having a bit of a problem with the mouseover event. See http://www.xctrails.org/map.html?track=410489, then move the mouse over the elevation chart. The expected behavior is that a corresponding red marker point with the elevation appears on the track on the map. With my current implementation with a markerSize: 1 (everything else just doesn’t look nice for an elevation profile chart) the mouse apparently needs to be right on that 1px marker, otherwise the mouseover event doesn’t fire.
Since the tooltip seems to appear regardless of where the mouse is vertically inside the chart, I wonder why the mouseover does not/cannot fire accordingly (i.e. without being limited to the marker point area)?
I had to laugh when I saw your question. I’m trying to puzzle out *exactly* the same thing. Did you ever figure this out?
I got something slightly hacky working by using the contentFormatter function on the toolTip as a hook to put a marker on my map, and I attached a mouseout handler to the div containing the elevation chart that clears the mark if it’s still there. You can see it in action here: http://dreadedmonkeygod.net/home/maps/20150926-oaks-race.gpx
Great, that approach works for me, too!
How can I drag the whole chart horizontally to get a possibility to load previous or next data points in series?
Please refer to this section on zooming and panning.
Hello, Do you have feature like based on drop down value i van change the type of chart. Like pie, bar. Giving a dynamic type of charts to the user
apoorva,
You can update the type of chart by using “chart.options.data[0].type” and call “chart.render()”, after selecting the options from drop down. Here is an example.
For more details on updating chart please refer this article.
I’d like to draw a vertical line where a user clicks on a time series chart. Is there any way to add a vertical line a specific place in a chart?
thomasj02,
You can use stripLines for the same.
How to implement double click?
Gunjan,
We don’t have this feature out of the box but here is a workaround for it, JSfiddle.
How to get data from our model class?
Is it possible to add click event to a datapoint with 0? Anytime I have a datapoint with 0 the click event does not seem to fire which is a problem for my program. The datapoint represents a percentage and therefore could have 0% which actually represents 0 records but could also in some cases represent a number of failures. I would still like to access this informaiton through a drill down chart but I cannot get it to work when the datapoint is 0. Any assistance would be appreciated. Thanks!
Do we have functionality for onclick event on whole graph?. I know it can be done with the div on which it is getting plotted but if i want to do without that is it possible?
Tejas,
This feature is not available as of now. But you can set click event to div.
I’ve been working on canvas js since morning. I’ve learn lot and really it’s very easy. I’d like some customization in my graph on click event. I’ve set blue color to all column of the graph now I want to change the color of column which has been clicked. Also, I want to add data index with color change on column. Is it Possible?? Can I display x axis label in two lines for example if I want to display 22 Jun on x axis it should display 22 on first line and exact under 22 Jun will be displayed.
Parvez,
For showing axisX label in two lines you can use labelMaxWidth and for setting color and indexLabel of dataPoint on click you can use click method. Here is an example.
Thank you Sanjoy. It’s exactly what I want. Can you please suggest how can I got prior clicked column so when I change the color of the current column I revert prior column color to default. It would be highly appreciated if you reply on this.
Thank you again.
Parvez,
While changing the color of a dataPoint you can store the previous color in a variable and for reverting you can use the stored color from the variable.