Chart

tooltip={{ indicator: "line" }}

tooltip={{ hideIndicator: true }}

tooltip={{ color: "var(--chart-5)" }}

tooltip={{ labelKey: "activities", indicator: "line" }}

tooltip={{ labelFormatter: (label) => fullDate(label) }}

tooltip={{ hideLabel: true }}

tooltip={{ hideLabel: true, hideIndicator: true, unit: "kcal" }}

const config = {
  running: { label: "Running", color: "var(--chart-1)", icon: "heart" },
  swimming: { label: "Swimming", color: "var(--chart-2)", icon: "waves" },
};

tooltip={{ hideLabel: true, cursor: false, defaultIndex: 1 }}

tooltip={{ hideLabel: true, unit: "kcal", footerLabel: "Total", footer: (row) => String(row.running + row.swimming) }}

const config: ChartConfig = {
  desktop: { label: "Desktop", theme: { light: "var(--chart-1)", dark: "var(--chart-7)" } },
  mobile: { label: "Mobile", color: "oklch(0.62 0.13 175)" }, // hex, hsl or oklch work too
};
// each key becomes --color-desktop, --color-mobile on the chart

<LineChart data={rows} {config} x="month" legend={{ position: "top" }} />
<LineChart data={rows} {config} x="month" legend={{ hideIcon: true }} />

/* the theme's series colors; a config entry with no color takes the next slot */
color: var(--chart-1) ... var(--chart-8)

const config = {
  desktop: { label: "Returning desktop visitors from Western Europe" },
  mobile: { label: "First-time mobile visitors from North America" },
};
<BarChart data={rows} {config} x="month" legend />

<BarChart ... tooltip={{ itemSorter: "value" }} />                        <!-- smallest value first -->
<LineChart ... hidden={["mobile"]} tooltip={{ includeHidden: true }} legend={{ toggle: true }} />
<LineChart ... tooltip={{ active: true, defaultIndex: 1 }} />             <!-- always shown -->
<BarChart ... tooltip={{ position: { x: 8, y: 8 } }} />                  <!-- a fixed corner -->
<BarChart ... tooltip={{ reverseDirection: { x: true } }} />             <!-- left of the pointer -->

<BarChart ... legend={{ verticalAlign: "top", align: "left", iconType: "circle" }} />
<!-- itemSorter: "name", "key", or a sort value per item: here the config order reversed -->
<BarChart ... legend={{ formatter: (name) => name.toUpperCase(), itemSorter: (item) => -keys.indexOf(item.key), iconType: "line" }} />

<BarChart ... legend={{ iconSize: 14 }} />
<BarChart ... legend={{ offset: 16 }} />                                   <!-- 16px further from the plot -->
<BarChart ... legend={{ position: "insideTopRight", offset: 8, layout: "vertical" }} />
<BarChart ... legend={{ position: { x: 48, y: 8 } }} />                      <!-- a point in the chart box -->

<!-- one syncId: a move in any chart shows the same month in the others -->
<BarChart data={rows} {config} x="month" syncId="months" />
<AreaChart data={rows} {config} x="month" syncId="months" />
<RadarChart data={rows} {config} x="month" syncId="months" />
<!-- syncMethod value: matched by the browser's name, not its position -->
<PieChart data={browsers} {config} value="visitors" name="browser" syncId="browsers" syncMethod="value" />
<RadialChart data={reversed} {config} value="visitors" name="browser" syncId="browsers" syncMethod="value" />

<Dialog title="Traffic">
  <Button slot="trigger">Open chart</Button>
  <BarChart data={rows} {config} x="month" />
</Dialog>
<!-- Escape on the focused chart hides its tooltip; the next Escape closes the dialog -->

<!-- the tooltip glides 600ms with a linear easing; the second moves at once -->
<BarChart data={rows} {config} x="month" tooltip={{ animationDuration: 600, animationEasing: "linear" }} />
<BarChart data={rows} {config} x="month" tooltip={{ isAnimationActive: false }} />

<BarChart data={rows} {config} x="month" showTable={state.table} />