View changelog with demos on mantine.dev website
Container queries support in Grid
You can now use container queries
in Grid component. With container queries, all responsive values
are adjusted based on the container width, not the viewport width.
Example of using container queries. To see how the grid changes, resize the root element
of the demo with the resize handle located at the bottom right corner of the demo:
import { Grid } from '@mantine/core';
function Demo() {
return (
// Wrapper div is added for demonstration purposes only,
// it is not required in real projects
<div style={{ resize: 'horizontal', overflow: 'hidden', maxWidth: '100%' }}>
<Grid
type="container"
breakpoints={{ xs: '100px', sm: '200px', md: '300px', lg: '400px', xl: '500px' }}
>
<Col span={{ base: 12, md: 6, lg: 3 }}>1</Col>
<Col span={{ base: 12, md: 6, lg: 3 }}>2</Col>
<Col span={{ base: 12, md: 6, lg: 3 }}>3</Col>
<Col span={{ base: 12, md: 6, lg: 3 }}>4</Col>
</Grid>
</div>
);
}CompositeChart component
New CompositeChart component allows using Line, Area and Bar charts together in a single chart:
import { CompositeChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<CompositeChart
h={300}
data={data}
dataKey="date"
unit="$"
maxBarWidth={30}
series={[
{ name: 'Tomatoes', color: 'rgba(18, 120, 255, 0.2)', type: 'bar' },
{ name: 'Apples', color: 'red.8', type: 'line' },
{ name: 'Oranges', color: 'yellow.8', type: 'area' },
]}
/>
);
}Points labels
LineChart and AreaChart now support withPointLabels prop to display labels on data points:
import { LineChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<LineChart
h={300}
data={data}
dataKey="date"
withLegend
withPointLabels
series={[
{ name: 'Apples', color: 'indigo.6' },
{ name: 'Oranges', color: 'blue.6' },
]}
/>
);
}ScatterChart also supports point labels, but also allows to control which axis should display labels with pointLabels prop:
import { ScatterChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<ScatterChart
h={350}
data={data}
dataKey={{ x: 'age', y: 'BMI' }}
xAxisLabel="Age"
yAxisLabel="BMI"
pointLabels="x"
/>
);
}BarChart: Mixed stacks
You can now control how BarChart series are stacked by setting stackId property in series object:
import { BarChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<BarChart
h={300}
data={data}
dataKey="month"
series={[
{ name: 'Smartphones', color: 'violet.6', stackId: 'a' },
{ name: 'Laptops', color: 'blue.6', stackId: 'b' },
{ name: 'Tablets', color: 'teal.6', stackId: 'b' },
]}
/>
);
}BarChart: Minimum bar size
BarChart now supports minBarSize prop to set the minimum size of the bar in px:
import { BarChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return (
<BarChart
h={300}
data={data}
dataKey="month"
withLegend
series={[
{ name: 'Smartphones', color: 'violet.6' },
{ name: 'Laptops', color: 'blue.6' },
{ name: 'Tablets', color: 'teal.6' },
]}
/>
);
}Help Center updates
- New How to integrate custom input with use-form hook? question
- New Can I remove MultiSelect placeholder when the component has selected values? question
- New How can I load fonts in Remix? question
- New My styles are overridden by Mantine components styles, what should I do? question
- New Why I cannot use one polymorphic component in component prop of another polymorphic component? question
- New Can I use an array of strings as a list in use-form? question