DEVELOPER REFERENCE · v4.0.0

BarChart API

Props, callbacks and methods. Select an underlined type to explore its fields, allowed values and callback arguments.

View charts and range selection examples →

BarChart16 props0 callbacks0 methods

Props16

BarChart props
Name	Type	Description
`barColor`Optional	`string \| ((datum: DistributionChartDatum, index: number) => string \| undefined) \| undefined`Inspect type	CSS color or per-bar rule. Return undefined to retain the theme color.
`height`Optional	`number \| undefined`	Rendered height. A numeric size uses pixels; string sizes follow the supported CSS height format.
`className`Optional	`string \| undefined`	Additional CSS classes applied to the component root.
`tooltip`Optional	`boolean \| undefined`	Enables hover/focus tooltips for chart or timeline values.
`data`Required	`readonly DistributionChartDatum[]`Inspect type	Data points rendered by the chart, in display order.
`ariaLabel`Required	`string`	Accessible name announced by assistive technology.
`showPoints`Optional	`boolean \| undefined`	Shows markers at chart data points.
`showLabels`Optional	`boolean \| undefined`	Optional category text; defaults to the tooltip title.
`showValues`Optional	`boolean \| undefined`	Shows formatted numeric values beside chart data points.
`showGrid`Optional	`boolean \| undefined`	Shows the chart grid lines.
`legend`Optional	`string \| undefined`	Legend text identifying the chart series.
`formatValue`Optional	`((value: number) => string) \| undefined`Inspect type	Formats the numeric value for display without changing its stored value.
`tooltipIndicator`Optional	`"none" \| "line" \| "dot" \| "dashed" \| undefined`	Style of the visual indicator used with chart tooltips.
`interpolation`Optional	`"step" \| "linear" \| undefined`	Connects line/area values with straight segments or stepped transitions.
`areaFill`Optional	`"solid" \| "gradient" \| undefined`	Uses a solid or gradient fill for the area chart.
`renderTooltip`Optional	`((datum: DistributionChartDatum, index: number) => ComponentChildren) \| undefined`Inspect type	Renders custom chart tooltip content for a data point and its index.

Events and callbacks0

No component-specific events or callbacks.

Methods0

No component-specific imperative methods. Use props and callbacks to control this component.