mantine.charts — io.github.unisoma/mantine-ui-wrapper 9.6.0.0-SNAPSHOT

Mantine @mantine/charts 9.6.0 wrappers (generated).

area-chart clj/s

AreaChart — Area chart component with stacked, percent and split variants

https://mantine.dev/charts/area-chart

Props (docgen 9.6.0):

• accessibilityLayer boolean — Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, true by default
• activeDotProps MantineChartDotProps — Props passed down to all active dots. Ignored if withDots={false} is set.
• areaChartProps (CartesianChartProps<unknown> & { ref?: Ref<SVGSVGElement>; }) | undefined — Props passed down to recharts AreaChart component
• areaProps ((series: AreaChartSeries) => Partial<Omit<Props<any, any>, "ref">>) | Partial<Omit<Props<any, any>, "ref">> — Props passed down to recharts Area component
• brushProps RechartsProps — Props passed down to the Brush component
• children React.ReactNode — Additional components that are rendered inside recharts AreaChart component
• connectNulls boolean (default true) — If set, points with null values are connected
• curveType AreaChartCurveType (default 'monotone') — Type of the curve
• data ChartData (required) — Data used to display chart
• dataKey string (required) — Key of the data object for x-axis values
• dotProps MantineChartDotProps — Props passed down to all dots. Ignored if withDots={false} is set.
• fillOpacity number (default 0.2) — Controls fill opacity of all areas
• gridAxis "none" | "x" | "y" | "xy" — Specifies which lines should be displayed in the grid, 'x' by default
• gridColor MantineColor — Color of the grid and cursor lines, by default depends on color scheme
• gridProps RechartsProps — Props passed down to the CartesianGrid component
• legendProps RechartsProps — Props passed down to the Legend component
• orientation "horizontal" | "vertical" — Chart orientation, 'horizontal' by default
• referenceAreas ChartReferenceAreaProps[] — Reference areas that should be displayed on the chart
• referenceDots ChartReferenceDotProps[] — Reference dots that should be displayed on the chart
• referenceLines ChartReferenceLineProps[] — Reference lines that should be displayed on the chart
• rightYAxisLabel string — A label to display next to the right y-axis
• rightYAxisProps RechartsProps — Props passed down to the YAxis recharts component rendered on the right side
• series AreaChartSeries[] (required) — An array of objects with name and color keys. Determines which data should be consumed from the data array.
• splitColors [MantineColor, MantineColor] (default ['green.7', 'red.7']) — A tuple of colors used when type="split" is set, ignored in all other cases. A tuple may include theme colors reference or any valid CSS colors
• splitOffset number — Offset for the split gradient. By default, value is inferred from data and series if possible. Must be generated from the data array with getSplitOffset function.
• strokeDasharray string | number — Dash array for the grid lines and cursor, '5 5' by default
• strokeWidth number (default 2) — Stroke width for the chart areas
• textColor MantineColor — Color of the text displayed inside the chart, 'dimmed' by default
• tickLine "none" | "x" | "y" | "xy" — Specifies which axis should have tick line, 'y' by default
• tooltipAnimationDuration number — Tooltip position animation duration in ms, 0 by default
• tooltipProps RechartsProps — Props passed down to the Tooltip component
• type AreaChartType (default 'default') — Controls how chart areas are positioned relative to each other. Set to 'stream' to render a streamgraph.
• unit string — Unit displayed next to each tick in y-axis
• valueFormatter (value: number) => string — A function to format values on Y axis and inside the tooltip
• withBrush boolean — Determines whether a brush (range selector) should be displayed under the chart, false by default
• withDots boolean (default true) — Determines whether dots should be displayed
• withGradient boolean (default false) — Determines whether the chart area should be represented with a gradient instead of the solid color
• withLegend boolean — Determines whether chart legend should be displayed, false by default
• withPointLabels boolean (default false) — If set, each point has an associated label
• withRightYAxis boolean — Determines whether additional y-axis should be displayed on the right side of the chart, false by default
• withTooltip boolean — Determines whether chart tooltip should be displayed, true by default
• withXAxis boolean (default true) — Determines whether x-axis should be displayed. Defaults to false for type="stream" with orientation="vertical" – the floating baseline makes the values not meaningful to read off.
• withYAxis boolean (default true) — Determines whether y-axis should be displayed. Defaults to false for type="stream" with orientation="horizontal" – the floating baseline makes the values not meaningful to read off.
• xAxisLabel string — A label to display below the x-axis
• xAxisProps RechartsProps — Props passed down to the XAxis recharts component
• yAxisLabel string — A label to display next to the y-axis
• yAxisProps RechartsProps — Props passed down to the YAxis recharts component

Optional leading props map; remaining args are children.

bar-chart clj/s

BarChart — Bar chart component with stacked and percent variants

https://mantine.dev/charts/bar-chart

Props (docgen 9.6.0):

