CODEWITHSUNDEEP
angularhighchartsredrawangular-highcharts
Pattinson Mj
Pattinson Mj

Reputation: 1

chartOptions.redraw is not a function in highcharts using angular

This is the html code

<highcharts-chart
  *ngIf="!isLoading"
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  [(update)]="updateChart"
  style="width: 100%; height: 100%; display: block;"
></highcharts-chart>

enter code here

This is the typescriptcode


 onTogglevolume() {
    this.chartOptions.series[2].visible = !this.chartOptions.series[2].visible;

    this.chartOptions = {
      ...this.chartOptions
    };
    this.chartOptions.redraw();

  }

These are import statements

import * as Highcharts from 'highcharts';
import { Options } from "highcharts";
import StockModule from 'highcharts/modules/stock';
StockModule(Highcharts);

Upvotes: 0

Views: 952

Answers (1)

Karol Kołodziej
Karol Kołodziej

Reputation: 672

The load event is only fired once at the begging so it's not the perfect place for more dynamic changes. Instead of this, I suggest using some other event. I guess you are going to calculate the colour of each column after changing the time range. In this case, you should use for example the afterSetExtremes events as I did it in the demo. I also have created a separate method called colorVolume. Inside using the chart reference I used the point update method to change the first column colour.

Demo:
https://stackblitz.com/edit/highcharts-angular-basic-line-fvtyrx
API:
https://api.highcharts.com/highcharts/xAxis.events.afterSetExtremes
https://api.highcharts.com/class-reference/Highcharts.Point#update

Upvotes: 1

Related Questions