Version v7.5.0 | Mantine

New DonutChart component:

New PieChart component:

DatePickerInput , MonthPickerInput and YearPickerInput now support valueFormatter prop.

valueFormatter is a more powerful alternative to valueFormat prop. It allows formatting value label with a custom function. The function is the same for all component types ( default , multiple and range ) – you need to perform additional checks inside the function to handle different types.

Example of using a custom formatter function with type="multiple" :

You can now force each month to have 6 weeks by setting consistentWeeks: true on DatesProvider . This is useful if you want to avoid layout shifts when month changes.

It is now possible to change series labels with label property in series object. This feature is supported in AreaChart , BarChart and LineChart components.

All @mantine/charts components now support valueFormatter prop, which allows formatting value that is displayed on the y axis and inside the tooltip.

New Title textWrap prop sets text-wrap CSS property. It controls how text inside an element is wrapped.

You can also set textWrap on theme :

If set on theme, textWrap is also applied to headings in Typography

All components now support mod prop, which allows adding data attributes to the root element:

New articles added to the help center :

Recommended articles