0

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);
Pattinson Mj
  • 1
  • 2
  • 1
    Please reproduce your case on the online editor with an explanation of what is wrong. You can start from this template: https://stackblitz.com/edit/highcharts-angular-basic-line – Sebastian Wędzel Nov 18 '20 at 08:22
  • @SebastianWędzel Please find the stackblitz link attached https://stackblitz.com/edit/highcharts-angular-basic-line-wfbtbo?file=src%2Fapp%2Fapp.component.ts. I am not able to redraw the chart on volumetoggle function call – Pattinson Mj Nov 18 '20 at 08:40
  • Pattinson Mj, I am afraid that the demo which you have shared doesn't work. – Sebastian Wędzel Nov 18 '20 at 08:56
  • @SebastianWędzel here is the working demo and the issue is i am not able to get the color for column chart after volume toggle or click on any buttons.Initially on load the column chart is getting applied color but after that its not working. https://stackblitz.com/edit/highcharts-angular-basic-line-mfcrew?file=src%2Fapp%2FdataService.ts – Pattinson Mj Nov 19 '20 at 11:05

1 Answers1

1

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

Karol Kołodziej
  • 652
  • 4
  • 9