click: Function

Sets the click event handler for dataSeries which is triggered when user clicks on a dataSeries. 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: null
Example: click: function(e){   alert( e.dataSeries.type+ “, dataPoint { x:” + e.dataPoint.x + “, y: “+ e.dataPoint.y + ” }” );   }, 
var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 data: [{

  click: function(e){
    alert(  e.dataSeries.type+ ", dataPoint { x:" + e.dataPoint.x + ", y: "+ e.dataPoint.y + " }" );
   },

  },
 ]
 .
 .
});
chart.render();

Event Object 

e:{ 
	x, 
	y,
        chart,
	dataPoint, 
	dataSeries, 
	dataPointIndex, 
	dataSeriesIndex
}
Try Editing The Code

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question

32 Comments

    • Sujoy Debnath says:

      yes you can. I have tried to fetch data from database using PHP and then added click function to it. I’m having a problem with date on click function, hope I’ll solve it soon. I only just required the date as “DD-MM-YY” format but I’m getting data as full time date format. any suggestion?

  2. DeWet says:

    I added the click option on a bar chart and on the pc it shows on mouse over the tooltip text and then on click I have it opening a drill down report.
    From my mobile phone it shows the chart but on click it shows the mouseover pc equivalent and don’t fire the function to drill down.
    from searching the web it looks like the internal jquery click event should be replace by :
    $(document).on(‘click touchstart’, function () {

    Any ideas ?

  4. nexus says:

    any chance to get the nearest marker object with x,y coordinates in pixels, I’m overlaying some data and would like to position exactly on top of the nearest marker

    • Anjali says:

      Am afraid this is not possible as of now coz we don’t have an API to get the pixel values of rendered marker or markers closer to any pixel co-ordinate.

  5. chewy67 says:

    Would it be possible in future releases to disable the click event when the user is zooming? I’ve notice that the event is often fired when the user zooms.

    • Sunil Urs says:

      Yes, we’ve observed this issue recently and will be fixing it soon – might take around a month or so.

  6. Richard says:

    I have a stackedColumn100 with months on the axisX, how can I get the current axisX label in the click function?
    I want to load a drill down based on the label.
    dataPoints: [
    { y: 5, label: “September” },
    { y: 11, label: “October” }, How can I get “October” by clicking on the stacked column??
    { y: 8, label: “November” }}

  8. Leela Krishna C says:

    what are the modifications that can be done on the javascript function? can you provide answer…its urgent……….

  10. Marc says:

    Greetings, when the object is coming from JSON/ajax call, defining click: functionName is being wrapped in quotes (proper JSON), so later the call to click is on a ‘string’. The way it is written now, it expects a function. Your thoughts?

    • Anjali says:

      marc,

      Ideally, you should assign event handlers on the client side after importing the data and not on the server side.

  11. Brian says:

    I am having an issue with the click functionality. The same data gets sent for every array item I create. Example:
    I get my data from the database and build the array like so:
    data_array.push({ x:x_value, y: y_value, click: function(e){OpenViewer(user_id, event_id, event_type)}})
    After I cycle through my results I call a function to graph it out and data_array is passed as a variable to my function.

    It works but the “data” that gets passed is the same every time. It always displays the data from the latest data push. Is it because it always uses “e”? I’ve tried to use a dynamic value but it always errors out. Anyone have a suggestion?

    • Brian says:

      And when I mean its the same – the “click” data is always the same. Graph displays as expected but the data that is sent in the click function is the same data every time.

      • Anjali says:

        brian,

        Event parameters for click, etc should not be the same every time, looks like there is some issue in the code, If you can create a jsfiddle with your sample code then we can have a look.

        • Brian says:

          I will work on getting a jfiddle created. But from further tinkering – what I can tell it is that when I push each array element – the click function OpenViewer(user_id, event_id, event_type) is getting passed with the variable names – not the actual variable values.

          Instead of passing OpenViewer(123456.0, 987654321.0, 55555555.0) it is literally passing OpenViewer(user_id, event_id, event_type). When I do click on the datapoint – it triggers because it looks for the current value of those three variables. I found this out when I was cleaning up my code and localized the variables to the function that was generating the datapoint arrays.

          I’ve tried different ways to pass those variables and get them to pass the value – not the name but I cannot get it to do so.

  12. xDanbo says:

    Hi,

    is it possible to make the whole chart canvas clickable? I wrapped my chart with a hypelinked container, but it allows clicking only on the tooltip.

If you have any questions, please feel free to ask in our forums. Ask Question