• accessibilityLayer boolean — Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, true by default
• barChartProps (CartesianChartProps<unknown> & { ref?: Ref<SVGSVGElement>; }) | undefined — Props passed down to recharts BarChart component
• barLabelColor MantineColor — Controls color of the bar label, by default the value is determined by the chart orientation
• barProps ((series: BarChartSeries) => Partial<Omit<Props, "ref">>) | Partial<Omit<Props, "ref">> — Props passed down to recharts Bar component
• brushProps RechartsProps — Props passed down to the Brush component
• children React.ReactNode — Additional components that are rendered inside recharts BarChart component
• cursorFill MantineColor — Fill of hovered bar section, by default value is based on color scheme
• data Record<string, any>[] (required) — Data used to display chart.
• dataKey string (required) — Key of the data object for x-axis values
• fillOpacity number (default 1) — Controls fill opacity of all bars
• getBarColor (value: number, series: BarChartSeries) => DefaultMantineColor — A function to assign dynamic bar color based on its value
• gridAxis "none" | "x" | "y" | "xy" — Specifies which lines should be displayed in the grid, 'x' by default
• gridColor MantineColor — Color of the grid and cursor lines, by default depends on color scheme
• gridProps RechartsProps — Props passed down to the CartesianGrid component
• legendProps RechartsProps — Props passed down to the Legend component
• maxBarWidth number — Maximum bar width in px
• minBarSize number (default 0) — Sets minimum height of the bar in px
• orientation "horizontal" | "vertical" — Chart orientation, 'horizontal' by default
• referenceAreas ChartReferenceAreaProps[] — Reference areas that should be displayed on the chart
• referenceDots ChartReferenceDotProps[] — Reference dots that should be displayed on the chart
• referenceLines ChartReferenceLineProps[] — Reference lines that should be displayed on the chart
• rightYAxisLabel string — A label to display next to the right y-axis
• rightYAxisProps RechartsProps — Props passed down to the YAxis recharts component rendered on the right side
• series BarChartSeries[] (required) — An array of objects with name and color keys. Determines which data should be consumed from the data array.
• strokeDasharray string | number — Dash array for the grid lines and cursor, '5 5' by default
• textColor MantineColor — Color of the text displayed inside the chart, 'dimmed' by default
• tickLine "none" | "x" | "y" | "xy" — Specifies which axis should have tick line, 'y' by default
• tooltipAnimationDuration number — Tooltip position animation duration in ms, 0 by default
• tooltipProps RechartsProps — Props passed down to the Tooltip component
• type BarChartType (default 'default') — Controls how bars are positioned relative to each other
• unit string — Unit displayed next to each tick in y-axis
• valueFormatter (value: number) => string — A function to format values on Y axis and inside the tooltip
• valueLabelProps ((series: BarChartSeries) => Partial<Omit<Props, "ref">>) | Partial<Props> — Props passed down to recharts LabelList component
• withBarValueLabel boolean (default false) — Determines whether a label with bar value should be displayed on top of each bar, incompatible with type="stacked" and type="percent"
• withBrush boolean — Determines whether a brush (range selector) should be displayed under the chart, false by default
• withLegend boolean — Determines whether chart legend should be displayed, false by default
• withRightYAxis boolean — Determines whether additional y-axis should be displayed on the right side of the chart, false by default
• withTooltip boolean — Determines whether chart tooltip should be displayed, true by default
• withXAxis boolean — Determines whether x-axis should be displayed, true by default
• withYAxis boolean — Determines whether y-axis should be displayed, true by default
• xAxisLabel string — A label to display below the x-axis
• xAxisProps RechartsProps — Props passed down to the XAxis recharts component
• yAxisLabel string — A label to display next to the y-axis
• yAxisProps RechartsProps — Props passed down to the YAxis recharts component

Optional leading props map; remaining args are children.

bars-list clj/s

BarsList — Display a list of bars with names and values

https://mantine.dev/charts/bars-list

Props (docgen 9.6.0):

• autoContrast boolean — If set, adjusts text color based on background color
• barColor MantineColor — Default bar background color, used when item does not have color specified
• barGap MantineSpacing (default 5) — Controls gap between bars
• barHeight string | number (default 32) — Bar height
• barTextColor MantineColor — Bar text color, overrides autoContrast
• barsLabel string — Label displayed above the bars column
• data BarsListBarData[] (required) — Data for bars
• getBarProps (data: BarsListBarData) => DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> — Function to pass props down to the bar depending on the bar data payload
• minBarSize string | number (default 100) — Minimum bar width
• renderBar (data: BarsListBarData, defaultBar: ReactNode) => ReactNode — Function to completely customize bar rendering
• valueFormatter (value: number) => string — Function to format value display
• valueLabel string — Label displayed above the values column

Optional leading props map; remaining args are children.

bubble-chart clj/s

BubbleChart — Bubble chart component

https://mantine.dev/charts/bubble-chart

Props (docgen 9.6.0):

• accessibilityLayer boolean — Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, true by default
• color MantineColor (default blue.6) — Color of the chart items. Key of theme.colors or any valid CSS color.
• data Record<string, any>[] (required) — Chart data
• dataKey BubbleChartDataKey (required) — Data keys for x, y and z axis
• gridColor MantineColor — Color of the grid and cursor lines, by default depends on color scheme
• label string — Chart label displayed next to the x axis
• range [number, number] (required) — Z axis range
• scatterProps Partial<Omit<Props, "ref">> — Props passed down to the Scatter component
• textColor MantineColor (default 'dimmed') — Color of the text displayed inside the chart
• tooltipProps RechartsProps — Props passed down to the Tooltip component
• valueFormatter (value: number) => string — Function to format z axis values
• withTooltip boolean (default true) — Determines whether the tooltip should be displayed
• xAxisProps RechartsProps — Props passed down to the XAxis recharts component
• yAxisProps RechartsProps — Props passed down to the YAxis recharts component
• zAxisProps Omit<Props<any, any>, "ref"> — Props passed down to the ZAxis recharts component

Optional leading props map; remaining args are children.

bullet-chart clj/s

BulletChart — Compact KPI chart with value, target, and qualitative ranges

https://mantine.dev/charts/bullet-chart

Props (docgen 9.6.0):

• barColor MantineColor (default 'white') — Color of the actual value bar,
• barSize string | number (default 16) — Height of the actual value bar,
• getTooltipLabel ((data: { value: number; target?: number; }) => ReactNode) | undefined — Custom tooltip content
• label React.ReactNode — Label displayed next to the chart
• orientation "horizontal" | "vertical" (default 'horizontal') — Orientation,
• ranges BulletChartRange[] (required) — Qualitative ranges displayed as background bands
• size string | number (default 32) — Height of the chart track area (ranges),
• target number — Target value, displayed as a marker line
• targetColor MantineColor (default 'dark' for light, 'white' for dark) — Color of the target marker,
• targetRatio number (default 0.7) — Target marker size relative to chart size,
• targetSize string | number (default 2) — Target marker thickness,
• value number (required) — Current actual value
• valueFormatter (value: number) => string — Value formatter for tooltip/display and labels
• withTooltip boolean (default false) — Whether to show tooltip on hover,

Optional leading props map; remaining args are children.

candlestick-chart clj/s

CandlestickChart — Financial OHLC candlestick chart

https://mantine.dev/charts/candlestick-chart

Props (docgen 9.6.0):

