AreaChart default type renders independently
Use the AreaChart component without the type prop to render a regular area chart. In a regular area chart, each data series is plotted independently and does not interact with other series.
charts/area-chart
42 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
AreaChart type="stacked" for stacked areas
Set type="stacked" to render a stacked area chart. In this type of area 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.
AreaChart type="percent" for percent area chart
Set type="percent" to render a percent area chart. In this type of area chart, the y-axis scale is always normalized to 100%, making it easier to compare the contribution of each series in terms of percentages.
AreaChart type="stream" for streamgraph
Set type="stream" to render a streamgraph (also known as ThemeRiver). A streamgraph is a stacked area chart whose baseline flows around a central axis instead of being fixed to zero, producing the characteristic organic "river" shape. Since the baseline floats, the y-axis values are not meaningful to read off – the y-axis is hidden by default for type="stream". You can set withYAxis back to true if you need it.
AreaChart type="split" for split area chart
Set type="split" to render a split area chart. In this type of area chart, the fill color is split into two colors: one for positive values and one for negative values. Split area charts support only one data series.
AreaChart splitColors prop
Set the splitColors prop to an array of two colors to customize the fill color of a split area chart. The first color is used for positive values and the second color is used for negative values. The splitColors prop is ignored in other types of area charts.
AreaChart withLegend prop
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.
AreaChart legendProps for positioning
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.
AreaChart series label property
By default, the series name is used as a label. To change it, set the label property in the series object.
AreaChart curveType per series
You can set individual curve types for each line in the series array. If you do not set a curve type for a line, the series will fall back to curveType prop, or monotone if curveType is not set.
AreaChart connectNulls prop
Use the connectNulls prop to specify whether to connect a data point across null points. By default, connectNulls is true.
AreaChart withPointLabels prop
To display labels on data points, set withPointLabels.
AreaChart xAxisProps and yAxisProps
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.
AreaChart xAxisLabel and yAxisLabel props
Use xAxisLabel and yAxisLabel props to display axis labels.
AreaChart xAxisProps for x-axis offset
Use xAxisProps to set padding between the chart ends and the x-axis.
AreaChart yAxisProps to change Y axis domain
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 100, you can set the domain to [0, 100].
AreaChart withRightYAxis for right Y axis
To display an additional Y axis on the right side of the chart, set the withRightYAxis prop. You can pass props down to the recharts YAxis component with the rightYAxisProps prop and assign a label to the right Y axis with the rightYAxisLabel prop. Note that you need to bind data series to the right Y axis by setting yAxisId in the series object.
AreaChart xAxisProps.angle to rotate x-axis labels
To rotate x-axis labels, set xAxisProps.angle to the number of degrees to rotate.
AreaChart valueFormat prop
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.
AreaChart color prop with theme colors
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.
AreaChart color prop with CSS variables for color scheme
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.
AreaChart strokeDasharray prop
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.
AreaChart --chart-grid-color and --chart-text-color CSS variables
Use --chart-grid-color and --chart-text-color CSS variables to change colors of grid lines and text within the chart. With CSS modules, you can change colors depending on color scheme.
AreaChart gridColor and textColor props
If your application has only one color scheme, you can use the gridColor and textColor props instead of CSS variables.
AreaChart tooltipAnimationDuration prop
By default, tooltip animation is disabled. To enable it, set the tooltipAnimationDuration prop to a number of milliseconds to animate the tooltip position change.
AreaChart unit prop
Set the unit prop to render a unit label next to the y-axis ticks and tooltip values.
AreaChart tooltipProps.content for custom tooltip
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.
AreaChart withTooltip={false} to remove tooltip
To remove the tooltip, set withTooltip={false}. This also removes the cursor line and disables interactions with the chart.
AreaChart dotProps and activeDotProps
Use dotProps to pass props down to the recharts dot in regular state and activeDotProps to pass props down to the recharts dot in active state (when the cursor is over the current series).
AreaChart strokeWidth prop
Use the strokeWidth prop to control the stroke width of all areas.
AreaChart fillOpacity prop
Use the fillOpacity prop to control the fill opacity of all areas.
AreaChart areaChartProps for syncing multiple charts
You can pass props down to the recharts AreaChart component with the areaChartProps prop. For example, setting areaChartProps={{ syncId: 'any-id' }} will sync the tooltip of multiple AreaChart components with the same syncId prop.
AreaChart orientation="vertical" for vertical area chart
Set orientation="vertical" to render a vertical area chart.
AreaChart strokeDasharray property in series
Set the strokeDasharray property in series to change the line style to dashed.
AreaChart referenceLines prop
Use the referenceLines prop to render reference lines. Reference lines are always rendered behind the chart.
AreaChart referenceAreas prop
Use the referenceAreas prop to highlight a rectangular region of the chart. Each area is bounded by x1/x2 (horizontal) and y1/y2 (vertical) data values – omit one pair to span the full opposite axis, for example provide only x1/x2 to highlight a time range across the entire height of the chart. Set color to any theme color or CSS color and label to display text inside the area. Reference areas are rendered behind the chart series.
AreaChart referenceDots prop
Use the referenceDots prop to mark individual points on the chart – a peak, an event, a record value or an anomaly. Each dot is positioned by x and y data coordinates and supports r (radius), color (any theme color or CSS color) and label. Reference dots are rendered on top of the chart series.
AreaChart withBrush prop for range selector
Set the withBrush prop to display a brush (range selector) under the chart. Drag the brush handles (travellers) to zoom into a subset of the data – the chart updates to show only the selected range. The brush border and background are themed to match the chart grid and adapt to the color scheme. withBrush is false by default and is supported by AreaChart, BarChart, LineChart and CompositeChart components with horizontal orientation.
AreaChart brushProps for brush customization
Use the brushProps prop to pass props down to the underlying recharts Brush component. For example, you can set the initially selected range with startIndex/endIndex, change the brush height, or subscribe to range changes with onChange.
ChartBrush component for full brush control
For full control over the brush, render the ChartBrush component as a child of the chart instead of using the withBrush prop. ChartBrush accepts all recharts Brush props and applies Mantine theming – this is useful when you need a custom traveller or a panorama preview inside the brush.
ChartBrush component example
```tsx import { AreaChart, ChartBrush } from '@mantine/charts'; import { data } from './data'; function Demo() { return ( <AreaChart h={300} data={data} dataKey="date" series={[{ name: 'Apples', color: 'indigo.6' }]} > <ChartBrush dataKey="date" startIndex={0} endIndex={10} /> </AreaChart> ); } ``` This example shows how to render a ChartBrush component as a child of AreaChart with custom startIndex and endIndex.
AreaChart with single color scheme example
```tsx import { AreaChart } from '@mantine/charts'; import { data } from './data'; function Demo() { return ( <AreaChart h={300} data={data} dataKey="date" type="stacked" gridColor="gray.5" textColor="gray.9" series={[ { name: 'Apples', color: 'indigo.6' }, { name: 'Oranges', color: 'blue.6' }, { name: 'Tomatoes', color: 'teal.6' }, ]} /> ); } ``` This example shows how to use gridColor and textColor props directly instead of CSS variables when your application has only one color scheme.