HighCharts Angular -Show noData if the data series is empty-CodePudding

I am using Highchart in my angular app.

I have a requirement to display a message in highchart if the data set returned by an API is empty.

I have tried the below but it is not showing the message in Highchart.

https://codesandbox.io/s/angular-forked-cce3s

How ever it is possible to show if we set lang: { noData: "" } to lang: { noData: "No Data available" } in chart Options.

But I don't want to do this since it will show "No data available" message initially, when the page loads even if we have data.

Do we have any better solution for this.

.HTML content

  <highcharts-chart
  id="container"
  [Highcharts]="Highcharts"
  [constructorType]="chartConstructor"
  [options]="chartOptions"
  [callbackFunction]="chartCallback"
  [(update)]="updateFlag"
  [oneToOne]="true"
  style="width: 100%; height: 400px; display: block;">
  </highcharts-chart>

.TS

import { Component, OnInit } from "@angular/core";
import * as Highcharts from "highcharts";
import * as HighchartsMore from "highcharts/highcharts-more";
import * as HighchartsExporting from "highcharts/modules/exporting";

HighchartsMore(Highcharts);
HighchartsExporting(Highcharts);
const noData = require("highcharts/modules/no-data-to-display");
noData(Highcharts);

@Component({
  selector: "app-chart",
  templateUrl: "./chart.component.html"
})
export class ChartComponent implements OnInit {
  title = "app";
  chart;
  updateFlag = false;
  Highcharts = Highcharts;
  chartConstructor = "chart";
  chartCallback;
  chartOptions = {
    title: { text: "" },
    series: [
      {
        data: []
      }
    ],
    lang: { noData: "" },
    exporting: {
      enabled: true
    },
    yAxis: {
      allowDecimals: false,
      title: {
        text: "Data"
      }
    }
  };
  data: any;

  constructor() {
    const self = this;
    this.chartCallback = (chart) => {
      // saving chart reference
      self.chart = chart;
    };
  }

  ngOnInit() {
    console.log(Math.random());
    if (Math.random() > 0.6) {
      this.assigndata();
    } else {
      this.assignzero();
    }

    this.updateChart();
  }
  assigndata() {
    this.data = [{ data: [5, 6, 15] }, { data: [7, 4, 14] }];
  }

  assignzero() {
    this.data = [];
  }

  updateChart() {
    const self = this,
      chart = this.chart;
    console.log(this.data);
    setTimeout(() => {
      if (this.data.length === 0) {
        self.chartOptions.series = this.data;
        self.chartOptions.lang.noData = "No Data Available...";
      } else {
        self.chartOptions.series = this.data;
        self.chartOptions.title = {
          text: "Updated title!"
        };
      }

      self.updateFlag = true;
    }, 1000);
  }
}

CodePudding user response：

If you have an empty dataset, you can set the noData text this way

   self.chart.hideNoData();
   self.chart.showNoData("No Data Available...");