• accessibilityLayer boolean — Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, true by default
• candleStrokeWidth number (default 1) — Stroke width of the candle wick and body outline
• children React.ReactNode — Additional components that are rendered inside recharts ComposedChart component
• composedChartProps (CartesianChartProps<unknown> & { ref?: Ref<SVGSVGElement>; }) | undefined — Props passed down to recharts ComposedChart component
• data Record<string, any>[] (required) — Data used to display chart
• dataKey string (required) — Key of the data object for x-axis values
• dataKeys CandlestickChartDataKeys (default { open: 'open', high: 'high', low: 'low', close: 'close' }) — Keys of the data object used to read open, high, low and close values
• downColor MantineColor (default 'red.6') — Color of candles with close < open, key of theme.colors or any valid CSS color
• gridAxis "none" | "x" | "y" | "xy" — Specifies which lines should be displayed in the grid, 'x' by default
• gridColor MantineColor — Color of the grid and cursor lines, by default depends on color scheme
• gridProps RechartsProps — Props passed down to the CartesianGrid component
• labels Partial<CandlestickChartLabels> (default { open: 'Open', high: 'High', low: 'Low', close: 'Close' }) — Labels of open, high, low and close values displayed in the tooltip
• maxCandleWidth number — Maximum candle width in px
• referenceAreas ChartReferenceAreaProps[] — Reference areas that should be displayed on the chart
• referenceDots ChartReferenceDotProps[] — Reference dots that should be displayed on the chart
• referenceLines ChartReferenceLineProps[] — Reference lines that should be displayed on the chart
• strokeDasharray string | number — Dash array for the grid lines and cursor, '5 5' by default
• textColor MantineColor — Color of the text displayed inside the chart, 'dimmed' by default
• tickLine "none" | "x" | "y" | "xy" — Specifies which axis should have tick line, 'y' by default
• tooltipAnimationDuration number — Tooltip position animation duration in ms, 0 by default
• tooltipProps RechartsProps — Props passed down to the Tooltip component
• unit string — Unit displayed next to each tick in y-axis
• upColor MantineColor (default 'teal.6') — Color of candles with close >= open, key of theme.colors or any valid CSS color
• valueFormatter (value: number) => string — A function to format values on Y axis and inside the tooltip
• withTooltip boolean — Determines whether chart tooltip should be displayed, true by default
• withXAxis boolean — Determines whether x-axis should be displayed, true by default
• withYAxis boolean — Determines whether y-axis should be displayed, true by default
• xAxisLabel string — A label to display below the x-axis
• xAxisProps RechartsProps — Props passed down to the XAxis recharts component
• yAxisLabel string — A label to display next to the y-axis
• yAxisProps RechartsProps — Props passed down to the YAxis recharts component

Optional leading props map; remaining args are children.

chart-brush clj/s

ChartBrush

Optional leading props map; remaining args are children.

chart-legend clj/s

ChartLegend

Props (docgen 9.6.0):

• centered boolean (default false) — Determines whether the legend should be centered
• legendPosition "bottom" | "top" | "middle" (required) — Position of the legend relative to the chart, used to apply margin on the corresponding side
• onHighlight (area: string | number | null) => void (required) — Function called when mouse enters/leaves one of the legend items
• payload readonly Record<string, any>[] (required) — Chart data provided by recharts
• series ChartSeries[] — Data used for labels, only applicable for area charts: AreaChart, LineChart, BarChart
• showColor boolean (default true) — Determines whether color swatch should be shown next to the label

Optional leading props map; remaining args are children.

chart-tooltip clj/s

ChartTooltip

Props (docgen 9.6.0):

• label React.ReactNode — Main tooltip label
• payload Record<string, any>[] | readonly Record<string, any>[] (required) — Chart data provided by recharts
• segmentId string | number — Segment to display data for, identified by its index in the data array (preferred, isolates duplicate names) or by its name. Only applicable when type="radial". If not set, all data is rendered.
• series ChartSeries[] — Chart series data, applicable only for area type
• showColor boolean (default true) — Determines whether the color swatch should be visible
• type "area" | "radial" | "scatter" (default 'area') — Tooltip type that determines the content and styles, area for LineChart, AreaChart and BarChart, radial for DonutChart and PieChart
• unit string — Data units, provided by parent component
• valueFormatter (value: number) => ReactNode — A function to format values

Optional leading props map; remaining args are children.

composite-chart clj/s

CompositeChart — Composed chart with support for Area, Bar and Line charts

https://mantine.dev/charts/composite-chart

Props (docgen 9.6.0):

