Angular2+ - Trigger event with click/dlbclick on chart legend

Angular2+ - Trigger event with click/dlbclick on chart legend

Posted by: ramiro.olivencia on 3 January 2019, 3:00 pm EST

• 

  ramiro.olivencia

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 3 January 2019, 3:00 pm EST

  Hi!

  In our app we need to draw data in charts, and we’re currently using the wjFlexChart component to achieve that.

  We were asked for a feature to be able to dinamically add and remove series to the charts. We were able to achieve the addition or removal of the series, but we thought that it may be desirable to be able to remove a series by triggering an event after
  
  double-clicking on a legend. Is that feature achievable using WjFlexChart on Angular 5?

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 4 January 2019, 1:58 am EST

  Hi,

  If you would like to just trigger the visibility of the series when legend title is clicked, then you may just set the legendToggle property of the flex-chart to true.
  
  However, if you want to remove the series from the chart, then you may handle ‘click’/‘dblclick’ event on chart’s hostElement element then call hitTest() method to determine the chart element which was clicked and then remove the series from the chart(if required).
  
  Please refer to the following code snippet:

  chart.hostElement.addEventListener('dblclick', (e)=>{
        let htInfo = chart.hitTest(e);
        if(htInfo.chartElement != wjcChart.ChartElement.Legend){
          // not legend, return
          return;
        }
  
        if(!htInfo.series){
          // not clicked on a actual legend item, return
          return;
        }
  
        let curSeries = htInfo.series;
        // remove series
        chart.series.remove(curSeries);
      });
  

  You may also refer to the following sample demonstrating the same: https://stackblitz.com/edit/angular-7etlxs?file=app%2Fapp.component.ts
  
  Please refer to the following doc for more info on hitTest() method: https://demos.wijmo.com/5/Angular/WijmoHelp/WijmoHelp/topic/wijmo.chart.FlexChart.Class.html#hitTest

  ~Sharad

• 

  ramiro.olivencia

  • Post Options:
  • Link
    Copy

  Posted 7 January 2019, 3:49 pm EST

  We implemented it and worked like a charm. Thanks for your help Sharad.