@mantine/charts 9.5.1 → 9.6.0

package/lib/CandlestickChart/CandlestickChart.d.ts

@@ -0,0 +1,68 @@
+import { ComposedChart as ReChartsComposedChart } from 'recharts';
+import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '@mantine/core';
+import { ChartTooltipStylesNames } from '../ChartTooltip';
+import type { BaseChartStylesNames, GridChartBaseProps } from '../types';
+export interface CandlestickChartDataKeys {
+    /** Key of the data object for the open value */
+    open: string;
+    /** Key of the data object for the high value */
+    high: string;
+    /** Key of the data object for the low value */
+    low: string;
+    /** Key of the data object for the close value */
+    close: string;
+}
+export interface CandlestickChartLabels {
+    /** Label of the open value displayed in the tooltip */
+    open: string;
+    /** Label of the high value displayed in the tooltip */
+    high: string;
+    /** Label of the low value displayed in the tooltip */
+    low: string;
+    /** Label of the close value displayed in the tooltip */
+    close: string;
+}
+export type CandlestickChartStylesNames = 'candle' | Exclude<BaseChartStylesNames, 'brush'> | ChartTooltipStylesNames;
+export type CandlestickChartCssVariables = {
+    root: '--chart-text-color' | '--chart-grid-color';
+};
+export interface CandlestickChartProps extends BoxProps, Pick<GridChartBaseProps, 'dataKey' | 'withXAxis' | 'withYAxis' | 'xAxisProps' | 'yAxisProps' | 'gridProps' | 'tickLine' | 'strokeDasharray' | 'gridAxis' | 'unit' | 'tooltipAnimationDuration' | 'tooltipProps' | 'withTooltip' | 'textColor' | 'gridColor' | 'valueFormatter' | 'xAxisLabel' | 'yAxisLabel' | 'referenceLines' | 'referenceAreas' | 'referenceDots' | 'accessibilityLayer'>, StylesApiProps<CandlestickChartFactory>, ElementProps<'div'> {
+    /** Data used to display chart */
+    data: Record<string, any>[];
+    /** Keys of the `data` object used to read open, high, low and close values @default `{ open: 'open', high: 'high', low: 'low', close: 'close' }` */
+    dataKeys?: CandlestickChartDataKeys;
+    /** Labels of open, high, low and close values displayed in the tooltip @default `{ open: 'Open', high: 'High', low: 'Low', close: 'Close' }` */
+    labels?: Partial<CandlestickChartLabels>;
+    /** Color of candles with `close >= open`, key of `theme.colors` or any valid CSS color @default 'teal.6' */
+    upColor?: MantineColor;
+    /** Color of candles with `close < open`, key of `theme.colors` or any valid CSS color @default 'red.6' */
+    downColor?: MantineColor;
+    /** Maximum candle width in px */
+    maxCandleWidth?: number;
+    /** Stroke width of the candle wick and body outline @default 1 */
+    candleStrokeWidth?: number;
+    /** Props passed down to recharts `ComposedChart` component */
+    composedChartProps?: React.ComponentProps<typeof ReChartsComposedChart>;
+    /** Additional components that are rendered inside recharts `ComposedChart` component */
+    children?: React.ReactNode;
+}
+export type CandlestickChartFactory = Factory<{
+    props: CandlestickChartProps;
+    ref: HTMLDivElement;
+    stylesNames: CandlestickChartStylesNames;
+    vars: CandlestickChartCssVariables;
+}>;
+export declare const CandlestickChart: import("@mantine/core").MantineComponent<{
+    props: CandlestickChartProps;
+    ref: HTMLDivElement;
+    stylesNames: CandlestickChartStylesNames;
+    vars: CandlestickChartCssVariables;
+}>;
+export declare namespace CandlestickChart {
+    type Props = CandlestickChartProps;
+    type CssVariables = CandlestickChartCssVariables;
+    type Factory = CandlestickChartFactory;
+    type Labels = CandlestickChartLabels;
+    type DataKeys = CandlestickChartDataKeys;
+    type StylesNames = CandlestickChartStylesNames;
+}

package/lib/CandlestickChart/get-candle-geometry/get-candle-geometry.d.ts