• accessibilityLayer boolean — Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, true by default
• activeDotProps MantineChartDotProps — Props passed down to all active dots. Ignored if withDots={false} is set.
• areaProps Partial<Omit<Props<any, any>, "ref">> | ((series: CompositeChartSeries) => Partial<Omit<Props<any, any>, "ref">>) — Props passed down to recharts Area component
• barProps Partial<Omit<Props, "ref">> | ((series: CompositeChartSeries) => Partial<Omit<Props, "ref">>) — Props passed down to recharts Bar component
• brushProps RechartsProps — Props passed down to the Brush component
• children React.ReactNode — Additional components that are rendered inside recharts AreaChart component
• composedChartProps (CartesianChartProps<unknown> & { ref?: Ref<SVGSVGElement>; }) | undefined — Props passed down to recharts AreaChart component
• connectNulls boolean (default true) — Determines whether points with null values should be connected
• curveType CompositeChartCurveType (default 'monotone') — Type of the curve
• data Record<string, any>[] (required) — Data used to display chart
• dataKey string (required) — Key of the data object for x-axis values
• dotProps MantineChartDotProps — Props passed down to all dots. Ignored if withDots={false} is set.
• gridAxis "none" | "x" | "y" | "xy" — Specifies which lines should be displayed in the grid, 'x' by default
• gridColor MantineColor — Color of the grid and cursor lines, by default depends on color scheme
• gridProps RechartsProps — Props passed down to the CartesianGrid component
• legendProps RechartsProps — Props passed down to the Legend component
• lineProps ((series: CompositeChartSeries) => Partial<Omit<Props, "ref">>) | Partial<Omit<Props, "ref">> — Props passed down to recharts Line component
• maxBarWidth number — Maximum bar width in px
• minBarSize number (default 0) — Sets minimum height of the bar in px
• referenceAreas ChartReferenceAreaProps[] — Reference areas that should be displayed on the chart
• referenceDots ChartReferenceDotProps[] — Reference dots that should be displayed on the chart
• referenceLines ChartReferenceLineProps[] — Reference lines that should be displayed on the chart
• rightYAxisLabel string — A label to display next to the right y-axis
• rightYAxisProps RechartsProps — Props passed down to the YAxis recharts component rendered on the right side
• series CompositeChartSeries[] (required) — An array of objects with name and color keys. Determines which data should be consumed from the data array.
• strokeDasharray string | number — Dash array for the grid lines and cursor, '5 5' by default
• strokeWidth number (default 2) — Stroke width for the chart lines
• textColor MantineColor — Color of the text displayed inside the chart, 'dimmed' by default
• tickLine "none" | "x" | "y" | "xy" — Specifies which axis should have tick line, 'y' by default
• tooltipAnimationDuration number — Tooltip position animation duration in ms, 0 by default
• tooltipProps RechartsProps — Props passed down to the Tooltip component
• unit string — Unit displayed next to each tick in y-axis
• valueFormatter (value: number) => string — A function to format values on Y axis and inside the tooltip
• withBarValueLabel boolean (default false) — Determines whether a label with bar value should be displayed on top of each bar
• withBrush boolean — Determines whether a brush (range selector) should be displayed under the chart, false by default
• withDots boolean (default true) — Determines whether dots should be displayed
• withLegend boolean — Determines whether chart legend should be displayed, false by default
• withPointLabels boolean (default false) — Determines whether each point should have associated label
• withRightYAxis boolean — Determines whether additional y-axis should be displayed on the right side of the chart, false by default
• withTooltip boolean — Determines whether chart tooltip should be displayed, true by default
• withXAxis boolean — Determines whether x-axis should be displayed, true by default
• withYAxis boolean — Determines whether y-axis should be displayed, true by default
• xAxisLabel string — A label to display below the x-axis
• xAxisProps RechartsProps — Props passed down to the XAxis recharts component
• yAxisLabel string — A label to display next to the y-axis
• yAxisProps RechartsProps — Props passed down to the YAxis recharts component

Optional leading props map; remaining args are children.

donut-chart clj/s

DonutChart — Donut chart component

https://mantine.dev/charts/donut-chart

Props (docgen 9.6.0):

• accessibilityLayer boolean — Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, true by default
• cellProps ((series: DonutChartCell) => Partial<Omit<SVGProps<SVGElement>, "ref">>) | Partial<Omit<SVGProps<SVGElement>, "ref">> — Props passed down to each segment of the chart
• chartLabel string | number — Chart label, displayed in the center of the chart
• children React.ReactNode — Additional elements rendered inside PieChart component
• data DonutChartCell[] (required) — Data used to render chart
• endAngle number (default 360) — Controls angle at which charts ends. Set to 0 to render the chart as semicircle.
• labelColor MantineColor — Controls text color of all labels, by default depends on color scheme
• labelsType "value" | "name" | "percent" — Type of labels to display, 'value' by default
• legendProps RechartsProps — Props passed down to recharts Legend component
• paddingAngle number (default 0) — Controls padding between segments
• pieChartProps (PolarChartProps<unknown> & { ref?: Ref<SVGSVGElement>; }) | undefined — Props passed down to recharts PieChart component
• pieProps Partial<Omit<Props, "ref">> — Props passed down to recharts Pie component
• size number (default 80) — Controls chart width and height, height is increased by 40 if withLabels prop is set. Cannot be less than thickness.
• startAngle number (default 0) — Controls angle at which chart starts. Set to 180 to render the chart as semicircle.
• strokeColor MantineColor — Controls color of the segments stroke, by default depends on color scheme
• strokeWidth number (default 1) — Controls width of segments stroke
• thickness number (default 20) — Controls thickness of the chart segments
• tooltipAnimationDuration number (default 0) — Tooltip animation duration in ms
• tooltipDataSource "all" | "segment" (default 'all') — Determines which data is displayed in the tooltip. 'all' – display all values, 'segment' – display only hovered segment.
• tooltipProps RechartsProps — Props passed down to Tooltip recharts component
• valueFormatter (value: number) => string — A function to format values inside the tooltip
• withLabels boolean (default false) — Determines whether each segment should have associated label
• withLabelsLine boolean (default true) — Determines whether segments labels should have lines that connect the segment with the label
• withLegend boolean (default false) — Determines whether the legend should be displayed
• withTooltip boolean (default true) — Determines whether the tooltip should be displayed when one of the section is hovered

Optional leading props map; remaining args are children.

funnel-chart clj/s

FunnelChart — Funnel chart component

https://mantine.dev/charts/funnel-chart

Props (docgen 9.6.0):

• accessibilityLayer boolean — Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, true by default
• children React.ReactNode — Additional elements rendered inside FunnelChart component
• data FunnelChartCell[] (required) — Data used to render chart
• funnelChartProps (CartesianChartProps<unknown> & { ref?: Ref<SVGSVGElement>; }) | undefined — Props passed down to recharts FunnelChart component
• funnelProps Partial<Omit<Props, "ref">> — Props passed down to recharts Pie component
• labelColor MantineColor (default 'white') — Controls text color of all labels
• labelsPosition "left" | "right" | "inside" (default 'right') — Controls labels position relative to the segment
• legendProps RechartsProps — Props passed down to recharts Legend component
• size number (default 300) — Controls chart width and height
• strokeColor MantineColor — Controls color of the segments stroke, by default depends on color scheme
• strokeWidth number (default 1) — Controls width of segments stroke
• tooltipAnimationDuration number (default 0) — Tooltip animation duration in ms
• tooltipDataSource "all" | "segment" (default 'all') — Determines which data is displayed in the tooltip. 'all' – display all values, 'segment' – display only hovered segment.
• tooltipProps RechartsProps — Props passed down to Tooltip recharts component
• valueFormatter (value: number) => string — A function to format values inside the tooltip and labels
• withLabels boolean (default false) — Determines whether each segment should have associated label
• withLegend boolean (default false) — Determines whether the legend should be displayed
• withTooltip boolean (default true) — Determines whether the tooltip should be displayed when a section is hovered

Optional leading props map; remaining args are children.

gauge-chart clj/s

