angular-highcharts

angular-highcharts copied to clipboard

Hi,

Is it possible to register event handlers like legendItemClick or point select events on the tag where [chart] directive ws placed?

Thanks in advance, plunker example would be nice 😉

Managed to add event handlers above like this:

chart = new Chart({
      chart: {
        type: 'line'
      },
      title: {
        text: 'Linechart'
      },
      credits: {
        enabled: false
      },
      plotOptions : {
        series: {
          cursor: 'pointer', // Clickable chart has pointer cursor
          allowPointSelect: true,
          point: {
            events: {
              select: this.onPointSelect.bind(this),
            }
          },
          events: {
            legendItemClick: this.onLegendItemClick.bind(this),
          },
        }
      }
    });

And you can simply define the two event handlers above in the Angular component like this:

  onPointSelect(event: { target: highcharts.DataPoint }) {
    ...
  }

  onLegendItemClick = (event: { target: highcharts.SeriesObject }) => {
    ...
  }

This is a way it could work ;-)