@@ -0,0 +1,30 @@
+export interface GetCandleGeometryInput {
+    /** Left edge of the slot recharts allocated to the candle */
+    x: number;
+    /** Top edge of the slot, corresponding to `high` */
+    y: number;
+    /** Width of the slot */
+    width: number;
+    /** Height of the slot, spanning `high` to `low` */
+    height: number;
+    open: unknown;
+    high: unknown;
+    low: unknown;
+    close: unknown;
+}
+export interface CandleGeometry {
+    /** Horizontal center of the slot, where the wick is drawn */
+    centerX: number;
+    /** Top of the open/close body */
+    bodyY: number;
+    /** Height of the open/close body, never less than 1px so a doji stays visible */
+    bodyHeight: number;
+    /** `true` when the candle closed at or above its open */
+    isUp: boolean;
+}
+/**
+ * Maps one OHLC row onto the slot recharts allocated for it. Returns `null` when the row
+ * cannot be drawn – the same condition `getCandlestickDomain` uses to decide which rows
+ * contribute to the axis, so the two never disagree about what is on the chart.
+ */
+export declare function getCandleGeometry({ x, y, width, height, open, high, low, close, }: GetCandleGeometryInput): CandleGeometry | null;

package/lib/CandlestickChart/get-candlestick-domain/get-candlestick-domain.d.ts

@@ -0,0 +1,21 @@
+export declare function isRenderableValue(value: unknown): value is number;
+interface GetCandlestickDomainInput {
+    data: Record<string, any>[];
+    openKey: string;
+    highKey: string;
+    lowKey: string;
+    closeKey: string;
+}
+/**
+ * Calculates an explicit y-axis domain padded by 5% of the range. Rows with missing or
+ * non-finite values are ignored – `NaN` and `Infinity` are numbers, and letting either
+ * reach the bounds produces a `NaN` domain that blanks the entire chart instead of just
+ * the offending row. Bounds are reduced iteratively rather than spread into
+ * `Math.min`/`Math.max`, which throws on large datasets.
+ *
+ * A row counts only when all four OHLC values are renderable, which is the same condition
+ * the candle shape uses. Taking `low`/`high` independently would let a half-filled row
+ * stretch the domain toward a candle that is never drawn, squashing the real ones.
+ */
+export declare function getCandlestickDomain({ data, openKey, highKey, lowKey, closeKey, }: GetCandlestickDomainInput): [number, number] | undefined;
+export {};

package/lib/CandlestickChart/index.d.ts

@@ -0,0 +1,3 @@
+import type { CandlestickChartCssVariables, CandlestickChartFactory, CandlestickChartLabels, CandlestickChartProps, CandlestickChartDataKeys, CandlestickChartStylesNames } from './CandlestickChart';
+export { CandlestickChart } from './CandlestickChart';
+export type { CandlestickChartProps, CandlestickChartStylesNames, CandlestickChartCssVariables, CandlestickChartFactory, CandlestickChartLabels, CandlestickChartDataKeys, };

package/lib/GaugeChart/GaugeChart.d.ts