GaugeChart — Radial gauge chart for KPI and status display

https://mantine.dev/charts/gauge-chart

Props (docgen 9.6.0):

• endAngle number (default 120) — End angle in degrees,
• filledColor MantineColor — Color of the filled arc when sections are not provided
• label React.ReactNode — Label displayed in the center of the gauge
• max number (default 100) — Maximum value of the gauge,
• min number (default 0) — Minimum value of the gauge,
• roundCaps boolean (default false) — Whether to round arc endpoints. Not applied to sections – rounded caps of adjacent sections would overlap each other.
• sections GaugeChartSection[] — Threshold sections of the gauge arc, each section is filled from the previous section upper bound to its own value. If set, the arc is not filled based on value.
• size number (default 200) — Chart size (width and height),
• startAngle number (default -120) — Start angle in degrees,
• target number — Value marked on the arc with a line marker, use to display a goal or the current value of a gauge with sections
• targetColor MantineColor — Color of the target marker
• targetSize number (default 2) — Thickness of the target marker,
• thickness number (default 12) — Arc thickness in px,
• trackColor MantineColor — Color of the gauge track (unfilled portion)
• value number (required) — Current value to display. Fills the arc from min up to value, unless sections is set – then the arc is colored by thresholds and the value is displayed only in the center label.
• valueFormatter (value: number) => string (default (v) => String(v)) — Value formatter for default label,

Optional leading props map; remaining args are children.

heatmap clj/s

Heatmap — Heatmap chart component

https://mantine.dev/charts/heatmap

Props (docgen 9.6.0):

• colors string[] — Colors array, used to calculate color for each value, by default 4 shades of green colors are used
• data Record<string, number> (required) — Heatmap data, key is date in YYYY-MM-DD format (interpreted as a UTC calendar day)
• domain [number, number] — Heatmap domain, array of 2 numbers, min and max values, calculated from data by default
• endDate string | Date — Heatmap end date. Current date by default. Date is normalized to UTC midnight of the intended calendar day.
• firstDayOfWeek 0 | 2 | 1 | 3 | 4 | 5 | 6 (default 1 – Monday) — First day of week, 0 – Sunday, 1 – Monday.
• fontSize number (default 12) — Font size of month and weekday labels
• gap number (default 1) — Gap between rects in px
• getRectProps (input: HeatmapRectData) => SVGProps<SVGRectElement> — Props passed down to each rect depending on its date and associated value
• getTooltipLabel (input: HeatmapRectData) => ReactNode — A function to generate tooltip label based on the hovered rect date and value, required for the tooltip to be visible
• legendLabels [string, string] (default ['Less', 'More']) — Legend labels, array of 2 elements: [min label, max label]
• monthLabels string[] — Month labels, array of 12 elements, can be used for localization
• monthLabelsPosition "bottom" | "top" (default 'top') — Month labels position relative to the heatmap
• monthsLabelsHeight number (default 30) — Height of month labels row
• rectRadius number (default 2) — Rect radius in px
• rectSize number (default 10) — Size of day rect in px
• splitMonths boolean (default false) — If set, inserts a spacer column between months
• startDate string | Date — Heatmap start date. Current date - 1 year by default. Date is normalized to UTC midnight of the intended calendar day.
• tooltipProps Partial<TooltipFloatingProps> — Props passed down to the Tooltip.Floating component
• weekdayLabels string[] — Weekday labels, array of 7 elements, can be used for localization
• weekdaysLabelsWidth number (default 30) — Width of weekday labels column
• withLegend boolean (default false) — If set, legend with color levels is displayed below the heatmap
• withMonthLabels boolean (default false) — If set, month labels are displayed
• withOutsideDates boolean (default true) — If set, trailing dates that do not fall into the given startDate – endDate range are displayed to fill empty space.
• withTooltip boolean (default false) — If set, tooltip is displayed on rect hover
• withWeekdayLabels boolean (default false) — If set, weekday labels are displayed

Optional leading props map; remaining args are children.

line-chart clj/s

LineChart — Line chart component

https://mantine.dev/charts/line-chart

Props (docgen 9.6.0):

• accessibilityLayer boolean — Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, true by default
• activeDotProps MantineChartDotProps — Props passed down to all active dots. Ignored if withDots={false} is set.
• brushProps RechartsProps — Props passed down to the Brush component
• children React.ReactNode — Additional components that are rendered inside recharts LineChart component
• connectNulls boolean (default true) — Determines whether points with null values should be connected
• curveType LineChartCurveType (default 'monotone') — Type of the curve
• data Record<string, any>[] (required) — Data used to display chart
• dataKey string (required) — Key of the data object for x-axis values
• dotProps MantineChartDotProps — Props passed down to all dots. Ignored if withDots={false} is set.
• fillOpacity number (default 1) — Controls fill opacity of all lines
• gradientStops LineChartGradientStop[] (default [{ offset: 0, color: 'red' }, { offset: 100, color: 'blue' }]) — Data used to generate gradient stops
• gridAxis "none" | "x" | "y" | "xy" — Specifies which lines should be displayed in the grid, 'x' by default
• gridColor MantineColor — Color of the grid and cursor lines, by default depends on color scheme
• gridProps RechartsProps — Props passed down to the CartesianGrid component
• legendProps RechartsProps — Props passed down to the Legend component
• lineChartProps (CartesianChartProps<unknown> & { ref?: Ref<SVGSVGElement>; }) | undefined — Props passed down to recharts LineChart component
• lineProps Partial<Omit<Props, "ref">> | ((series: LineChartSeries) => Partial<Omit<Props, "ref">>) — Props passed down to recharts Line component
• orientation "horizontal" | "vertical" — Chart orientation, 'horizontal' by default
• referenceAreas ChartReferenceAreaProps[] — Reference areas that should be displayed on the chart
• referenceDots ChartReferenceDotProps[] — Reference dots that should be displayed on the chart
• referenceLines ChartReferenceLineProps[] — Reference lines that should be displayed on the chart
• rightYAxisLabel string — A label to display next to the right y-axis
• rightYAxisProps RechartsProps — Props passed down to the YAxis recharts component rendered on the right side
• series LineChartSeries[] (required) — An array of objects with name and color keys. Determines which data should be consumed from the data array.
• strokeDasharray string | number — Dash array for the grid lines and cursor, '5 5' by default
• strokeWidth number (default 2) — Stroke width for the chart lines
• textColor MantineColor — Color of the text displayed inside the chart, 'dimmed' by default
• tickLine "none" | "x" | "y" | "xy" — Specifies which axis should have tick line, 'y' by default
• tooltipAnimationDuration number — Tooltip position animation duration in ms, 0 by default
• tooltipProps RechartsProps — Props passed down to the Tooltip component
• type LineChartType (default 'default') — Controls styles of the line
• unit string — Unit displayed next to each tick in y-axis
• valueFormatter (value: number) => string — A function to format values on Y axis and inside the tooltip
• withBrush boolean — Determines whether a brush (range selector) should be displayed under the chart, false by default
• withDots boolean (default true) — Determines whether dots should be displayed
• withLegend boolean — Determines whether chart legend should be displayed, false by default
• withPointLabels boolean (default false) — Determines whether each point should have associated label
• withRightYAxis boolean — Determines whether additional y-axis should be displayed on the right side of the chart, false by default
• withTooltip boolean — Determines whether chart tooltip should be displayed, true by default
• withXAxis boolean — Determines whether x-axis should be displayed, true by default
• withYAxis boolean — Determines whether y-axis should be displayed, true by default
• xAxisLabel string — A label to display below the x-axis
• xAxisProps RechartsProps — Props passed down to the XAxis recharts component
• yAxisLabel string — A label to display next to the y-axis
• yAxisProps RechartsProps — Props passed down to the YAxis recharts component

