Skip to content

feat: Zoned series in cartesian chart#225

Open
pan-kot wants to merge 1 commit into
mainfrom
forecast-series
Open

feat: Zoned series in cartesian chart#225
pan-kot wants to merge 1 commit into
mainfrom
forecast-series

Conversation

@pan-kot
Copy link
Copy Markdown
Member

@pan-kot pan-kot commented May 15, 2026

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.

Screenshot 2026-05-15 at 13 57 08

Therefore, the existing linked series demo was updated:

Screenshot 2026-05-15 at 13 58 34

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

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.

@pan-kot pan-kot marked this pull request as ready for review May 15, 2026 11:59
@pan-kot pan-kot requested a review from a team as a code owner May 15, 2026 11:59
@pan-kot pan-kot requested review from srungta08 and removed request for a team May 15, 2026 11:59
Copy link
Copy Markdown
Member

@georgylobko georgylobko left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

return (point as Point).getZone();
}
} catch {
// no-op
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread src/core/utils.ts
const pointZone = point && getPointZone(point);
const zoneColor = typeof pointZone?.color === "string" ? pointZone.color : undefined;
const pointColor = typeof point?.color === "string" ? point.color : undefined;
return zoneColor ?? pointColor ?? "black";
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd suggest to cover this scenario in u tests

Comment thread src/core/utils.ts
if ("dashStyle" in series.options && series.options.dashStyle && series.options.dashStyle !== "Solid") {
if (
(dashStyle && dashStyle !== "Solid") ||
("dashStyle" in series.options && series.options.dashStyle && series.options.dashStyle !== "Solid")
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why not just

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

?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants