Multi-series

Usage

<LiveChart
  data={[]}
  value={0}
  series={[
    {
      id: "a",
      label: "Team A",
      color: "#3b82f6",
      data: seriesA,
      value: valueA,
    },
    {
      id: "b",
      label: "Team B",
      color: "#ef4444",
      data: seriesB,
      value: valueB,
    },
  ]}
  onSeriesToggle={(id, visible) => console.log(id, visible)}
  seriesToggleCompact={false}
/>

When series is non-empty it overrides single-series data / value / color for drawing.

Toggle UI

• Chips appear automatically for 2+ series
• Click to hide/show a line
• You cannot hide the last visible series
• seriesToggleCompact densifies the chip row
• onSeriesToggle(id, visible) notifies your app (controlled analytics, URL state, etc.)

Colors

Provide color per series, or lean on SERIES_COLORS via resolveSeriesPalettes.

Each series gets its own tip/dot and palette (fill, glow) derived like single-series theming.