Skip to content

Conversation

@Pixselve
Copy link
Contributor

@Pixselve Pixselve commented Nov 5, 2025

Description

Add support for displaying series markers with different status states, particularly a "warning" status. This enables visual indication of series that require attention or have issues.

Changes include:

  • Extend Highcharts SeriesOptions interface with optional status property
  • Update ChartSeriesMarker to accept and render status prop
  • Pass status through chart legend and tooltip components
  • Add visual examples in marker-permutations page for warning state

How has this been tested?

  • Updated the permutations page.
image
  • Updated the core line chart.
image
  • Added unit tests.
Review checklist

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.

@Pixselve
Copy link
Contributor Author

Pixselve commented Nov 6, 2025

Actually found this change is not accessible. Will work on updating that

Add support for displaying series markers with different status states,
particularly a "warning" status. This enables visual indication of
series that require attention or have issues.

Changes include:
- Extend Highcharts SeriesOptions interface with optional status property
- Update ChartSeriesMarker to accept and render status prop
- Pass status through chart legend and tooltip components
- Add visual examples in marker-permutations page for warning state
@Pixselve Pixselve force-pushed the warning-icon-to-markers branch from d57ee33 to fab6169 Compare November 26, 2025 08:59
@Pixselve
Copy link
Contributor Author

Updated the warning icon to make it overlap a little with the marker:

image image

import pseudoRandom from "../utils/pseudo-random";

const i18nStrings = {
seriesStatusWarningAriaLabel: "warning",
Copy link
Member

Choose a reason for hiding this comment

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

you can create us a feature request to add support for this prop in the built-in i18n

@pan-kot
Copy link
Member

pan-kot commented Dec 5, 2025

The doubling of the marker sizes affected the spacing of the legend and tooltip items by a lot. I don't think we should do this: we can try to make the size increase smaller, and can also update the spacings of the legend and the tooltip.

Screenshot 2025-12-05 at 09 16 05

@jperals
Copy link
Member

jperals commented Dec 9, 2025

Note that the PR has some conflicts to be solved.

…icon-to-markers

# Conflicts:
#	src/__tests__/__snapshots__/documenter.test.ts.snap
#	src/core/chart-api/chart-extra-legend.tsx
#	src/core/interfaces.ts
#	src/core/utils.ts
@Pixselve Pixselve requested a review from a team as a code owner December 10, 2025 10:24
@Pixselve Pixselve requested review from pan-kot and removed request for a team December 10, 2025 10:24
# Conflicts:
#	src/core/chart-api/chart-extra-legend.tsx
#	src/core/components/core-tooltip.tsx
@Pixselve
Copy link
Contributor Author

Note that the PR has some conflicts to be solved.

Resolved the conflict

* Specifies the options for each item in the chart.
* @param id the item id. Can be the id of a series or a point.
*/
getItemProps?: (id: string) => ChartItemOptions;
Copy link
Member

Choose a reason for hiding this comment

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

Two suggestions here:

  1. Rename to getItemOptions to be inline with Highcharts conventions and interface name
  2. Update arguments to { itemId: string } type to allow for more options here in the future (name, etc.)

Copy link
Member

Choose a reason for hiding this comment

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

Also, please add ChartItemOptions to the CoreChartProps namespace (see how it is done for other props)

Copy link
Contributor Author

@Pixselve Pixselve Dec 19, 2025

Choose a reason for hiding this comment

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

In that scenario, I would have loved to use a pattern I use a lot in Rust:

enum ItemIdentifier {
    Series(String)
    Point(String)
}

struct GetItemOptionsProps {
    item_identifier: ItemIdentifier
}

// then, you could do
fn getItemProps(props: GetItemOptionsProps) -> ChartItemOptions {
    match props.item_identifier {
        Series(id) => println!("props for series with id {}", id),
        Point(id) => println!("props for point with id {}", id),
    }
}

Anyway, covered your suggestions in the next rev. Thanks!

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.

3 participants