CODEWITHSUNDEEP
angularhighcharts
El Hombre Sin Nombre
El Hombre Sin Nombre

Reputation: 3092

Angular Highchart - Highstock with multiple lines

I'm trying to populate highchart with a multiple line series with this code

this.http
      .get("https://www.highcharts.com/samples/data/goog-c.json")
      .subscribe((goog: any) => {
        this.http
          .get("https://www.highcharts.com/samples/data/msft-c.json")
          .subscribe((msft: any) => {
            this.seriesOptions = [
              {
                name: "GOOG",
                data: goog,
                id: "dataseries",
                color: '#d32f2f',
              },
              {
                name: "MSFT",
                data: msft,
                id: "dataseries",
                color: '#90caf9',
              }
            ];
            this.chartOptions = {
              chart: {
                type: "line",
                zoomType: "xy",
                panning: true,
                panKey: "shift"
              },
              series: this.seriesOptions
            };
          });
      });

The problem: The highchart only takes first date serie and ignore second. So, what is the correct way to take multiple JSON data serie and popule chart?

UPDATE 2

I create example stackblitz.com/edit/angular-huyilk-e6z282

Upvotes: 1

Views: 1115

Answers (1)

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

The solution to your issue is very simple. You've used the same id property for both series yet they should be unique.

Code:

this.http
  .get("https://www.highcharts.com/samples/data/goog-c.json")
  .subscribe((goog: any) => {
    this.http
      .get("https://www.highcharts.com/samples/data/msft-c.json")
      .subscribe((msft: any) => {
        this.seriesOptions = [{
            name: "Sensor",
            data: goog,
            id: "dataseries1",
            color: '#d32f2f',
          },
          {
            name: "Batería",
            data: msft,
            id: "dataseries2",
            color: '#90caf9',
          }
        ];
        this.chartOptions = {
          chart: {
            type: "line",
            zoomType: "xy",
            panning: true,
            panKey: "shift"
          },
          series: this.seriesOptions
        };
      });
  });

Upvotes: 2

Related Questions