@@ -0,0 +1,57 @@
+import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '@mantine/core';
+export interface GaugeChartSection {
+    /** Upper bound value for this section */
+    value: number;
+    /** Color of the section */
+    color: MantineColor;
+}
+export type GaugeChartStylesNames = 'root' | 'track' | 'section' | 'needle' | 'label';
+export type GaugeChartCssVariables = {
+    root: '--gauge-size';
+};
+export interface GaugeChartProps extends BoxProps, StylesApiProps<GaugeChartFactory>, ElementProps<'svg', 'display' | 'opacity' | 'viewBox' | 'width' | 'height' | 'target'> {
+    /** 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. */
+    value: number;
+    /** Minimum value of the gauge, @default 0 */
+    min?: number;
+    /** Maximum value of the gauge, @default 100 */
+    max?: number;
+    /** Value marked on the arc with a line marker, use to display a goal or the current value of a gauge with `sections` */
+    target?: number;
+    /** 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`. */
+    sections?: GaugeChartSection[];
+    /** Arc thickness in px, @default 12 */
+    thickness?: number;
+    /** Chart size (width and height), @default 200 */
+    size?: number;
+    /** Start angle in degrees, @default -120 */
+    startAngle?: number;
+    /** End angle in degrees, @default 120 */
+    endAngle?: number;
+    /** Label displayed in the center of the gauge */
+    label?: React.ReactNode;
+    /** Value formatter for default label, @default (v) => String(v) */
+    valueFormatter?: (value: number) => string;
+    /** Color of the gauge track (unfilled portion) */
+    trackColor?: MantineColor;
+    /** Color of the filled arc when sections are not provided */
+    filledColor?: MantineColor;
+    /** Color of the target marker */
+    targetColor?: MantineColor;
+    /** Thickness of the target marker, @default 2 */
+    targetSize?: number;
+    /** Whether to round arc endpoints. Not applied to `sections` – rounded caps of adjacent sections would overlap each other. @default false */
+    roundCaps?: boolean;
+}
+export type GaugeChartFactory = Factory<{
+    props: GaugeChartProps;
+    ref: SVGSVGElement;
+    stylesNames: GaugeChartStylesNames;
+    vars: GaugeChartCssVariables;
+}>;
+export declare const GaugeChart: import("@mantine/core").MantineComponent<{
+    props: GaugeChartProps;
+    ref: SVGSVGElement;
+    stylesNames: GaugeChartStylesNames;
+    vars: GaugeChartCssVariables;
+}>;

package/lib/GaugeChart/index.d.ts

@@ -0,0 +1,10 @@
+import type { GaugeChartCssVariables, GaugeChartFactory, GaugeChartProps, GaugeChartSection, GaugeChartStylesNames } from './GaugeChart';
+export { GaugeChart } from './GaugeChart';
+export type { GaugeChartProps, GaugeChartStylesNames, GaugeChartCssVariables, GaugeChartFactory, GaugeChartSection, };
+export declare namespace GaugeChart {
+    type Props = GaugeChartProps;
+    type StylesNames = GaugeChartStylesNames;
+    type CssVariables = GaugeChartCssVariables;
+    type Factory = GaugeChartFactory;
+    type Section = GaugeChartSection;
+}

package/lib/Heatmap/HeatmapSplitWeeks.d.ts

@@ -1,2 +1,2 @@
 import { HeatmapWeeksSharedProps } from './HeatmapWeeks.types';
-export declare function HeatmapSplitWeeks({ data, datesRange, rectSize, gap, rectRadius, min, max, colors, withTooltip, setHoveredRect, getRectProps, getStyles, }: HeatmapWeeksSharedProps): import("react/jsx-runtime").JSX.Element;
+export declare function HeatmapSplitWeeks({ data, datesRange, rectSize, gap, rectRadius, min, max, colors, withTooltip, setHoveredRect, getRectProps, getStyles, }: HeatmapWeeksSharedProps): import("react").JSX.Element;

package/lib/Heatmap/HeatmapWeeks.d.ts

@@ -1,2 +1,2 @@
 import { HeatmapWeeksSharedProps } from './HeatmapWeeks.types';
-export declare function HeatmapWeeks({ data, datesRange, rectSize, gap, rectRadius, min, max, colors, withTooltip, setHoveredRect, getRectProps, getStyles, }: HeatmapWeeksSharedProps): import("react/jsx-runtime").JSX.Element;
+export declare function HeatmapWeeks({ data, datesRange, rectSize, gap, rectRadius, min, max, colors, withTooltip, setHoveredRect, getRectProps, getStyles, }: HeatmapWeeksSharedProps): import("react").JSX.Element;

package/lib/MatrixChart/MatrixChart.d.ts

