1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. handle event of hiding series from legend

handle event of hiding series from legend

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


5 Replies
BP Baby Palanidurai Syncfusion Team March 26, 2018 12:21 PM UTC

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, 

Kindly revert us, if you have any concerns. 

Thanks, 
Baby. 


JS Jose Simoes April 10, 2018 12:10 PM UTC

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');
  }
}


BP Baby Palanidurai Syncfusion Team April 11, 2018 04:42 PM UTC

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, 

Kindly revert us, if you have any concerns. 

Thanks, 
Baby

JS Jose Simoes April 12, 2018 10:39 AM UTC

That's it !
Thank you

BP Baby Palanidurai Syncfusion Team April 13, 2018 05:51 AM UTC

Hi Jose, 

Thanks for your update, 

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

Regards, 
baby 


Loader.
Up arrow icon