Add colorAccessor prop to XYChart LineSeries

[johnathanludwig]

A few of the XYChart series components like BarSeries support providing a colorAccessor. This is convenient when you want to specify a specific color for each series.

It would be nice if this support could be added to LineSeries as well.

Currently you either need to modify the theme and track specific indexes to modify the correct colors, or specify a stroke, but the downside of the stroke is it doesn't update glyph you get when hovering.

[chrisella]

I need this and cannot fathom why it was added to other series types here #1005 and not LineSeries ?
I have a chart where the series colours are inconsistent and change as the data changes / I hide series etc.

I have tried various hacky ways to try and force this or workaround but to no avail.

I just need a way to specify the colour for the series in the LineSeries props, then I can easily use a string -> colour hash or something to ensure consistency.

[williaster]

sorry for the delay, agree this could be a good addition. I don't have bandwidth right now but happy to review a PR if anyone is interested. #1005 should be good to model off of.

[alexandreabeh]

Hi @williaster, any updates on when a feature like this might be added? I have the same use case (creating an interactive legend to toggle lines on and off) which depends on being able to preserve the same color for a line that is hidden and then made visible again.

[alexandreabeh]

For anyone who comes this and has the same use case, I did find a workaround. In general I have:

A LineChart wrapper component that includes xychart and logic for rendering LineSeries

• optionally takes an array of colors, falls back to theme settings

A Legend that is similar to the LegendOrdinal in this example, where the LegendItem is a Checkbox component. The Legend component tracks which labels have been selected (checkbox enabled, showing in the line chart) and which color corresponds to that label.

  // error handling: no more labels allowed than there are colors, otherwise index out of bounds
  const initialSelectedCheckboxes = selectedLabels?.map((label, index) => [label, colors[index]]);

  const [selectedCheckboxes, setSelectedCheckboxes] =
    useState<string[][]>(initialSelectedCheckboxes);

  useEffect(() => {
    if (onCheckboxClick) {
      onCheckboxClick(selectedCheckboxes);
    }
  }, [selectedCheckboxes]);

Then for the onChange on the Checkbox, unchecking a checkbox filters out the selected value from the selectedCheckboxes 2D array, while checking a box adds to the array.

The higher order component containing both line chart and legend keeps track of

• which line series are being displayed
• the set of filtered colors that the line chart should display