Optional leading props map; remaining args are children.

matrix-chart clj/s

MatrixChart — Generic x/y heatmap with categorical axes

https://mantine.dev/charts/matrix-chart

Props (docgen 9.6.0):

• cellRadius number (default 2) — Cell border radius,
• cellSize number (default 20) — Cell size in px,
• colors DefaultMantineColor[] — Array of colors for value interpolation, by default 4 shades of green colors are used
• data MatrixChartData (required) — Array of cell objects with x, y, and value
• domain [number, number] — Value domain [min, max] for color interpolation, auto-calculated if not set
• emptyColor MantineColor — Color for empty/null cells
• fontSize number (default 12) — Font size for axis labels,
• gap number (default 1) — Gap between cells in px,
• getCellProps (cell: MatrixChartCell) => SVGProps<SVGRectElement> — Callback to add custom props to cells
• getTooltipLabel (cell: MatrixChartCell) => ReactNode — A function to generate tooltip label based on the hovered cell, required for the tooltip to be visible
• legendLabels [string, string] (default ['Less', 'More']) — Legend labels,
• tooltipProps Partial<TooltipFloatingProps> — Props passed down to the Tooltip.Floating component
• withLegend boolean (default false) — Whether to show legend,
• withTooltip boolean (default false) — If set, tooltip is displayed on cell hover, requires getTooltipLabel to be set
• withXLabels boolean (default false) — If set, x-axis labels are displayed,
• withYLabels boolean (default false) — If set, y-axis labels are displayed,
• xLabels string[] — Labels for x-axis (columns), displayed along top or bottom
• xLabelsHeight number (default 60) — Height reserved for x-axis labels,
• xLabelsPosition "bottom" | "top" (default 'bottom') — X-axis label position,
• xLabelsRotation number (default -90) — Rotation angle for x-axis labels in degrees,
• yLabels string[] — Labels for y-axis (rows), displayed along left side
• yLabelsWidth number (default 60) — Width reserved for y-axis labels,

Optional leading props map; remaining args are children.

pie-chart clj/s

PieChart — Pie chart component

https://mantine.dev/charts/pie-chart

Props (docgen 9.6.0):

• accessibilityLayer boolean — Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, true by default
• cellProps Partial<Omit<SVGProps<SVGElement>, "ref">> | ((series: PieChartCell) => Partial<Omit<SVGProps<SVGElement>, "ref">>) — Props passed down to each segment of the chart
• children React.ReactNode — Additional elements rendered inside PieChart component
• data PieChartCell[] (required) — Data used to render chart
• endAngle number (default 360) — Controls angle at which charts ends. Set to 0 to render the chart as semicircle.
• labelColor MantineColor — Controls text color of all labels, white by default
• labelsPosition "outside" | "inside" (default 'outside') — Controls labels position relative to the segment
• labelsType "value" | "name" | "percent" (default 'value') — Type of labels to display
• legendProps RechartsProps — Props passed down to recharts Legend component
• paddingAngle number (default 0) — Controls padding between segments
• pieChartProps (PolarChartProps<unknown> & { ref?: Ref<SVGSVGElement>; }) | undefined — Props passed down to recharts PieChart component
• pieProps Partial<Omit<Props, "ref">> — Props passed down to recharts Pie component
• size number (default 80) — Controls chart width and height, height is increased by 40 if withLabels prop is set. Cannot be less than thickness.
• startAngle number (default 0) — Controls angle at which chart starts. Set to 180 to render the chart as semicircle.
• strokeColor MantineColor — Controls color of the segments stroke, by default depends on color scheme
• strokeWidth number (default 1) — Controls width of segments stroke
• tooltipAnimationDuration number (default 0) — Tooltip animation duration in ms
• tooltipDataSource "all" | "segment" (default 'all') — Determines which data is displayed in the tooltip. 'all' – display all values, 'segment' – display only hovered segment.
• tooltipProps RechartsProps — Props passed down to Tooltip recharts component
• valueFormatter (value: number) => string — A function to format values inside the tooltip
• withLabels boolean (default false) — Determines whether each segment should have associated label
• withLabelsLine boolean (default true) — Determines whether segments labels should have lines that connect the segment with the label
• withLegend boolean (default false) — Determines whether the legend should be displayed
• withTooltip boolean (default true) — Determines whether the tooltip should be displayed when one of the section is hovered

Optional leading props map; remaining args are children.

radar-chart clj/s

RadarChart — Radar chart component

https://mantine.dev/charts/radar-chart

Props (docgen 9.6.0):

