Chart style

Applies to every chart.

Palette

Theme

Appearance

Depth
Surface
Background

Reading & motion

Axis
Hover
Legend
Numbers
Loading
Empty
Using chart defaults

Docs

Install, API and guides

  • Getting started

Reference2

  • API reference
  • Motion & accessibility
API reference/Interaction & export

Dashboard selection and export

Selections you own, linked charts, range summaries and CSV.

  • selected
  • selectedCategoryId
  • createChartController
  • ChartRangeSummary

A card that pins a category can share that pin with the rest of your page. RadialChartCard, FunnelChartCard and HorizontalBarChartCard accept selected (a category name, or null) and onSelectedChange. Given selected, the card only asks: a click, tap or Escape calls onSelectedChange, and the pin moves when you pass the new value. Identity is the category name, so re-ranking or new values keep the pin. A selection naming a category that has left the data shows nothing pinned and asks you to clear it. Leave selected out and the card keeps its own pin.

A category Chart uses selectedCategoryId and onSelectedCategoryIdChange in the same way, and visibleSeries with onVisibleSeriesChange controls which series show. Hover always stays local.

Time and numeric charts link through sync on cards, or a shared controller from createChartController() on composed charts. Controller snapshots are read-only; call its methods to change inspection or ranges.

ChartRangeSummary is a sibling of ChartPlot inside a time or numeric Chart. It follows the focused range and shows total, average, low, high and observation availability. summarizeRange exposes inclusive range statistics separately; no-known-data totals are null and missing endpoints produce an unknown change.

toChartCsv(data, columns) returns CSV from explicit column accessors, preserving numeric negatives, blank nulls and ISO dates. It quotes multiline fields and protects text cells from spreadsheet formula interpretation. The helper has no download side effects.

TypeScript

<ChartRangeSummary series="revenue" />

const csv = toChartCsv(rows, [
  { header: 'Date', value: row => new Date(row.date) },
  { header: 'Revenue', value: row => row.revenue },
]);
PreviousFinanceNextRange brush