Highcharts in Angular - accessing the API

Question

I want to access the highcharts API, specifically I want to add or remove a series dynamically. Essentially I cant access any methods, or I am unsure on how.

The code I have is as follows:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-widget-area',
  templateUrl: './area.component.html',
  styleUrls: ['./area.component.scss']
})
export class AreaComponent implements OnInit {

  chartOptions: {};

  Highcharts = Highcharts;

  constructor() { }

  ngOnInit(): void {
    this.myChart();
 }

 myChart(){
  this.chartOptions = {
    chart: {
        type: 'line'
    },
    title: {
        text: 'Historic and Estimated Worldwide Population Growth by Region'
    },
    subtitle: {
        text: 'Source: Wikipedia.org'
    },
    xAxis: {
        categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
        tickmarkPlacement: 'on',
        title: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: 'Billions'
        },
        labels: {
            formatter () {
                return this.value / 1000;
            }
        }
    },
    tooltip: {
        split: true,
        valueSuffix: ' millions'
    },
    plotOptions: {
      line: {
          dataLabels: {
              enabled: true
          },
          enableMouseTracking: false
      }
  },
    series: [{
        name: 'Asia',
        data: [502, 635, 809, 947, 1402, 3634, 5268]
    }, {
        name: 'Africa',
        data: [106, 107, 111, 133, 221, 767, 1766]
    }, {
        name: 'Europe',
        data: [163, 203, 276, 408, 547, 729, 628]
    }, {
        name: 'America',
        data: [18, 31, 54, 156, 339, 818, 1201]
    }, {
        name: 'Oceania',
        data: [2, 2, 2, 6, 13, 30, 46]
    }]
};

  setTimeout(() => {
  window.dispatchEvent(
    new Event('resize')
  );
},300);
 }
}

and the HTML is like this:

<highcharts-chart
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  style="width: 100%; height: 400px; display: block;">
</highcharts-chart>

How can I rewrite this piece of code to make it possible to access the methods such as addSeries and so on, so that I can dynamically show new data?

Ive seen theses two posts, and they look like they can be very helpful:

Highcharts add series dynamically

Adding new HighChart Series

The problem is that I cant access the methods like they do.

And when I try to implement chart = new Highcharts.Chart(options); like they do, I onyl get errors.

Thanks is advance.

score 0 · Accepted Answer · answered Nov 06 '20 at 17:45

0

It needs to be done in 2 steps. First you change the value inside the chartOption Object. Second you update the chart.

in your component you add a function like this for exemple:

update(){
  this.myOptions.series = [{
    name: 'Oceania',
    data: [2, 2, 2, 6, 13, 30, 46]
  }]
  this.updateFromInput = true;
}

And in your html:

<highcharts-chart 
  [Highcharts]="Highcharts"
  [options]="myOptions"
  [(update)]="updateFromInput">
</highcharts-chart>
<button (click)="update()" class="btn">Add</button>

an basic exemple here

answered Nov 06 '20 at 17:45

Xtof

415
5
11

Thank you so much. This has helped me greatly! There is still one problem. Once I add new data, the series array changes, but the old data is still visible on the chart. How do I remove this old information? – Paul Brink Nov 07 '20 at 07:42
I think that it is because you forgot to update the chart with the boolean "updateFromInput". – Xtof Nov 07 '20 at 07:48
I did include it in both the TS and HTML file as shown in the example. I think the problem might be that the chart is not redrawn? – Paul Brink Nov 07 '20 at 08:06
I think so but without your code it is hard for me to help. Maybe you can update your post? – Xtof Nov 07 '20 at 10:27
This post was focused on adding data to the series, and you have answered my question. The problem now is to update the chart effectively. I have created a new post with this problem. Should I rather update this post or leave the new one as is? Here is the link: https://stackoverflow.com/questions/64726763/highchart-not-adding-new-series-or-removing-old-series – Paul Brink Nov 07 '20 at 10:37

Highcharts in Angular - accessing the API

1 Answers1