• accessibilityLayer boolean — Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, true by default
• activeDotProps MantineChartDotProps — Props passed down to all active dots. Ignored if withDots={false} is set.
• children React.ReactNode — Additional components that are rendered inside recharts RadarChart component
• data Record<string, any>[] (required) — Data used in the chart
• dataKey string (required) — Key of the data object for axis values
• dotProps MantineChartDotProps — Props passed down to all dots. Ignored if withDots={false} is set.
• gridColor MantineColor — Controls color of the grid lines. By default, color depends on the color scheme.
• legendProps RechartsProps — Props passed down to recharts Legend component
• polarAngleAxisProps RechartsProps — Props passed down to recharts PolarAngleAxis component
• polarGridProps RechartsProps — Props passed down to recharts PolarGrid component
• polarRadiusAxisProps RechartsProps — Props passed down to recharts PolarRadiusAxis component
• radarChartProps (PolarChartProps<unknown> & { ref?: Ref<SVGSVGElement>; }) | undefined — Props passed down to recharts RadarChart component
• radarProps ((series: RadarChartSeries) => Partial<Omit<Props, "ref">>) | Partial<Omit<Props, "ref">> — Props passed down to recharts Radar component
• series RadarChartSeries[] (required) — Determines which data should be consumed from the data array.
• textColor MantineColor — Controls color of all text elements. By default, color depends on the color scheme.
• tooltipAnimationDuration number (default 0) — Tooltip position animation duration in ms
• tooltipProps RechartsProps — Props passed down to recharts Tooltip component
• withDots boolean (default false) — Determines whether dots should be displayed
• withLegend boolean (default false) — Determines whether the legend should be displayed
• withPolarAngleAxis boolean (default true) — Determines whether PolarAngleAxis component should be displayed
• withPolarGrid boolean (default true.) — Determines whether PolarGrid component should be displayed
• withPolarRadiusAxis boolean (default false) — Determines whether PolarRadiusAxisProps component should be displayed
• withTooltip boolean (default false) — Determines whether Tooltip component should be displayed

Optional leading props map; remaining args are children.

radial-bar-chart clj/s

RadialBarChart — Radial bar chart component

https://mantine.dev/charts/radial-bar-chart

Props (docgen 9.6.0):

• accessibilityLayer boolean — Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, true by default
• barSize number — Size of bars in px, 20 by default
• data Record<string, any>[] (required) — Chart data
• dataKey string (required) — Key from data object to use as data key
• emptyBackgroundColor string — Color of the empty background, by default depends on the color scheme
• endAngle number (default -270) — Angle at which chart ends
• legendProps RechartsProps — Props passed down to recharts Legend component
• radialBarChartProps (PolarChartProps<unknown> & { ref?: Ref<SVGSVGElement>; }) | undefined — Props passed down to recharts RadarChartChart component
• radialBarProps Omit<RadialBarProps, "ref"> — Props passed down to recharts RadialBar component
• startAngle number (default 90) — Angle at which chart starts
• tooltipProps RechartsProps — Props passed down to Tooltip recharts component
• withBackground boolean (default true) — Determines whether empty bars area should be visible
• withLabels boolean (default false) — Determines whether labels should be displayed
• withLegend boolean (default false) — Determines whether the legend should be displayed
• withTooltip boolean (default true) — Determines whether the tooltip should be displayed when one of the bars is hovered

Optional leading props map; remaining args are children.

sankey-chart clj/s

SankeyChart — Sankey diagram component

https://mantine.dev/charts/sankey-chart

Props (docgen 9.6.0):

• children React.ReactNode — Additional elements rendered inside Sankey component
• colors DefaultMantineColor[] — An array of colors used for nodes when no color is set on individual nodes
• data SankeyChartData (required) — Data used to render chart, must include nodes and links arrays
• height number (default 300) — Controls chart height
• iterations number (default 32) — The number of relaxation iterations
• linkColor MantineColor — Default color for links, by default depends on color scheme
• linkCurvature number (default 0.5) — The curvature of links between nodes
• linkOpacity number (default 0.4) — Opacity of the link fill
• nodeColor MantineColor — Default color for nodes, by default depends on color scheme
• nodePadding number (default 10) — The padding between nodes
• nodeWidth number (default 10) — The width of each node
• sankeyProps Partial<Omit<Props, "data" | "ref">> — Props passed down to recharts Sankey component
• textColor MantineColor (default dimmed) — Controls text color of labels
• tooltipAnimationDuration number (default 0) — Tooltip animation duration in ms
• tooltipProps RechartsProps — Props passed down to Tooltip recharts component
• valueFormatter (value: number) => string — A function to format values inside the tooltip and node labels
• withTooltip boolean (default true) — Determines whether the tooltip should be displayed when hovered

Optional leading props map; remaining args are children.

scatter-chart clj/s

ScatterChart — Scatter chart component

https://mantine.dev/charts/scatter-chart

Props (docgen 9.6.0):

