Highcharts How to toggle DataLabel

Question

I've got a chart with two series. I want to toggle the dataLabels of the series by clicking a button.

changeDatalabel(): void { 

if (!this.dataLabelEnabled) { // global Var
  this.chart.ref.series[0].update({ dataLabels: { enabled: true } }); // Compile error
  this.dataLabelEnabled = true; // for toggling
} else {
  this.chart.ref.series[0].update({ dataLabels: { enabled: false } }); // Compile error
  this.dataLabelEnabled = false; // for toggling
}

The problem is that the updateMethod get a compile error when I insert "dataLabels: {enable: true}" and he is jumping out of the method "changeDatalabel()".

When i got two buttons with the updateMethod the compile error turn up again but it works.

createLabel(): void {
this.chart.ref.series[0].update({ dataLabels: { enabled: true } });



deleteLabel(): void {
this.chart.ref.series[0].update({ dataLabels: { enabled: false } });

What kind of error do you receive? See the example for dynamic interaction with the chart https://github.com/gevgeny/angular2-highcharts#dynamic-interaction-with-chart-object. If you still have problem with your example, paste the full component code or create a live example, e.g. on plunkr — morganfree, Mar 12 '18 at 22:48
@morganfree the funny thing is in the fiddle i created it works. but in my application not. Error: "Argument of type '{dataLabels: {enabled: boolean;};' is not assignable to parameter of type 'IndividualSeriesOptions'. Object literal may only specify known properties, and 'dataLabels' does not exist in type 'IndividualSeriesOptions'. https://stackblitz.com/edit/angular-d8a1dy — KarLito, Mar 13 '18 at 07:55

score 0 · Accepted Answer · answered Mar 13 '18 at 11:58

It is the issue with the correct types. You can see in @types/highcharts that the series.update first param is of IndividualSeriesOptions type which dooes not have DataLabels prop.

You can set the options type explicitly to be of LineChart type:

import { LineChart } from 'highcharts';
...

toggleLabel(): void {
  const options: LineChart = {
    dataLabels: {
      enabled: !this.dataLabelEnabled
    }
  }

  this.chart.ref.series[0].update(options);
  this.dataLabelEnabled = !this.dataLabelEnabled;
}

example: https://stackblitz.com/edit/angular-bmhomi?file=app/highchart-demo/highchart-demo.component.ts

This is amazing! Doesn't know that this works. Thank you very much. — KarLito, Mar 14 '18 at 07:52

Highcharts How to toggle DataLabel

1 Answers1