Catweazle
Posts: 4
Joined: Thu Jan 16, 2025 1:35 pm

Update series.data in bar-chart

Hello everyone
I'm a highcharts newbie and have a little problem (maybe I don't understand it either) that you might be able to help me with.

Initial situation:
I have a simple bar chart and want to remove a bar.

Problem:
The bar (red bar) is removed but the space where the red bar was remains. Why? How do I get rid of this space after the update?

I created a simple Stackblitz that should show my problem. Simply click the button and the red bar should be removed (which happens), but also the space.

[stackblitz-demo][/https://stackblitz.com/edit/stackblitz- ... %2Fmain.ts]

Thank you for any help
andrzej.b
Site Moderator
Posts: 606
Joined: Mon Jul 15, 2024 12:34 pm

Re: Update series.data in bar-chart

Hi,

Welcome to the forum and thanks for reaching out with your question.

You are close :) here is refined version of your remove function:

Code: Select all

remove() {
  if (this.chartRef) {
    const series = this.chartRef.series[0];
    const newData = series.data
      .filter(point => point.options.id !== 'RED')
      .map(point => ({
        name: point.name,
        y: point.y,
        color: point.color
      } as Highcharts.PointOptionsObject));

    // Update the series data
    series.setData(newData, true);
  }
}
I hope you will find it useful.

Kind regards,
Andrzej
Highcharts Developer
Catweazle
Posts: 4
Joined: Thu Jan 16, 2025 1:35 pm

Re: Update series.data in bar-chart

Thanks Andrzej for your response and help first of all

We're using the id-property with the data-points. And in my test I also recognized a way which would work without this Id. But we need it.

And now I saw in your solution above that you also left out the id-property while mapping the new data-points array.

Why did you left out the id as well? What's the concept or reason behind this?
andrzej.b
Site Moderator
Posts: 606
Joined: Mon Jul 15, 2024 12:34 pm

Re: Update series.data in bar-chart

Hi,

Great observation! In the earlier solution, I omitted the id property to simplify the example, focusing on resolving the immediate issue. However, if you rely on the id property for your data points, you can include it in your updates.

Here's how you can update the remove method to include the id property:

Code: Select all

remove() {
  if (this.chartRef) {
    const series = this.chartRef.series[0];
    const newData = series.data
      .filter(point => point.options.id !== 'RED')
      .map(point => ({
        id: point.options.id,
        name: point.name,
        y: point.y,
        color: point.color
      } as Highcharts.PointOptionsObject));

    // Update the series data
    series.setData(newData, true);
  }
}
In this updated method, the id property is included in the new data points, ensuring that each point retains its unique identifier. This is important if you need to reference these points later or if other parts of your application rely on these identifiers.

Kind regards,
Andrzej
Highcharts Developer
Catweazle
Posts: 4
Joined: Thu Jan 16, 2025 1:35 pm

Re: Update series.data in bar-chart

Hi again,

Thank you for your answer, but I already did what you did in your update.

But now the solution does not work anymore. The spacer is there again.

At this point I was already and can't explain it to myself.

I know in the documentations is something mentioned that the update behavior is something different when the Id-property is involved. But I don't get the explaination from the docs :-(
andrzej.b
Site Moderator
Posts: 606
Joined: Mon Jul 15, 2024 12:34 pm

Re: Update series.data in bar-chart

Hi,

Thank you for sharing that. It seems the issue might be related to how Highcharts interprets the id property during updates. When the id is involved, Highcharts tries to match the existing points by id rather than treating them as entirely new data points.
To work around this, you can temporarily remove the id property during the update to ensure the chart treats it as a fresh data set. Then, if necessary, you can reassign the id after the update.
Here’s how you can do it:

Code: Select all

remove() {
  if (this.chartRef) {
    const series = this.chartRef.series[0];
    const newData = series.data
      .filter(point => point.options.id !== 'RED')
      .map(point => ({
        name: point.name,
        y: point.y,
        color: point.color
      } as Highcharts.PointOptionsObject));

    // Update the series data without ids
    series.setData(newData, true);

    // Optionally, reassign ids if needed
    newData.forEach((dataPoint, index) => {
      series.data[index].update({ id: dataPoint.id }, false);
    });

    this.chartRef.redraw(); // Ensure the chart is redrawn
  }
}
In this solution:
• ​Remove id Temporarily​: By excluding id during setData, you reset the internal state of the chart.
• ​Reassign id​: If you need the id for future operations, you can reassign it using point.update().
This should help remove the space while maintaining the flexibility of using id properties.

Let me know if this resolves the issue!
Andrzej
Highcharts Developer
Catweazle
Posts: 4
Joined: Thu Jan 16, 2025 1:35 pm

Re: Update series.data in bar-chart

Thank you for your solution and help.
With this information we can go further.

Return to “Highcharts Usage”