fix: Extra datapoints being rendered when navigator is enabled (#49)

ryugaraj · Raj Jaiswal · web-flow · commit 432a314ea9b0 · 2025-07-02T14:35:07.000Z
* fix: do not add point for internal series

* fix: filter out internal series from chart

* link isInternal prop request to highcharts

---------

Co-authored-by: Raj Jaiswal &lt;iamraj@amazon.com&gt;
diff --git a/pages/03-core/core-line-chart.page.tsx b/pages/03-core/core-line-chart.page.tsx
@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import Highcharts from "highcharts";
 import { omit } from "lodash";
 
 import Button from "@cloudscape-design/components/button";
@@ -96,6 +97,7 @@ export default function () {
     >
       <CoreChart
         {...omit(chartProps.cartesian, "ref")}
+        highcharts={Highcharts}
         options={{
           lang: {
             accessibility: {
@@ -111,6 +113,11 @@ export default function () {
             },
           ],
           yAxis: [{ title: { text: "Events" } }],
+          chart: {
+            zooming: {
+              type: "x",
+            },
+          },
         }}
         chartHeight={400}
         tooltip={{ placement: "outside" }}
diff --git a/src/cartesian-chart/__tests__/cartesian-chart-visibility.test.tsx b/src/cartesian-chart/__tests__/cartesian-chart-visibility.test.tsx
@@ -8,12 +8,13 @@ import { vi } from "vitest";
 import "@cloudscape-design/components/test-utils/dom";
 import { CartesianChartProps } from "../../../lib/components/cartesian-chart";
 import { toggleLegendItem } from "../../core/__tests__/common";
+import { getChartSeries } from "../../internal/utils/chart-series";
 import { getChart, ref, renderCartesianChart, renderStatefulCartesianChart } from "./common";
 
 function getVisibilityState() {
   const legend = getChart().findLegend();
   const chart = highcharts.charts.find((c) => c)!;
-  const series = chart.series;
+  const series = getChartSeries(chart.series);
   const hiddenSeries = series.filter((s) => !s.visible);
   return {
     allLegendItems: legend?.findItems().map((w) => w.getElement().textContent) ?? [],
diff --git a/src/core/__tests__/chart-core-visibility.test.tsx b/src/core/__tests__/chart-core-visibility.test.tsx
@@ -5,6 +5,7 @@ import highcharts from "highcharts";
 import { vi } from "vitest";
 
 import "@cloudscape-design/components/test-utils/dom";
+import { getChartSeries } from "../../internal/utils/chart-series";
 import { createChartWrapper, renderChart, renderStatefulChart, selectLegendItem, toggleLegendItem } from "./common";
 
 const onVisibleItemsChange = vi.fn();
@@ -58,9 +59,9 @@ const pieSeries: Highcharts.SeriesOptionsType[] = [
 function getVisibilityState() {
   const legend = createChartWrapper().findLegend();
   const chart = highcharts.charts.find((c) => c)!;
-  const series = chart.series;
+  const series = getChartSeries(chart.series);
   const hiddenSeries = series.filter((s) => !s.visible);
-  const points = chart.series.flatMap((s) => s.data);
+  const points = getChartSeries(chart.series).flatMap((s) => s.data);
   const hiddenPoints = points.filter((p) => !p.visible);
   return {
     allLegendItems: legend?.findItems().map((w) => w.getElement().textContent) ?? [],
diff --git a/src/core/chart-api/chart-extra-axis-titles.tsx b/src/core/chart-api/chart-extra-axis-titles.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import AsyncStore from "../../internal/utils/async-store";
+import { getChartSeries } from "../../internal/utils/chart-series";
 import { castArray, isEqualArrays } from "../../internal/utils/utils";
 import { ChartExtraContext } from "./chart-extra-context";
 
@@ -30,7 +31,7 @@ export class ChartExtraAxisTitles extends AsyncStore<ReactiveAxisTitlesState> {
 
 function getVerticalAxesTitles(chart: Highcharts.Chart) {
   const isInverted = !!chart.options.chart?.inverted;
-  const hasSeries = chart.series.filter((s) => s.type !== "pie").length > 0;
+  const hasSeries = getChartSeries(chart.series).filter((s) => s.type !== "pie").length > 0;
 
   // We extract multiple titles as there can be multiple axes. This supports up to 2 axes by
   // using space-between placement of the labels in the corresponding component.
diff --git a/src/core/chart-api/chart-extra-context.tsx b/src/core/chart-api/chart-extra-context.tsx
@@ -3,6 +3,7 @@
 
 import type Highcharts from "highcharts";
 
+import { getChartSeries } from "../../internal/utils/chart-series";
 import { ChartLabels } from "../i18n-utils";
 import { ChartHighlightProps, CoreLegendItem, Rect } from "../interfaces";
 import { getGroupRect, isSeriesStacked } from "../utils";
@@ -93,7 +94,8 @@ function computeDerivedState(chart: Highcharts.Chart): ChartExtraContext.Derived
     pointsByX.set(point.x, xPoints);
   };
   const compareX = (a: number, b: number) => a - b;
-  for (const s of chart.series) {
+
+  for (const s of getChartSeries(chart.series)) {
     const seriesX = new Set<number>();
     if (s.visible) {
       for (const d of s.data) {
diff --git a/src/core/chart-api/chart-extra-legend.tsx b/src/core/chart-api/chart-extra-legend.tsx
@@ -5,6 +5,7 @@ import type Highcharts from "highcharts";
 
 import { ChartSeriesMarker, ChartSeriesMarkerType } from "../../internal/components/series-marker";
 import AsyncStore from "../../internal/utils/async-store";
+import { getChartSeries } from "../../internal/utils/chart-series";
 import { isEqualArrays } from "../../internal/utils/utils";
 import { CoreLegendItem } from "../interfaces";
 import { getChartLegendItems, getPointId, getSeriesId } from "../utils";
@@ -128,7 +129,7 @@ function updateItemsVisibility(
     return nextVisible;
   };
 
-  for (const series of chart.series) {
+  for (const series of getChartSeries(chart.series)) {
     if (availableItemsSet.has(getSeriesId(series))) {
       series.setVisible(getVisibleAndCount(getSeriesId(series), series.visible), false);
     }
diff --git a/src/core/chart-api/chart-extra-nodata.tsx b/src/core/chart-api/chart-extra-nodata.tsx
@@ -4,6 +4,7 @@
 import type Highcharts from "highcharts";
 
 import AsyncStore from "../../internal/utils/async-store";
+import { getChartSeries } from "../../internal/utils/chart-series";
 import { ChartExtraContext } from "./chart-extra-context";
 
 // The reactive state is used to propagate updates to the corresponding no-data React component.
@@ -51,7 +52,7 @@ export class ChartExtraNodata extends AsyncStore<ReactiveNodataState> {
 function findAllSeriesWithData(chart: Highcharts.Chart) {
   // When a series becomes hidden, Highcharts no longer computes the data array, so the series.data is empty.
   // That is why we assert the data from series.options instead.
-  return chart.series.filter((s) => {
+  return getChartSeries(chart.series).filter((s) => {
     const data = "data" in s.options && s.options.data && Array.isArray(s.options.data) ? s.options.data : [];
     return data.some((i) => i !== null && (typeof i === "object" && "y" in i ? i.y !== null : true));
   });
diff --git a/src/core/chart-api/chart-extra-pointer.tsx b/src/core/chart-api/chart-extra-pointer.tsx
@@ -3,6 +3,7 @@
 
 import type Highcharts from "highcharts";
 
+import { getChartSeries } from "../../internal/utils/chart-series";
 import { DebouncedCall } from "../../internal/utils/utils";
 import { isPointVisible } from "../utils";
 import { ChartExtraContext } from "./chart-extra-context";
@@ -77,7 +78,7 @@ export class ChartExtraPointer {
   private onChartMousemove = (event: MouseEvent) => {
     const chart = this.context.chart();
     // In pie charts there is no support for groups - only a single point can be hovered at a time.
-    if (chart.series.some((s) => s.type === "pie")) {
+    if (getChartSeries(chart.series).some((s) => s.type === "pie")) {
       return;
     }
     // The plotX and plotY are pointer coordinates, normalized against the chart plot.
diff --git a/src/core/chart-api/index.tsx b/src/core/chart-api/index.tsx
@@ -5,6 +5,7 @@ import { useEffect, useRef } from "react";
 import type Highcharts from "highcharts";
 
 import { ReadonlyAsyncStore } from "../../internal/utils/async-store";
+import { getChartSeries } from "../../internal/utils/chart-series";
 import { Writeable } from "../../internal/utils/utils";
 import {
   getChartAccessibleDescription,
@@ -326,7 +327,7 @@ export class ChartAPI {
   private resetColorCounter() {
     const chart = this.context.chart();
     if ("colorCounter" in chart && typeof chart.colorCounter === "number") {
-      chart.colorCounter = chart.series.length;
+      chart.colorCounter = getChartSeries(chart.series).length;
     }
   }
 
diff --git a/src/core/components/core-tooltip.tsx b/src/core/components/core-tooltip.tsx
@@ -10,6 +10,7 @@ import LiveRegion from "@cloudscape-design/components/live-region";
 
 import ChartSeriesDetails, { ChartSeriesDetailItem } from "../../internal/components/series-details";
 import { useSelector } from "../../internal/utils/async-store";
+import { getChartSeries } from "../../internal/utils/chart-series";
 import { ChartAPI } from "../chart-api";
 import { getFormatter } from "../formatters";
 import {
@@ -148,7 +149,7 @@ function getTooltipContentCartesian(
   const chart = group[0].series.chart;
   const getSeriesMarker = (series: Highcharts.Series) =>
     api.renderMarker(getSeriesMarkerType(series), getSeriesColor(series), true);
-  const matchedItems = findTooltipSeriesItems(chart.series, group);
+  const matchedItems = findTooltipSeriesItems(getChartSeries(chart.series), group);
   const detailItems: ChartSeriesDetailItem[] = matchedItems.map((item) => {
     const valueFormatter = getFormatter(item.point.series.yAxis);
     const itemY = isXThreshold(item.point.series) ? null : (item.point.y ?? null);
diff --git a/src/core/utils.ts b/src/core/utils.ts
@@ -4,6 +4,7 @@
 import type Highcharts from "highcharts";
 
 import { ChartSeriesMarkerType } from "../internal/components/series-marker";
+import { getChartSeries } from "../internal/utils/chart-series";
 import { getFormatter } from "./formatters";
 import { ChartLabels } from "./i18n-utils";
 import { CoreLegendItemSpec, Rect } from "./interfaces";
@@ -154,7 +155,7 @@ export function getChartLegendItems(chart: Highcharts.Chart): readonly CoreLegen
       });
     }
   };
-  for (const s of chart.series) {
+  for (const s of getChartSeries(chart.series)) {
     addSeriesItem(s);
     s.data.forEach(addPointItem);
   }
diff --git a/src/internal/utils/chart-series.ts b/src/internal/utils/chart-series.ts
@@ -0,0 +1,24 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Series } from "highcharts";
+
+// isInternal is currently not a publicly supported prop
+// https://github.com/highcharts/highcharts/issues/23278
+interface InternalSeries extends Series {
+  options: Series["options"] & {
+    isInternal?: boolean;
+  };
+}
+
+export function getChartSeries(series: InternalSeries[]) {
+  // Filters out internal series from chart, e.g., series from navigator, scrollbar, etc.
+
+  // When calling chart.series, the result includes both the main chart series
+  // and additional internal series (e.g., navigator series) when using Highstock navigator.
+
+  // We are adding datapoints and doing other calculations and using Highstock version with a
+  // navigator is causing duplicated unexpected datapoints and series entries in the chart.
+
+  return series.filter((s) => !s.options.isInternal);
+}
diff --git a/src/pie-chart/__tests__/pie-chart-visibility.test.tsx b/src/pie-chart/__tests__/pie-chart-visibility.test.tsx
@@ -9,14 +9,15 @@ import "@cloudscape-design/components/test-utils/dom";
 import { PieChartProps } from "../../../lib/components/pie-chart";
 import createWrapper from "../../../lib/components/test-utils/dom";
 import { toggleLegendItem } from "../../core/__tests__/common";
+import { getChartSeries } from "../../internal/utils/chart-series";
 import { ref, renderPieChart, renderStatefulPieChart } from "./common";
 
 const getChart = () => createWrapper().findPieHighcharts()!;
 
 function getVisibilityState() {
   const legend = getChart().findLegend();
   const chart = highcharts.charts.find((c) => c)!;
-  const points = chart.series.flatMap((s) => s.data);
+  const points = getChartSeries(chart.series).flatMap((s) => s.data);
   const hiddenPoints = points.filter((p) => !p.visible);
   return {
     allLegendItems: legend?.findItems().map((w) => w.getElement().textContent) ?? [],
diff --git a/src/pie-chart/chart-inner-area.tsx b/src/pie-chart/chart-inner-area.tsx
@@ -5,6 +5,7 @@ import { useRef } from "react";
 import type Highcharts from "highcharts";
 
 import * as Styles from "../internal/chart-styles";
+import { getChartSeries } from "../internal/utils/chart-series";
 import { PieChartProps } from "./interfaces";
 
 import testClasses from "./test-classes/styles.css.js";
@@ -31,8 +32,8 @@ class ChartInnerDescriptions {
   private descriptionElement: null | Highcharts.SVGElement = null;
 
   public create({ innerAreaTitle, innerAreaDescription }: InnerAreaProps, chart: Highcharts.Chart) {
-    const centerX = chart.plotLeft + chart.series[0].center[0];
-    const centerY = chart.plotTop + chart.series[0].center[1];
+    const centerX = chart.plotLeft + getChartSeries(chart.series)[0].center[0];
+    const centerY = chart.plotTop + getChartSeries(chart.series)[0].center[1];
 
     if (innerAreaTitle) {
       this.titleElement = chart.renderer

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@ import { useEffect, useRef } from "react";`
`5`	`5`	`import type Highcharts from "highcharts";`
`6`	`6`
`7`	`7`	`import { ReadonlyAsyncStore } from "../../internal/utils/async-store";`
	`8`	`+import { getChartSeries } from "../../internal/utils/chart-series";`
`8`	`9`	`import { Writeable } from "../../internal/utils/utils";`
`9`	`10`	`import {`
`10`	`11`	`getChartAccessibleDescription,`
`@@ -326,7 +327,7 @@ export class ChartAPI {`
`326`	`327`	`private resetColorCounter() {`
`327`	`328`	`const chart = this.context.chart();`
`328`	`329`	`if ("colorCounter" in chart && typeof chart.colorCounter === "number") {`
`329`		`- chart.colorCounter = chart.series.length;`
	`330`	`+ chart.colorCounter = getChartSeries(chart.series).length;`
`330`	`331`	`}`
`331`	`332`	`}`
`332`	`333`