apps/mantine.dev/src/pages/charts/line-chart.mdx
import { LineChartDemos } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';
export default Layout(MDX_DATA.LineChart);
Set type="gradient" to render a line chart with gradient fill. To customize
gradient colors, use the gradientStops prop. It accepts an array of objects with
offset and color properties. offset is a number between 0 and 100 that
defines the position of the color in the gradient; color is a reference to theme.colors
or any valid CSS color.
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 the connectNulls prop to specify whether to connect a data point across null
points. By default, connectNulls is true.
To display labels on data points, set withPointLabels:
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 100, you can set the domain to [0, 100]:
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.
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 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.
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 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 line 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 { LineChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<LineChart
h={300}
data={data}
dataKey="date"
gridColor="gray.5"
textColor="gray.9"
series={[
{ name: 'Apples', color: 'indigo.6' },
{ name: 'Oranges', color: 'blue.6' },
{ name: 'Tomatoes', 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.
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).
Use the strokeWidth prop to control the stroke width of all lines:
You can pass props down to the recharts LineChart
component with the lineChartProps prop. For example, setting lineChartProps={{ syncId: 'any-id' }}
will sync the tooltip of multiple LineChart components with the same syncId prop.
Set orientation="vertical" to render a vertical line chart:
Set the strokeDasharray property in series to change the line style to dashed:
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: