Composite Chart

import { CompositeChartDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.CompositeChart);

Usage

CompositeChart allows using Line, Area, and Bar charts together in a single chart:

Legend

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.

Legend position

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.

Series labels

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

Points labels

To display labels on data points, set withPointLabels. This feature is supported only for Line and Area charts:

X and Y axis props

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:

Axis labels

Use xAxisLabel and yAxisLabel props to display axis labels:

X axis offset

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

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]:

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.

Rotate x-axis labels

To rotate x-axis labels, set xAxisProps.angle to the number of degrees to rotate:

Value formatter

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:

Chart 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.

Change chart color depending on 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. Example of a chart 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:

tsx

import { CompositeChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <CompositeChart
      h={300}
      data={data}
      dataKey="date"
      gridColor="gray.5"
      textColor="gray.9"
      series={[
        { name: 'Apples', color: 'indigo.6', type: 'line' },
        { name: 'Oranges', color: 'blue.6', type: 'bar' },
        { name: 'Tomatoes', color: 'teal.6', type: 'area' },
      ]}
    />
  );
}

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:

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.

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

Customize dots

Use dotProps to pass props down to recharts dot in regular state and activeDotProps to pass props down to recharts dot in active state (when cursor is over the current series).

Stroke width

Use strokeWidth prop to control the stroke width of all areas/lines:

Sync multiple charts

You can pass props down to recharts ComposedChart component with composedChartProps prop. For example, setting composedChartProps={{ syncId: 'any-id' }} will sync tooltip of multiple CompositeChart components with the same syncId prop.

Dashed lines

Set strokeDasharray property in series to change line style to dashed:

Reference lines

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