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!