The BarChart component. Loaded by the Chart renderer and displayed by passing type "bar".
| Name | Type | Description |
|---|---|---|
animationDuration | number | The duration of the reveal animation in milliseconds. |
barChartProps | object | The props to pass to the BarChart container (can also override the presets we use). Check Recharts docs for all available. |
barProps | object | The props to pass to each Bar (can also override the presets we use). Recharts event handlers are composed with the chart-level callback props rather than replaced. Check Recharts docs for all available. |
cartesianGridProps | object | The props to pass to the CartesianGrid (can also override the presets we use). Check Recharts docs for all available. |
checkboxProps | object | The props to pass to each Checkbox. Check our docs for all available. |
children | node | Any additional content to display below the chart. |
customAttributes | object | Custom attributes to apply to the chart wrapper. |
customClasses | string | | Custom classes to apply to the chart wrapper. |
customInterval | function | Custom function to calculate the x-axis tick interval. |
data | array | The data to display in the chart. Check Recharts docs for formats. |
gridColor | string | The color of the grid lines and the x and y axis. |
height | number | | The height of the chart. |
legendProps | object | The props to pass to the Legend (can also override the presets we use). Check Recharts docs for all available. |
normalized | boolean | Whether to render a normalized (100%) stacked chart. |
onBarClick | function | Callback fired when a bar is clicked. Receives { data, index, dataKey, event }. |
onMouseEnter | function | Callback fired when a bar is hovered. Receives { data, index, dataKey, event }. |
onMouseLeave | function | Callback fired when the mouse leaves a bar. Receives { data, index, dataKey, event }. |
onMouseDown | function | Callback fired when a bar is pressed. Receives { data, index, dataKey, event }. |
onMouseUp | function | Callback fired when a bar press ends. Receives { data, index, dataKey, event }. |
options | array | The options to display as checkboxes to toggle the visibility of each data set. Supports per-series color, hoverColor, stackId, name, legendType, hide, radius, activeBar (object or false), barLabel, and barProps (Recharts event handlers are composed with chart-level callbacks). |
showCheckboxes | boolean | Whether to show the checkboxes to toggle the visibility of each data set. |
showLegend | boolean | Whether to show the legend. |
stacked | boolean | Whether to stack bars or display them side by side. |
tooltipProps | object | The props to pass to the Tooltip (can also override the presets we use). Check Recharts docs for all available. |
tooltipShared | boolean | Whether the tooltip is shared across series at the same category. |
width | number | | The width of the chart. |
xAxisProps | object | The props to pass to the XAxis (can also override the presets we use). Check Recharts docs for all available. |
yAxisProps | object | The props to pass to the YAxis (can also override the presets we use). Check Recharts docs for all available. |
ref | object | The reference to the chart component. |
- Since
- 6.6.3
The BarChart component.
- Type:
- JSX.
Element |null
Methods
(inner) handleCheckboxChange(dataKey) → {void}
Toggles visibility of a data series via checkbox.
| Name | Type | Description |
|---|---|---|
dataKey | string | The data key to toggle. |
- Since
- 6.6.3
- Type:
- void
(inner) updateInterval() → {void}
Updates the x-axis tick interval based on viewport width.
- Since
- 6.6.3
- Type:
- void