BarChart
Bar chart component with stacked and percent variants
Import
Source
Docs
Package
Usage
Use BarChart
component without type
prop to render a regular bar chart.
In a regular bar chart, each data series is plotted on its own and does
not interact with other series.
Stacked bar chart
Set type="stacked"
to render a stacked bar chart. In this type of bar chart
stacking is applied along the vertical axis, allowing you to see the overall trend
as well as the contribution of each individual series to the total.
Mixed stacked bar chart
You can control how series are stacked by setting stackId
property in series object:
Percent bar chart
Set type="percent"
to render a percent bar chart. In this type of bar chart
the y-axis scale is always normalized to 100%, making it easier to compare the
contribution of each series in terms of percentages.
Waterfall bar chart
Set type="waterfall"
to render a waterfall bar chart. This chart type illustrates how an
initial value is influenced by subsequent positive or negative values,
with each bar starting where the previous one ended.
Use the color
prop inside data to color each bar individually. Note that the series color gets overwritten for this specific bar.
Use the standalone
prop inside data to decouple the bar from the flow.
Legend
To display chart legend, set withLegend
prop. When one of the items in the legend
is hovered, the corresponding data series is highlighted in the chart.
Legend position
You can pass props down to recharts Legend
component with legendProps
prop. For example, setting legendProps={{ verticalAlign: 'bottom', height: 50 }}
will render the legend at the bottom of the chart and set its height to 50px.
Series labels
By default, series name
is used as a label. To change it, set label
property in series
object:
X and Y axis props
Use xAxisProps
and yAxisProps
to pass props down to recharts XAxis
and YAxis components. For example, these props
can be used to change orientation of axis:
Axis labels
Use xAxisLabel
and yAxisLabel
props to display axis labels:
X axis offset
Use xAxisProps
to set padding between the charts ends and the x-axis:
Y axis scale
Use yAxisProps
to change domain of the Y axis. For example, if you know that
your data will always be in the range of 0 to 150, you can set domain to [0, 150]
:
Value formatter
To format values in the tooltip and axis ticks, use valueFormat
prop. It accepts
a function that takes number value as an argument and returns formatted value:
Area color
You can reference colors from theme the same way as in
other components, for example, blue
, red.5
, orange.7
, etc. Any valid CSS
color value is also accepted.
Bar props
You can pass props down to recharts Bar
component with barProps
prop. barProps
accepts either an object with props
or a function that receives series data as an argument and returns an object with
props.
Minimum bar size
Use minBarSize
prop to set the minimum size of the bar in px:
Change bar color depending on color scheme
You can use CSS variables in color
property. To define a CSS variable that
changes depending on the color scheme, use light/dark mixins
or light-dark function. Example
of bar that is dark orange in light mode and lime in dark mode:
Stroke dash array
Set strokeDasharray
prop to control the stroke dash array of the grid and cursor
lines. The value represent the lengths of alternating dashes and gaps. For example,
strokeDasharray="10 5"
will render a dashed line with 10px dashes and 5px gaps.
Grid and text colors
Use --chart-grid-color
and --chart-text-color
to change colors of
grid lines and text within the chart. With CSS modules, you can change colors
depending on color scheme:
If your application has only one color scheme, you can use gridColor
and textColor
props instead of CSS variables:
Tooltip animation
By default, tooltip animation is disabled. To enable it, set tooltipAnimationDuration
prop to a number of milliseconds to animate the tooltip position change.
Units
Set unit
prop to render a unit label next to the y-axis ticks and tooltip values:
Custom tooltip
Use tooltipProps.content
to pass custom tooltip renderer to recharts Tooltip
component. Note that it is required to filter recharts payload with getFilteredChartTooltipPayload
function to remove empty values that are used for styling purposes only.
Remove tooltip
To remove tooltip, set withTooltip={false}
. It also removes the cursor line
and disables interactions with the chart.
Sync multiple BarCharts
You can pass props down to recharts BarChart
component with barChartProps
prop. For example, setting barChartProps={{ syncId: 'any-id' }}
will sync tooltip of multiple BarChart
components with the same syncId
prop.
Smartphones sales:
Laptops sales:
Vertical orientation
Set orientation="vertical"
to render a vertical bar chart:
Reference lines
Use referenceLines
prop to render reference lines. Reference lines are always
rendered behind the chart.
Bar value label
To display value above each bar, set withBarValueLabel
: