{
  "name": "ChartLegend",
  "source": "src/components/Chart.tsx",
  "propsType": "ChartLegendProps",
  "description": "ChartLegend — which colour is which series.\n\nColour alone never identifies a series (SC 1.4.1), so any chart with more\nthan one series needs this, or direct labels on the lines. The swatch reads\nthe same `--chart-<n>` as the series itself, through `chartSeriesClass`, so\nthe two cannot drift apart.",
  "import": "import { ChartLegend } from 'ionbase-ui';",
  "status": "stable",
  "since": "0.74.0",
  "summary": "Which colour is which series, for a chart drawn with visx. The swatch reads the same token as the series.",
  "useWhen": [
    "a chart has more than one series",
    "a single-series chart sits beside others and its colour needs naming"
  ],
  "useInstead": [
    {
      "when": "the lines are few and there is room to label each at its end",
      "use": "direct labels in the SVG, with the series class on the text"
    },
    {
      "when": "the scale is a magnitude ramp (a heatmap), not categories",
      "use": "a Less-to-More row of .ion-chart__heat--0…5 cells"
    }
  ],
  "composition": {
    "note": "Items are listed in the order the series are drawn, with the same series numbers the chart uses. Place it above or below the plot inside the same .ion-chart figure.",
    "example": "<ChartLegend shape=\"line\" items={[{ label: 'Production', series: 1 }, { label: 'Staging', series: 2 }]} />"
  },
  "variants": {
    "shape": {
      "square": {
        "use": "the default — bars, areas and heatmap-like marks"
      },
      "line": {
        "use": "line charts, so the key looks like the mark it names"
      }
    }
  },
  "a11y": {
    "guarantees": [
      "a list, so a screen reader announces how many series there are",
      "swatches are aria-hidden; every series is named in text"
    ],
    "requires": [
      "series numbers matching the chart — the legend cannot see the chart"
    ]
  },
  "antiPatterns": [
    {
      "dont": "a multi-series chart with no legend and no direct labels",
      "why": "colour becomes the only way to tell series apart, which fails SC 1.4.1 and fails anyone who cannot tell blue from purple"
    },
    {
      "dont": "listing series in a different order from the chart",
      "why": "the reader matches legend to chart by position as much as by colour"
    }
  ],
  "stylesheet": "src/styles/chart.css",
  "tokens": [
    "--border-default",
    "--border-strong",
    "--border-stronger",
    "--border-subtle",
    "--border-width-default",
    "--chart-1",
    "--chart-2",
    "--chart-3",
    "--chart-4",
    "--chart-5",
    "--chart-6",
    "--chart-7",
    "--chart-8",
    "--chart-sequential-1",
    "--chart-sequential-2",
    "--chart-sequential-3",
    "--chart-sequential-4",
    "--chart-sequential-5",
    "--font-family-sans",
    "--font-weight-medium",
    "--font-weight-semibold",
    "--ion-chart-series",
    "--ion-shadow-shadow-lg",
    "--radius-2xs",
    "--radius-full",
    "--radius-md",
    "--spacing-12",
    "--spacing-16",
    "--spacing-4",
    "--spacing-6",
    "--spacing-8",
    "--surface-default",
    "--surface-raised",
    "--surface-sunken",
    "--text-default",
    "--text-secondary",
    "--text-tertiary",
    "--type-body-sm",
    "--type-body-sm-line-height",
    "--type-caption",
    "--type-caption-line-height"
  ],
  "props": {
    "items": {
      "type": "ChartLegendItem[]",
      "required": true,
      "origin": "own",
      "description": "One per series, in the order the series are drawn."
    },
    "shape": {
      "type": "ChartLegendShape | undefined",
      "required": false,
      "origin": "own",
      "description": "`square` for bars and areas, `line` for line charts.",
      "values": [
        "square",
        "line"
      ]
    }
  },
  "propCounts": {
    "own": 2,
    "aria": 0,
    "dom": 277,
    "other": 0
  }
}