@@ -0,0 +1,64 @@
+import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps, TooltipFloatingProps } from '@mantine/core';
+export interface MatrixChartCell {
+    x: string;
+    y: string;
+    value: number | null;
+}
+export type MatrixChartData = MatrixChartCell[];
+export type MatrixChartStylesNames = 'root' | 'cell' | 'xLabel' | 'yLabel' | 'legend' | 'legendLabel' | 'legendRect';
+export interface MatrixChartProps extends BoxProps, StylesApiProps<MatrixChartFactory>, ElementProps<'svg', 'display' | 'opacity' | 'viewBox' | 'width' | 'height'> {
+    /** Array of cell objects with x, y, and value */
+    data: MatrixChartData;
+    /** Labels for x-axis (columns), displayed along top or bottom */
+    xLabels?: string[];
+    /** Labels for y-axis (rows), displayed along left side */
+    yLabels?: string[];
+    /** Value domain [min, max] for color interpolation, auto-calculated if not set */
+    domain?: [number, number];
+    /** Array of colors for value interpolation, by default 4 shades of green colors are used */
+    colors?: MantineColor[];
+    /** Cell size in px, @default 20 */
+    cellSize?: number;
+    /** Gap between cells in px, @default 1 */
+    gap?: number;
+    /** Cell border radius, @default 2 */
+    cellRadius?: number;
+    /** If set, tooltip is displayed on cell hover, requires `getTooltipLabel` to be set @default false */
+    withTooltip?: boolean;
+    /** A function to generate tooltip label based on the hovered cell, required for the tooltip to be visible */
+    getTooltipLabel?: (cell: MatrixChartCell) => React.ReactNode;
+    /** Props passed down to the `Tooltip.Floating` component */
+    tooltipProps?: Partial<TooltipFloatingProps>;
+    /** Callback to add custom props to cells */
+    getCellProps?: (cell: MatrixChartCell) => React.ComponentProps<'rect'>;
+    /** Width reserved for y-axis labels, @default 60 */
+    yLabelsWidth?: number;
+    /** Height reserved for x-axis labels, @default 60 */
+    xLabelsHeight?: number;
+    /** X-axis label position, @default 'bottom' */
+    xLabelsPosition?: 'top' | 'bottom';
+    /** Font size for axis labels, @default 12 */
+    fontSize?: number;
+    /** Color for empty/null cells */
+    emptyColor?: MantineColor;
+    /** Whether to show legend, @default false */
+    withLegend?: boolean;
+    /** Legend labels, @default ['Less', 'More'] */
+    legendLabels?: [string, string];
+    /** If set, x-axis labels are displayed, @default false */
+    withXLabels?: boolean;
+    /** If set, y-axis labels are displayed, @default false */
+    withYLabels?: boolean;
+    /** Rotation angle for x-axis labels in degrees, @default -90 */
+    xLabelsRotation?: number;
+}
+export type MatrixChartFactory = Factory<{
+    props: MatrixChartProps;
+    ref: SVGSVGElement;
+    stylesNames: MatrixChartStylesNames;
+}>;
+export declare const MatrixChart: import("@mantine/core").MantineComponent<{
+    props: MatrixChartProps;
+    ref: SVGSVGElement;
+    stylesNames: MatrixChartStylesNames;
+}>;

package/lib/MatrixChart/build-cell-map/build-cell-map.d.ts

@@ -0,0 +1,3 @@
+import type { MatrixChartCell } from '../MatrixChart';
+export declare function getCellKey(x: string, y: string): string;
+export declare function buildCellMap(data: MatrixChartCell[]): Map<string, MatrixChartCell>;

package/lib/MatrixChart/get-domain/get-domain.d.ts

@@ -0,0 +1,10 @@
+import type { MatrixChartCell } from '../MatrixChart';
+/**
+ * Calculates the value domain used for color interpolation. Rows with missing or
+ * non-finite values are ignored – `NaN` and `Infinity` are numbers, and letting either
+ * reach the bounds produces a `NaN` domain, which resolves every cell color to
+ * `undefined` and paints the whole matrix with the SVG default fill instead of just
+ * skipping the offending cell. Bounds are reduced iteratively rather than spread into
+ * `Math.min`/`Math.max`, which throws on large matrices.
+ */
+export declare function getDomain(data: MatrixChartCell[], domain?: [number, number]): [number, number];

package/lib/MatrixChart/get-legend-width/get-legend-width.d.ts

@@ -0,0 +1,9 @@
+interface GetLegendWidthInput {
+    legendLabels: [string, string];
+    fontSize: number;
+    colorsCount: number;
+    cellSize: number;
+    gap: number;
+}
+export declare function getLegendWidth({ legendLabels, fontSize, colorsCount, cellSize, gap, }: GetLegendWidthInput): number;
+export {};

package/lib/MatrixChart/get-unique-values/get-unique-values.d.ts

