handle event of hiding series from legend

[Jose Simoes]

Hi!

I've got a chart with several series.

I want to be able to handle the series hide event from the legend, so if there's just one series visible, I can show a strip line with custom values.

How can I achieve this?

Thanks

[Baby Palanidurai]

Hi Jose Simoes, 

Thanks for using syncfusion products, 

We have analyzed your query. As for your requirement, we have prepared a sample. In that, we have achieved your scenario by using chartMouseClick event. In chartMosueClick event, we have check the clicked element is legend or not. If it is yes, count the series visibility. If the series visibility count is one, we had add a stripline for that. 

Please find the code snippet below to achieve this requirement. 

chartMouseClick: function (args) { 

          var visibleSeriesCount = chart.series.length; 

           if (args.target.indexOf('_chart_legend_') > -1) { 

              for (var i = 0; i < chart.series.length; i++) { 

                var targetId = (i.toString() === args.target.replace('line-container_chart_legend_', '').replace('text_', '').split('_')[0] ); 

                if ((!chart.series[i].visible && !targetId) ||  

                (chart.series[i].visible && targetId)) { 

                  visibleSeriesCount--;   

                } 

              } 

              if (visibleSeriesCount === 1) { 

                chart.primaryXAxis.stripLines = [ 

                  { 

                    visible: true,text: 'Winter', color: 'red', 

                    textStyle: { size: '18px', color: '#ffffff', fontWeight: '600' }, 

                    border: { width: 0 }, rotation: -90, start: new Date(2005, 0, 1), end: new Date(2011, 0, 1)  

                  }]; 

                chart.refresh(); 

              } else { 

                chart.primaryXAxis.stripLines = []; 

                chart.refresh(); 

              } 

           } 

        } 

Screenshot: 

 

 

Sample for your reference can be find from below link, 

http://plnkr.co/edit/TIp0vHaXvCgidza9lPOT?p=preview 

Kindly revert us, if you have any concerns. 

Thanks, 

Baby. 

[Jose Simoes]

Hi!

Almost there, just missing one thing:

I'm using this on an Angular component, and I'm having trouble getting a variable value in the handler. Please see below:

@Component({
    selector: 'details',
    template: '<div id="sample-chart"></div>'
})
export class DetailsComponent implements OnInit {

  myVar: number = 30; // in production this should be filled from API.
  myData: Object[] = [{ x: new Date(2005, 0, 1), y: 21, z: 32 }, { x: new Date(2006, 0, 1), y: 24, z: 55 },

                      { x: new Date(2007, 0, 1), y: 36, z: 12 }, { x: new Date(2008, 0, 1), y: 38, z: 50 }];
  ngOnInit() {
    const newChart = new Chart({
 ( ... all other regular chart defs ...)
 series: [
   {type: 'Column', dataSource: this.myData, xName: 'x', yName: 'y', name: 'Germany'},
   {type: 'Column', dataSource: this.myData, xName: 'x', yName: 'z', name: 'England'}
 ],
      chartMouseClick: function (args) {
 /*
       using the code you provided I need to add a stripline with the value of myVar
        I've tried this.myVar, but in this handler 'this' refers to the chart
        How can I get the value of myVar here ?
 */
      }
    }, '#sample-chart');
  }
}

[Baby Palanidurai]

Hi Jose, 

We have analyzed your query. We can retrieve the variable value inside the event, by handling the event through arrow function. And we have prepared a sample and shown variable in alert box. Please find the code snippet below to achieve this requirement. 

   

chartMouseClick: (args) => { 

           alert('variable : ' + this.myVar); 

        }, 

Screenshot:  

 

Sample for your reference can be find from below link, 

http://plnkr.co/edit/euruvRHH66oNxxV2SF64?p=preview 

Kindly revert us, if you have any concerns. 

Thanks, 

Baby

[Jose Simoes]

That's it !

Thank you

[Baby Palanidurai]

Hi Jose, 

Thanks for your update, 

Please let us know, if you need any further assistance on this. 

Regards, 

baby