ApexCharts Cannot read property 'appendSeries' of undefined

Question

I'm trying to add a new series to my ApexCharts (in ngOnInit) but it keeps telling me, that my chart is undefined, even though i initialized it in the constructor. I've choosen the "multiple series- group rows" chart, which you can find on the following link. https://apexcharts.com/angular-chart-demos/timeline-charts/multiple-series-group-rows/

@Component({
  selector: "app-gantt",
  templateUrl: "./gantt.component.html",
  styleUrls: ["./gantt.component.css"]
})
export class GanttComponent implements OnInit {
  @ViewChild("chart") chart: ChartComponent;
  public chartOptions: Partial<ChartOptions>;

  constructor() {
    this.chartOptions = {
      series: [
        {
          name: "John Adams",
          data: [
            {
              x: "President",
              y: [
                new Date(1797, 2, 4).getTime(),
                new Date(1801, 2, 4).getTime()
              ]
            },
            {
              x: "Vice President",
              y: [
                new Date(1789, 3, 21).getTime(),
                new Date(1797, 2, 4).getTime()
              ]
            }
          ]
        }    
      ],
      chart: {
        height: 350,
        type: "rangeBar"
      },
      plotOptions: {
        bar: {
          horizontal: true,
          barHeight: "50%",
          rangeBarGroupRows: true
        }
      },
      colors: [
        "#1B998B",
        "#2E294E",
        "#F46036",
        "#E2C044"
      ],
      fill: {
        type: "solid"
      },
      xaxis: {
        type: "datetime"
      },
      legend: {
        position: "right"
      },
      tooltip: {
        custom: function (opts) {
          const fromYear = new Date(opts.y1).getFullYear();
          const toYear = new Date(opts.y2).getFullYear();
          const values = opts.ctx.rangeBar.getTooltipValues(opts);

          return (
            '<div class="apexcharts-tooltip-rangebar">' +
            '<div> <span class="series-name" style="color: ' +
            values.color +
            '">' +
            (values.seriesName ? values.seriesName : "") +
            "</span></div>" +
            '<div> <span class="category">' +
            values.ylabel +
            ' </span> <span class="value start-value">' +
            fromYear +
            '</span> <span class="separator">-</span> <span class="value end-value">' +
            toYear +
            "</span></div>" +
            "</div>"
          );
        }
      }
    };
  }

  ngOnInit() {
    this.chart.appendSeries([{
      name: "George Washington",
      data: [
        {
          x: "President",
          y: [
            new Date(1789, 3, 30).getTime(),
            new Date(1797, 2, 4).getTime()
          ]
        }
      ]
    }])
  }
}

Answer 1

ngOnInit hook might be too soon to access elements using @ViewChild. They might've not been rendered yet. You have 2 options

1. Set static: true so the variable can be accessed before render (only Angular v9+). See here for more info.

@ViewChild("chart", { static: true }) chart: ChartComponent;

2. Or use AfterViewInit hook.

export class GanttComponent implements AfterViewInit {
  @ViewChild("chart") chart: ChartComponent;
  ...

  ngAfterViewInit() {
    this.chart.appendSeries([{
      ...
    }]);
  }
}