feat: Zoned series in cartesian chart

[pan-kot]

Description

This PR adds support for Highcharts zoneAxis and zones API to some of the Cartesian Chart series.

API changes:

export namespace CartesianChartProps {
  // ...

  export interface SeriesZone {
    value?: number;
    color?: string;
    dashStyle?: Highcharts.DashStyleValue;
  }
}

// Types AreaSeriesOptions, AreaSplineSeriesOptions, ColumnSeriesOptions,
// LineSeriesOptions, SplineSeriesOptions were updated by adding:
interface WithZones {
  zoneAxis?: "x" | "y";
  zones?: readonly SeriesZone[];
}

The series zones allow to change series' appearance (colour, dash-style) at certain thresholds on x- or y axis.

Screen.Recording.2026-05-15.at.13.55.13.mov

Previously, the same feature was implemented with linked series - which was not quite correct. The linked series cause master and linked series points both appear in the tooltip on the intersection coordinate. The linked series also do not allow a transition between master and linked series to happen without a connecting data point.

Therefore, the existing linked series demo was updated:

This matches Highcharts linked series demos, where master and linked series are usually defined on the same interval. The code to align navigation between master and linked series was removed: now these series are independently navigable.

How has this been tested?

• Updated unit tests for linked series
• New unit tests for zoned series

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[georgylobko]

Overall looks good. Left a few comments, address at your discretion

[georgylobko]

do we want to send an ops metric in this case?

[pan-kot]

There is no reason to report it as this is technically not a bug. The getZone should not throw an error, and this behaviour will be addressed by: highcharts/highcharts#24639

Technically, my check for series zones should already prevent the error, but I decided to keep it for extra safety for now.

[georgylobko]

I'd suggest to cover this scenario in u tests

[pan-kot]

It is already covered here: https://github.com/cloudscape-design/chart-components/pull/225/changes#diff-fa6cfa25e156948eb146ea2f343cea682b0aad0b562ce7b07e404173b65330f1R85

There is also an existing test that validates the fallback to "black"

[georgylobko]

why not just

    (series.options.dashStyle !== "Solid")

?

[pan-kot]

Series options is a union type - not all variants have dashStyle, so need to check first to satisfy the compiler.