apps/mantine.dev/src/pages/charts/bar-chart.mdx
import { BarChartDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';
export default Layout(MDX_DATA.BarChart);
Use the BarChart component without the type prop to render a regular bar chart.
In a regular bar chart, each data series is plotted independently and does
not interact with other series.
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.
You can control how series are stacked by setting the stackId property in the series object:
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.
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 the data to color each bar individually. Note that the series color gets overwritten for this specific bar.
Use the standalone prop inside the data to decouple the bar from the flow.
You can use SVG patterns as bar fill. To do so, set the fill property in the series object to
a URL of the SVG pattern that is defined in the defs section of the chart children.
Example of using diagonal stripes and crosshatch patterns as bar fill:
<Demo data={BarChartDemos.stripes} />Use the getBarColor prop to assign color based on value. The getBarColor function is
called with two arguments: value and series object. It should return a color
string (theme color reference or any valid CSS color value).
Note that the color returned by getBarColor does not impact the colors of the legend
and tooltip.
To display the chart legend, set the withLegend prop. When one of the items in the legend
is hovered, the corresponding data series is highlighted in the chart.
You can pass props down to the recharts Legend
component with the 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.
By default, the series name is used as a label. To change it, set the label
property in the series object:
Use xAxisProps and yAxisProps to pass props down to the recharts XAxis
and YAxis components. For example, these props
can be used to change the orientation of the axis:
Use xAxisLabel and yAxisLabel props to display axis labels:
Use xAxisProps to set padding between the chart ends and the x-axis:
Use yAxisProps to change the 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 the domain to [0, 150]:
To format values in the tooltip and axis ticks, use the valueFormat prop. It accepts
a function that takes a number value as an argument and returns a formatted value:
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.
You can pass props down to the recharts Bar
component with the 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.
Use the minBarSize prop to set the minimum size of the bar in px:
You can use CSS variables in the color property. To define a CSS variable that
changes depending on the color scheme, use light/dark mixins
or the light-dark function. Example
of a bar that is dark orange in light mode and lime in dark mode:
Set the strokeDasharray prop to control the stroke dash array of the grid and cursor
lines. The value represents the lengths of alternating dashes and gaps. For example,
strokeDasharray="10 5" will render a dashed line with 10px dashes and 5px gaps.
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 the gridColor and textColor
props instead of CSS variables:
import { BarChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<BarChart
h={300}
data={data}
dataKey="date"
type="stacked"
gridColor="gray.5"
textColor="gray.9"
series={[
{ name: 'Smartphones', color: 'violet.6' },
{ name: 'Laptops', color: 'blue.6' },
{ name: 'Tablets', color: 'teal.6' },
]}
/>
);
}
By default, tooltip animation is disabled. To enable it, set the tooltipAnimationDuration
prop to a number of milliseconds to animate the tooltip position change.
Set the unit prop to render a unit label next to the y-axis ticks and tooltip values:
Use tooltipProps.content to pass a custom tooltip renderer to the recharts Tooltip
component. Note that it is required to filter the recharts payload with the getFilteredChartTooltipPayload
function to remove empty values that are used for styling purposes only.
To remove the tooltip, set withTooltip={false}. This also removes the cursor line
and disables interactions with the chart.
You can pass props down to the recharts BarChart
component with the barChartProps prop. For example, setting barChartProps={{ syncId: 'any-id' }}
will sync the tooltip of multiple BarChart components with the same syncId prop.
Set orientation="vertical" to render a vertical bar chart:
Use the referenceLines prop to render reference lines. Reference lines are always
rendered behind the chart.
Use the ReferenceArea component from recharts to display a reference area:
To display value above each bar, set withBarValueLabel:
You can pass props down to the recharts LabelList
component with the valueLabelProps prop. valueLabelProps accepts either an object with props
or a function that receives series data as an argument and returns an object with
props.
Set the withBrush prop to display a brush (range selector) under the chart. Drag the
brush handles to zoom into a subset of the data. Use the brushProps prop to pass props
down to the underlying recharts Brush component,
or render the ChartBrush component as a child for full control.