Skip to content

Documentation / @ripl/charts / BarChartOptions

Interface: BarChartOptions<TData>

Defined in: charts/src/charts/bar.ts:101

Options for configuring a BarChart.

Extends

Type Parameters

Type ParameterDefault type
TDataunknown

Properties

PropertyTypeDescriptionOverridesInherited fromDefined in
animation?boolean | Partial<ChartAnimationOptions>Animation configuration, or a boolean toggling all transitions. See ChartAnimationOptions.-CartesianChartOptions.animationcharts/src/core/chart.ts:89
autoRender?booleanWhether the chart renders automatically on construction and after every Chart.update. Defaults to true.-CartesianChartOptions.autoRendercharts/src/core/chart.ts:83
axis?ChartAxisInput<TData>Axis configuration for the categorical and value axes.CartesianChartOptions.axis-charts/src/charts/bar.ts:119
borderRadius?numberCorner radius in pixels applied to each bar. Defaults to 2.--charts/src/charts/bar.ts:121
crosshair?ChartCrosshairInputCrosshair configuration, or a boolean toggle. See ChartCrosshairInput.-CartesianChartOptions.crosshaircharts/src/core/cartesian.ts:129
dataTData[]The dataset rendered by the chart.--charts/src/charts/bar.ts:103
format?ValueFormatInputFormat applied to bar values shown as text (tooltips and labels).--charts/src/charts/bar.ts:125
grid?ChartGridInputBackground grid configuration (true/false or detailed grid options).CartesianChartOptions.grid-charts/src/charts/bar.ts:113
keykeyof TData | ((item) => string)Accessor for each item's category key (the value plotted along the categorical axis).--charts/src/charts/bar.ts:107
labels?ChartDataLabelsInputShow value labels next to each bar. true uses the default anchor; a string sets the anchor side.--charts/src/charts/bar.ts:123
legend?ChartLegendInputLegend configuration (true/false, a position, or detailed legend options).CartesianChartOptions.legend-charts/src/charts/bar.ts:117
mode?BarChartModeWhether multiple series are grouped side by side (default) or stacked.--charts/src/charts/bar.ts:111
navigator?boolean | NavigatorInteractionsEnables pan/zoom (and optionally brush) navigation on the plot. true turns on wheel-zoom and click-drag pan; an object configures each interaction individually. The chart auto-creates a DOMNavigator on its context and rescales the axis domains as the view changes — no data rebuild. Access the underlying controller via chart.navigator for imperative framing (centerOn/fitBounds) or brush-and-link.-CartesianChartOptions.navigatorcharts/src/core/cartesian.ts:137
orientation?BarChartOrientationWhether bars run vertically (default) or horizontally.--charts/src/charts/bar.ts:109
padding?Partial<ChartPadding>Space reserved around the chart, per edge, in pixels.-CartesianChartOptions.paddingcharts/src/core/chart.ts:85
seriesBarChartSeriesOptions<TData>[]The series to draw from each data item.--charts/src/charts/bar.ts:105
title?string | Partial<ChartTitleOptions>Chart title as plain text, or a ChartTitleOptions object for full control.-CartesianChartOptions.titlecharts/src/core/chart.ts:87
tooltip?ChartTooltipInputHover tooltip configuration (true/false or detailed tooltip options).CartesianChartOptions.tooltip-charts/src/charts/bar.ts:115