Angular doesn't properly update Highcharts

Currently, I am facing an issue with updating my Highcharts chart dynamically based on an observable configuration in an Angular component. I have implemented an observable with ngIf as shown below:

<highcharts-chart
  *ngIf="conf | async as options"
  [Highcharts]="Highcharts"
  [options]="options"
>
</highcharts-chart>

The problem arises when switching between a column chart and a stacked column chart using the conf observable. The stacked values do not display correctly, and unexpected slices appear when transitioning from a stacked column chart to a pie chart.

To provide more context and visualize the issue, I have created StackBlitz demos showcasing the chart configurations that update every 5 seconds:

In initial demos, the configurations work correctly, which can be observed in these JSFiddles:

I would appreciate any insights or assistance in resolving why the dynamic updates are not functioning correctly.

angulartypescriptchartshighcharts

Answer №1

Utilizing the angular wrapper involves using chart.update to implement changes to a chart, preserving the previous options instead of recreating the chart. This can result in unexpected additional series being displayed.

To see the issue replicated with pure JS: http://jsfiddle.net/BlackLabel/ngLroxsu/

To resolve the problem, enabling the oneToOne option is recommended. However, it's important to thoroughly review the documentation and understand how option changes are applied.

<highcharts-chart
  ...
  [oneToOne]=true
>
</highcharts-chart>

Experience live demo here: https://stackblitz.com/edit/angular14-standaone-components-highcharts-rydlns

Detailed Docs: https://github.com/highcharts/highcharts-angular#options-details

Explore API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#update

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Automatic generation of generic types in higher-order functions in TypeScript

function createGenerator<P extends object>(initialize: (params: P) => void) { return function (params: P): P { initialize(params) return params } } const gen = createGenerator(function exampleFunction<T>(param: T) { console.lo ...

typescriptgenerics

What is the best method to utilize angular 2 cli for copying css and essential files to the dist folder?

After setting up my Angular 2 TypeScript solution and including the material Angular 2 npm package, I followed these steps: npm install -g angular-cli ng new PROJECT_NAME cd PROJECT_NAME ng build The files were successfully transferred from my source fol ...

angularnpmangular-cliember-cli

Sending an onclick event to a child class through React and TypeScript

I'm currently working through the Facebook React tutorial with Typescript for the first time. I need to pass an onClick event to the 'Square' component, which is implemented using Typescript and interfaces for state and props. How can I mod ...

reactjstypescriptinterface

Could anyone provide some insights on how the Angular subscribe method works?

I am currently learning Angular from a tutorial for version 4.0. I have reached Section 6 (Routing) of the tutorial and I am struggling to comprehend the subscribe method. I would appreciate some more clarification on this. I know that ngOnInit() is calle ...

angularrxjsobservable

How can I set up a KeyboardEvent listener in JavaScript?

My attempt to use @keydown resulted in an error: Type 'Event | KeyboardEvent' is not assignable to type 'KeyboardEvent'. Type 'Event' is missing the following properties from type 'KeyboardEvent': altKey, c ...

typescriptvue.js

Declaring scoped runtime interfaces with Typescript

I need to create a global interface that can be accessed at runtime under a specific name. /** Here is my code that will be injected */ // import Vue from "vue"; <- having two vue instances may cause issues // ts-ignore <- Vue is only ava ...

typescript

What is the best method to trigger a bootstrap modal window from a separate component in Angular 8?

I have successfully implemented a bootstrap modal window that opens on a button click. However, I am now facing difficulty in opening the same modal window from a different component. Below is the code I have tried: <section> <button type=&quo ...

javascriptangulartypescriptbootstrap-4modal-dialog

Strange behavior in Angular's http response

When I make a call to my API and receive a JSON response, the code snippet below illustrates how I handle it: getAllLearn() { this.learnService.getAllLearn().subscribe(res =>{ // The console log shows that res.featured only has one index: ( ...

javascriptangular

Should compile time errors be triggered by generic function constraints?

Surprisingly, the following code does not throw a compile time error as expected. interface Service { } abstract class TestService implements Service { } class TestServiceImpl extends TestService { } class Blah { } function getService<T extends S ...

typescript

Exploring the World of Angular2 Interfaces

Just starting out with Angular 2 and I'm wondering if anyone can provide a clear explanation of the interface concept in Angular 2. It would be really helpful for me if you could explain it with a working example. Additionally, I would appreciate som ...

angulartypescript

Encountered an issue while trying to add @angular/fire to the project - unable to resolve

Having encountered some issues with the commands I used in these versions. Can anyone provide assistance in resolving this matter? Your help is greatly appreciated. ------------------------------------------- Angular CLI: 14.0.0 Node: 16.15.1 Package ...

angulartypescriptfirebasenpmangularfire

Having some issues with ng-hide in angular, it doesn't seem to be functioning properly

<nav class="menu-nav"> <ul> <li class="menu-li" ng-model="myVar"><a>Discover<i class="fa fa-chevron-down pull-right"></i></a> <div class="sub-menu" ng-hide="myVar"&g ...

angularjstypescript

Remove the unnecessary space at the bottom of the Mat Dialog

I'm currently utilizing Angular Material within my Angular application. One issue I am facing is the excessive whitespace at the bottom of a dialog that displays information about a post. How can I reduce or eliminate this unnecessary space? Take a l ...

htmlcssangularangular-materialdialog

Ways to display Leaflet pins within Angular?

I've been working with Leaflet and despite extensive research, I'm still struggling to get my marker to display on the map. I've tried all the solutions available out there, including the Angular workaround recommended by Leaflet. Currently ...

angulartypescriptleafletmarkers

Preserve the most recent string inputs within a React state array

Within my React form, there are multiple text boxes that I need to extract values from upon the click of a button. To achieve this, I am utilizing an array of states. Below is my state defined as an array of objects: const [myState, setMyState] = useState( ...

reactjstypescriptreact-hooks

Peeling off the layers of an array declared as const to reveal its mutable version without being restricted to tuples

I'm facing a challenge with an array declared as as const: // example of a simple mock class class Child { _ = "" } const child = new Child(); const schema = [[child], child] as const; // readonly [readonly [Child], Child]; This array rep ...

typescript

Avoiding loading certain images within an *ngFor loop

Is it possible to control the loading of images within an *ngFor loop in Angular? Load image with index X first Fire a function once all other images have loaded The goal is to prioritize the display of important images while optimizing bandwidth usage. ...

angular

Modifying the array structure will deselect all individual <Input> elements that have been iterated

Hoping to create a system for adding/removing sub-items with buttons that increment/decrement slots in an array, where input fields are automatically added and removed: <div *ngFor="let item of itemsInNewOrder; let i = index"> <input [(ngModel) ...

javascripthtmlarraysangular

React is not displaying the most recent value

During the initial rendering, I start with an empty array for the object date. After trying to retrieve data from an influxDB, React does not re-render to reflect the obtained results. The get function is being called within the useEffect hook (as shown in ...

reactjstypescriptuse-effectreact-dom

Guide on retrieving specific values within an array and mapping them to separate arrays using the HttpClient service in Angular 7+

I'm having a tough time grasping the concept of handling data once it's returned from an Http Request in Angular 7+ The Service responsible for fetching each location is shown below: import { Injectable } from '@angular/core'; import ...

angularrxjspipeobservableangular-httpclient