@@ -0,0 +1,2 @@
+import type { MatrixChartCell } from '../MatrixChart';
+export declare function getUniqueValues(data: MatrixChartCell[], axis: 'x' | 'y', labels?: string[]): string[];

package/lib/MatrixChart/index.d.ts

@@ -0,0 +1,8 @@
+import type { MatrixChartFactory, MatrixChartProps, MatrixChartStylesNames } from './MatrixChart';
+export { MatrixChart } from './MatrixChart';
+export type { MatrixChartProps, MatrixChartStylesNames, MatrixChartFactory, MatrixChartCell, MatrixChartData, } from './MatrixChart';
+export declare namespace MatrixChart {
+    type Props = MatrixChartProps;
+    type StylesNames = MatrixChartStylesNames;
+    type Factory = MatrixChartFactory;
+}

package/lib/PointLabel/PointLabel.d.ts

@@ -4,5 +4,5 @@ interface PointLabelProps {
     value?: number;
     valueFormatter?: (value: number) => string;
 }
-export declare function PointLabel({ x, y, value, valueFormatter }: PointLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare function PointLabel({ x, y, value, valueFormatter }: PointLabelProps): import("react").JSX.Element;
 export {};

package/lib/WaffleChart/WaffleChart.d.ts

@@ -0,0 +1,57 @@
+import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '@mantine/core';
+export interface WaffleChartCell {
+    /** Segment name */
+    name: string;
+    /** Segment value */
+    value: number;
+    /** Segment color */
+    color: MantineColor;
+    /** Unique key for the segment */
+    key?: string | number;
+}
+export type WaffleChartStylesNames = 'root' | 'grid' | 'cell' | 'legend' | 'legendItem' | 'legendSwatch' | 'legendLabel';
+export type WaffleChartCssVariables = {
+    root: '--waffle-cell-radius' | '--waffle-empty-color';
+};
+export interface WaffleChartProps extends BoxProps, StylesApiProps<WaffleChartFactory>, ElementProps<'div'> {
+    /** Array of data segments with name, value, and color */
+    data: WaffleChartCell[];
+    /** Number of rows, @default 10 */
+    rows?: number;
+    /** Number of columns, @default 10 */
+    columns?: number;
+    /** Total value for the chart, determines how many cells are filled vs empty, sum of all values by default */
+    total?: number;
+    /** Gap between cells in px, @default 2 */
+    gap?: number;
+    /** Cell border radius, @default 0 */
+    cellRadius?: number;
+    /** Color of empty (unfilled) cells */
+    emptyColor?: MantineColor;
+    /** Whether to show tooltip on hover, @default false */
+    withTooltip?: boolean;
+    /** Custom tooltip label formatter */
+    getTooltipLabel?: (cell: WaffleChartCell & {
+        count: number;
+    }) => React.ReactNode;
+    /** Whether to show legend, @default true */
+    withLegend?: boolean;
+    /** Legend position, @default 'bottom' */
+    legendPosition?: 'top' | 'bottom' | 'left' | 'right';
+    /** Fill direction, @default 'left-to-right' */
+    fillDirection?: 'left-to-right' | 'right-to-left' | 'top-to-bottom' | 'bottom-to-top';
+    /** Chart size (width), auto-calculated from columns if not set */
+    size?: number;
+}
+export type WaffleChartFactory = Factory<{
+    props: WaffleChartProps;
+    ref: HTMLDivElement;
+    stylesNames: WaffleChartStylesNames;
+    vars: WaffleChartCssVariables;
+}>;
+export declare const WaffleChart: import("@mantine/core").MantineComponent<{
+    props: WaffleChartProps;
+    ref: HTMLDivElement;
+    stylesNames: WaffleChartStylesNames;
+    vars: WaffleChartCssVariables;
+}>;

package/lib/WaffleChart/index.d.ts

@@ -0,0 +1,10 @@
+import type { WaffleChartCell, WaffleChartCssVariables, WaffleChartFactory, WaffleChartProps, WaffleChartStylesNames } from './WaffleChart';
+export { WaffleChart } from './WaffleChart';
+export type { WaffleChartProps, WaffleChartStylesNames, WaffleChartCssVariables, WaffleChartFactory, WaffleChartCell, };
+export declare namespace WaffleChart {
+    type Props = WaffleChartProps;
+    type StylesNames = WaffleChartStylesNames;
+    type CssVariables = WaffleChartCssVariables;
+    type Factory = WaffleChartFactory;
+    type Cell = WaffleChartCell;
+}

package/lib/index.d.mts

@@ -11,6 +11,7 @@ export * from './RadarChart/index.js';
 export * from './ScatterChart/index.js';
 export * from './BubbleChart/index.js';
 export * from './CompositeChart/index.js';
+export * from './CandlestickChart/index.js';
 export * from './RadialBarChart/index.js';
 export * from './FunnelChart/index.js';
 export * from './Heatmap/index.js';
@@ -19,4 +20,7 @@ export * from './Treemap/index.js';
 export * from './SankeyChart/index.js';
 export * from './SunburstChart/index.js';
 export * from './BulletChart/index.js';
+export * from './GaugeChart/index.js';
+export * from './WaffleChart/index.js';
+export * from './MatrixChart/index.js';
 export * from './types';

package/lib/index.d.ts

@@ -11,6 +11,7 @@ export * from './RadarChart/index.js';
 export * from './ScatterChart/index.js';
 export * from './BubbleChart/index.js';
 export * from './CompositeChart/index.js';
+export * from './CandlestickChart/index.js';
 export * from './RadialBarChart/index.js';
 export * from './FunnelChart/index.js';
 export * from './Heatmap/index.js';
@@ -19,4 +20,7 @@ export * from './Treemap/index.js';
 export * from './SankeyChart/index.js';
 export * from './SunburstChart/index.js';
 export * from './BulletChart/index.js';
+export * from './GaugeChart/index.js';
+export * from './WaffleChart/index.js';
+export * from './MatrixChart/index.js';
 export * from './types';

package/lib/types.d.ts

@@ -1,17 +1,27 @@
-import type { BrushProps, CartesianGridProps, DotProps, LabelProps, LegendProps, ReferenceLineProps, TooltipProps, XAxisProps, YAxisProps } from 'recharts';
+import type { BrushProps, CartesianGridProps, DotProps, LabelProps, LegendProps, ReferenceAreaProps, ReferenceDotProps, ReferenceLineProps, TooltipProps, XAxisProps, YAxisProps } from 'recharts';
 import type { MantineColor } from '@mantine/core';
 export interface ChartReferenceLineProps extends Omit<ReferenceLineProps, 'ref' | 'label'> {
     color?: MantineColor;
     label?: string | Omit<LabelProps, 'ref'>;
     labelPosition?: LabelProps['position'];
 }
+export interface ChartReferenceAreaProps extends Omit<ReferenceAreaProps, 'ref' | 'label'> {
+    color?: MantineColor;
+    label?: string | Omit<LabelProps, 'ref'>;
+    labelPosition?: LabelProps['position'];
+}
+export interface ChartReferenceDotProps extends Omit<ReferenceDotProps, 'ref' | 'label'> {
+    color?: MantineColor;
+    label?: string | Omit<LabelProps, 'ref'>;
+    labelPosition?: LabelProps['position'];
+}
 export interface ChartSeries {
     name: string;
     color?: MantineColor;
     label?: string;
     yAxisId?: string;
 }
-export type BaseChartStylesNames = 'root' | 'container' | 'axis' | 'grid' | 'referenceLine' | 'axisLabel' | 'brush';
+export type BaseChartStylesNames = 'root' | 'container' | 'axis' | 'grid' | 'referenceLine' | 'referenceArea' | 'referenceDot' | 'axisLabel' | 'brush';
 export type ChartData = Record<string, any>[];
 export interface GridChartBaseProps {
     /** Data used to display chart */
@@ -20,6 +30,10 @@ export interface GridChartBaseProps {
     dataKey: string;
     /** Reference lines that should be displayed on the chart */
     referenceLines?: ChartReferenceLineProps[];
+    /** Reference areas that should be displayed on the chart */
+    referenceAreas?: ChartReferenceAreaProps[];
+    /** Reference dots that should be displayed on the chart */
+    referenceDots?: ChartReferenceDotProps[];
     /** Determines whether x-axis should be displayed, `true` by default */
     withXAxis?: boolean;
     /** Determines whether y-axis should be displayed, `true` by default */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/charts",
-  "version": "9.5.1",
+  "version": "9.6.0",
   "description": "Charts components built with recharts and Mantine",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -35,8 +35,8 @@
     "directory": "packages/@mantine/charts"
   },
   "peerDependencies": {
-    "@mantine/core": "9.5.1",
-    "@mantine/hooks": "9.5.1",
+    "@mantine/core": "9.6.0",
+    "@mantine/hooks": "9.6.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "recharts": ">=3.2.1"
@@ -45,7 +45,7 @@
     "@mantine-tests/core": "workspace:*",
     "@mantine/core": "workspace:*",
     "@mantine/hooks": "workspace:*",
-    "react": "19.2.7",
-    "react-dom": "19.2.7"
+    "react": "19.2.8",
+    "react-dom": "19.2.8"
   }
 }

package/styles.css

@@ -621,3 +621,112 @@
     right: 0;
     transform: translateY(50%);
   }
