Home forums Using CanvasJS Question: How to toggle series using the legend

This topic contains 6 replies, has 5 voices, and was last updated by  Sunil Urs 2 years, 9 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #3766

    andyhoneycutt
    Participant

    Is there a way to attach an onclick event handler to the legendText items in the legend? I would like to be able to toggle a series on or off using the legend.

    Thanks, and canvasjs is the best charting software I’ve found!

    #3767

    Shubham Kalra
    Participant

    Thank you Andy,

    This feature is not available yet. We will add it in coming versions.

    -Cheers
    Team CanvasJS

    #4608

    timverbruggen
    Participant

    Mentioned feature would be a great help in my work.

    #4611

    Sunil Urs
    Keymaster

    tim,

    This feature is planned for version 1.3 – which might take around a month.

    #4789

    rsouth
    Participant

    workaround for this could be to add a event handler.. i added a click event to hide data series as below.
    works but there are event collisions and it appears that the tooltip is using a “previousDataPointEventObject” object which gets lost when i ravage the data object. this makes the errors stack up pretty quick but is effective until i figure out how to reset the previousDataPoint

    //appending series
     dp.push({
                  type: 'spline',
                  dataPoints: x.data[key],
                  click: seriesToggle,
                  showInLegend: true,
                  toolTipContent: "<b>{name}</b><br>{x}: {y}",
                  name: key,
                  legendText: key
                });
    
      function seriesToggle(e){
        if(chart.options.data.length == 1){//restore..
          chart.options.data = data.chart;
          data.chart = [];//clear backup
        } else {
          var series = e.dataSeries.name;
          data.chart = chart.options.data;//backup data
          for(var i in data.chart){
            if(data.chart[i].name == series){
              chart.options.data = [ data.chart[i] ]; //only show clicked series
              break;
            }
          }
        }
        chart.render();
      }
    
    #4792

    Sunil Urs
    Keymaster

    Hi,

    I have this feature in my todo list. It was supposed to be implemented in next version but has been postponed slightly because of IE78 support which is coming next… As as temporary measure you can wrap it inside a try catch block. I’ll be coming up with a proper solution soon.


    Sunil

    #5846

    Sunil Urs
    Keymaster

    Hi,

    In version 1.4 beta we have implemented legend events and “visible” property for dataseries. Using these features we can toggle data series on legend click. Do have a look.


    Sunil Urs

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.