charts/areachart

33 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 component types

The AreaChart component supports four types: default (regular area chart where each data series is plotted independently), 'stacked' (stacking applied along vertical axis to show overall trend and contribution of each series), 'percent' (y-axis scale normalized to 100% for percentage comparison), and 'split' (fill color split into two colors for positive and negative values, supports only one data series).

AreaChart splitColors prop

The splitColors prop accepts 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 legend display and interaction

Set the withLegend prop to display the chart legend. When one of the items in the legend is hovered, the corresponding data series is highlighted in the chart. Use legendProps to pass props down to the recharts Legend component, for example legendProps={{ verticalAlign: 'bottom', height: 50 }} will render the legend at the bottom and set its height to 50px.

AreaChart series labels

By default, the series name is used as a label. To change it, set the label property in the series object.

AreaChart curve type 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 the curveType prop, or 'monotone' if curveType is not set.

AreaChart connectNulls prop default

The connectNulls prop specifies whether to connect a data point across null points. By default, connectNulls is true.

AreaChart point labels

To display labels on data points, set the withPointLabels prop.

AreaChart axis props

Use xAxisProps and yAxisProps to pass props down to the recharts XAxis and YAxis components. These props can be used to change the orientation of the axis.

AreaChart axis labels

Use xAxisLabel and yAxisLabel props to display axis labels.

AreaChart x-axis offset

Use xAxisProps to set padding between the chart ends and the x-axis.

AreaChart y-axis scale

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 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. You need to bind data series to the right Y axis by setting yAxisId in the series object.

AreaChart 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

You can reference colors from the 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 scheme-dependent colors

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 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 unit prop

Set the unit prop to render a unit label next to the y-axis ticks and tooltip values.

AreaChart custom tooltip

Use tooltipProps.content to pass a custom tooltip renderer to the recharts Tooltip component. 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 prop

To remove the tooltip, set withTooltip={false}. This also removes the cursor line and disables interactions with the chart.

AreaChart dot customization

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 sync multiple instances

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 vertical orientation

Set orientation='vertical' to render a vertical area chart.

AreaChart dashed area line

Set the strokeDasharray property in series to change the line style to dashed.

AreaChart reference lines

Use the referenceLines prop to render reference lines. Reference lines are always rendered behind the chart.

AreaChart reference area

Use the ReferenceArea component from recharts to display a reference area.

AreaChart withBrush prop

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 prop

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

Example showing how to use ChartBrush with custom configuration: ```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 demonstrates rendering a ChartBrush component as a child of AreaChart with a dataKey, startIndex, and endIndex.

AreaChart gridColor and textColor props example

Example showing how to use gridColor and textColor props: ```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 demonstrates using gridColor and textColor props to customize chart appearance for a single color scheme.

Give your agent this brain