Overview – Event Handling in Charts

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.

  • Events at dataSeries applies to the dataSeries as whole.
  • Events at dataPoint applies to Only that dataPoint.
  • If set at both level, Event at dataPoint is fired first followed by event if mentioned at dataSeries level.
  • In order to enable events on line and area charts, you should set the markerSize to a value greater than zero.

In this section we will discuss, methods which are used to register behaviors to take effect when the user interacts with the chart.

Syntax

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();

Click

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.

Try it Yourself by Editing the Code below.


Mouseover

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.

Try it Yourself by Editing the Code below.


Mousemove

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.

Try it Yourself by Editing the Code below.


Mouseout

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.

Try it Yourself by Editing the Code below.


Finishing it Up

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.

Try it Yourself by Editing the Code below.



In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.

Comments 43

  1. 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,
      }
      });

  2. 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.

  3. 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.

  4. 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…

  5. I am using Android 4.1.2 (api level 17). I checked on iphone it works properly.. but not on Android…

      • 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.

  6. 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.

  7. 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.

  8. 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!!

  9. Is it possible to change the type of graph (ie. from column to line) dynamically when a user clicks on a button?

  10. 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)?

  11. How can I drag the whole chart horizontally to get a possibility to load previous or next data points in series?

  12. 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.

  13. 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?

  14. 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!

  15. 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?

  16. 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.

      • 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.

In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.