+
+.m_b7f9c72a {
+  width: var(--gauge-size);
+  height: auto;
+  aspect-ratio: var(--gauge-aspect-ratio, 1);
+}
+
+.m_46e401ac {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: var(--mantine-font-size-lg);
+  font-weight: var(--mantine-font-weight-bold);
+  color: var(--mantine-color-text);
+  line-height: 1;
+}
+
+.m_16f4c1f4 {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--mantine-spacing-sm);
+}
+
+  .m_16f4c1f4[data-vertical] {
+    flex-direction: row;
+  }
+
+.m_16edca74 {
+  rx: var(--waffle-cell-radius);
+}
+
+.m_16edca74[data-empty] {
+    fill: var(--waffle-empty-color, var(--mantine-color-default-border));
+  }
+
+.m_21fe489f {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+[data-vertical] > .m_21fe489f {
+    flex-direction: column;
+  }
+
+.m_f27dd052 {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--mantine-spacing-xs) / 2);
+  cursor: default;
+  padding: calc(var(--mantine-spacing-xs) / 2) calc(var(--mantine-spacing-sm) / 2);
+}
+
+.m_5b8415bb {
+  display: block;
+  width: calc(0.75rem * var(--mantine-scale));
+  height: calc(0.75rem * var(--mantine-scale));
+  border-radius: var(--waffle-cell-radius, calc(0.125rem * var(--mantine-scale)));
+  flex-shrink: 0;
+}
+
+.m_5d5dd195 {
+  font-size: var(--mantine-font-size-sm);
+  color: var(--mantine-color-text);
+  line-height: 1;
+}
+
+.m_c56bc032 {
+  display: block;
+  width: fit-content;
+}
+
+  :where([data-mantine-color-scheme='light']) .m_c56bc032 {
+    --matrix-level-1: rgba(81, 207, 102, 0.3);
+    --matrix-level-2: rgba(64, 192, 87, 0.45);
+    --matrix-level-3: rgba(55, 178, 77, 0.75);
+    --matrix-level-4: rgba(43, 138, 62, 1);
+    --matrix-empty-bg: var(--mantine-color-gray-2);
+}
+
+  :where([data-mantine-color-scheme='dark']) .m_c56bc032 {
+    --matrix-level-1: rgba(43, 138, 62, 0.3);
+    --matrix-level-2: rgba(47, 158, 68, 0.45);
+    --matrix-level-3: rgba(55, 178, 77, 0.75);
+    --matrix-level-4: rgba(81, 207, 102, 1);
+    --matrix-empty-bg: var(--mantine-color-dark-5);
+}
+
+.m_c564c8b2 {
+  stroke-width: calc(0.0625rem * var(--mantine-scale));
+}
+
+.m_c564c8b2:where([data-empty]) {
+    fill: var(--matrix-empty-bg);
+  }
+
+.m_21c5c4ac,
+.m_237a9d4b,
+.m_3135f197 {
+  cursor: default;
+  user-select: none;
+  fill: var(--mantine-color-dimmed);
+}
+
+.m_af0486e1:where([data-empty]) {
+    fill: var(--matrix-empty-bg);
+  }