• accessibilityLayer boolean — Determines whether the chart should be keyboard-navigable with the recharts accessibility layer, true by default
• data ScatterChartSeries[] (required) — Data that is used to build the chart
• dataKey { x: string; y: string; } (required) — Keys that should be used to retrieve data from the data array on x and y axis
• gridAxis "none" | "x" | "y" | "xy" — Specifies which lines should be displayed in the grid, 'x' by default
• gridColor MantineColor — Color of the grid and cursor lines, by default depends on color scheme
• gridProps RechartsProps — Props passed down to the CartesianGrid component
• labels { x?: string; y?: string | undefined; } | undefined — Labels that should be used instead of keys names in the tooltip
• legendProps RechartsProps — Props passed down to the Legend component
• orientation "horizontal" | "vertical" — Chart orientation, 'horizontal' by default
• pointLabels "x" | "y" — If set, displays labels next to points for the given axis
• referenceAreas ChartReferenceAreaProps[] — Reference areas that should be displayed on the chart
• referenceDots ChartReferenceDotProps[] — Reference dots that should be displayed on the chart
• referenceLines ChartReferenceLineProps[] — Reference lines that should be displayed on the chart
• rightYAxisLabel string — A label to display next to the right y-axis
• rightYAxisProps RechartsProps — Props passed down to the YAxis recharts component rendered on the right side
• scatterChartProps (CartesianChartProps<unknown> & { ref?: Ref<SVGSVGElement>; }) | undefined — Props passed down to recharts ScatterChart component
• scatterProps Partial<Omit<Props, "ref">> — Props passed down to recharts Scatter component
• strokeDasharray string | number — Dash array for the grid lines and cursor, '5 5' by default
• textColor MantineColor — Color of the text displayed inside the chart, 'dimmed' by default
• tickLine "none" | "x" | "y" | "xy" — Specifies which axis should have tick line, 'y' by default
• tooltipAnimationDuration number — Tooltip position animation duration in ms, 0 by default
• tooltipProps RechartsProps — Props passed down to the Tooltip component
• unit { x?: string; y?: string | undefined; } | undefined — Units displayed after value on axis and inside the tooltip
• valueFormatter ((value: number) => string) | { x?: ((value: number) => string); y?: ((value: number) => string) | undefined; } | undefined — A function to format values on x/y axis and in the tooltip
• withLegend boolean — Determines whether chart legend should be displayed, false by default
• withRightYAxis boolean — Determines whether additional y-axis should be displayed on the right side of the chart, false by default
• withTooltip boolean — Determines whether chart tooltip should be displayed, true by default
• withXAxis boolean — Determines whether x-axis should be displayed, true by default
• withYAxis boolean — Determines whether y-axis should be displayed, true by default
• xAxisLabel string — A label to display below the x-axis
• xAxisProps RechartsProps — Props passed down to the XAxis recharts component
• yAxisLabel string — A label to display next to the y-axis
• yAxisProps RechartsProps — Props passed down to the YAxis recharts component

Optional leading props map; remaining args are children.

sparkline clj/s

Sparkline — Simplified area chart to show trends

https://mantine.dev/charts/sparkline

Props (docgen 9.6.0):

• areaProps Omit<Props<any, any>, "data" | "ref" | "dataKey"> — Props passed down to the underlying recharts Area component
• color MantineColor (default theme.primaryColor) — Key of theme.colors or any valid CSS color
• connectNulls boolean (default true) — Determines whether null values should be connected with other values
• curveType AreaChartCurveType (default 'linear') — Type of the curve
• data (number | null)[] (required) — Data used to render the chart
• fillOpacity number (default 0.6) — Controls fill opacity of the area
• strokeWidth number (default 2) — Area stroke width
• trendColors SparklineTrendColors — If set, color prop is ignored and chart color is determined by the difference between first and last value.
• withGradient boolean (default true) — Determines whether the chart fill should be a gradient

Optional leading props map; remaining args are children.

sunburst-chart clj/s

SunburstChart — Sunburst chart component for hierarchical data

https://mantine.dev/charts/sunburst-chart

Props (docgen 9.6.0):

• children React.ReactNode — Additional elements rendered inside SunburstChart component
• data SunburstChartData[] (required) — Data used to render chart
• dataKey string (default 'value') — Key in data object for the value
• endAngle number (default 360) — Angle in degrees at which the chart should end
• gap number (default 1) — Gap between sectors and rings in px
• innerRadius number (default 50) — Controls the radius of the inner circle at the center of the chart
• size number (default 300) — Controls chart width and height
• startAngle number (default 0) — Angle in degrees from which the chart should start
• strokeColor MantineColor — Controls color of the sectors stroke, by default depends on color scheme
• sunburstChartProps Partial<Omit<SunburstChartProps, "data" | "ref" | "dataKey">> — Props passed down to recharts SunburstChart component
• tooltipAnimationDuration number (default 0) — Tooltip animation duration in ms
• tooltipProps RechartsProps — Props passed down to Tooltip recharts component
• valueFormatter (value: number) => string — A function to format values inside the tooltip and labels
• withLabels boolean (default false) — Determines whether value labels are displayed inside each sector
• withTooltip boolean (default true) — Determines whether the tooltip should be displayed when a node is hovered

Optional leading props map; remaining args are children.

treemap clj/s

Treemap — Treemap chart component

https://mantine.dev/charts/treemap

Props (docgen 9.6.0):

• aspectRatio number (default 1.618033988749895) — The treemap will try to keep every single rectangle's aspect ratio near the aspectRatio given
• autoContrast boolean — Determines whether text color should be adjusted based on background color to improve contrast
• children React.ReactNode — Additional elements rendered inside Treemap component
• data TreemapData[] (required) — Data used to render chart
• dataKey string (default 'value') — Key in data object for the value
• height number (default 300) — Controls chart height
• strokeColor MantineColor — Controls color of the node stroke, by default depends on color scheme
• strokeWidth number (default 1) — Controls width of node stroke
• textColor MantineColor (default dimmed) — Controls text color of labels
• tooltipAnimationDuration number (default 0) — Tooltip animation duration in ms
• tooltipProps RechartsProps — Props passed down to Tooltip recharts component
• treemapProps Partial<Omit<Props<TreemapDataType, any>, "data" | "ref" | "dataKey">> — Props passed down to recharts Treemap component
• valueFormatter (value: number) => string — A function to format values inside the tooltip
• withTooltip boolean (default true) — Determines whether the tooltip should be displayed when a node is hovered

Optional leading props map; remaining args are children.

waffle-chart clj/s

WaffleChart — Part-to-whole grid chart with colored cells

https://mantine.dev/charts/waffle-chart

Props (docgen 9.6.0):

• cellRadius number (default 0) — Cell border radius,
• columns number (default 10) — Number of columns,
• data WaffleChartCell[] (required) — Array of data segments with name, value, and color
• emptyColor MantineColor — Color of empty (unfilled) cells
• fillDirection "right-to-left" | "left-to-right" | "top-to-bottom" | "bottom-to-top" (default 'left-to-right') — Fill direction,
• gap number (default 2) — Gap between cells in px,
• getTooltipLabel (cell: WaffleChartCell & { count: number; }) => ReactNode — Custom tooltip label formatter
• legendPosition "left" | "right" | "bottom" | "top" (default 'bottom') — Legend position,
• rows number (default 10) — Number of rows,
• size number — Chart size (width), auto-calculated from columns if not set
• total number — Total value for the chart, determines how many cells are filled vs empty, sum of all values by default
• withLegend boolean (default true) — Whether to show legend,
• withTooltip boolean (default false) — Whether to show tooltip on hover,

Optional leading props map; remaining args are children.