Chart

Exports

Import these components from @mbsw/ui.

ChartLegend
ChartLegendSection
ChartLegendSwatch
ChartTooltip
ChartTooltipItem

Props

The tables list common props for each component. See the full types for supported prop combinations and inherited HTML and Radix props.

ChartLegend

ChartLegend props
PropTypeRequirement
valuestring | (readonly string[] & string)Optional
seriesColorstringOptional
labelstringRequired
size'md' | 'sm'Optional
state'default' | 'selected' | 'inactive'Optional
swatchShape'line' | 'square'Optional
swatchVariant'default' | 'dash'Optional

ChartLegendSection

ChartLegendSection props
PropTypeRequirement
childrenChartLegendChildRequired
direction'vertical' | 'horizontal'Optional
size'md' | 'sm'Optional

ChartLegendSwatch

ChartLegendSwatch props
PropTypeRequirement
seriesColorstringOptional
shape'line' | 'square'Optional
size'md' | 'sm'Optional
variant'default' | 'dash'Optional

ChartTooltip

ChartTooltip props
PropTypeRequirement
childrenChartTooltipItemElement | readonly ChartTooltipItemElement[]Required
datestringRequired

ChartTooltipItem

ChartTooltipItem props
PropTypeRequirement
seriesColorstringOptional
labelstringRequired
valuestringRequired

Type reference

Show full types

Full TypeScript definitions, including prop combinations and inherited props.

import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactElement } from 'react';

type DataAttributes = {
    [key: `data-${string}`]: boolean | number | string | undefined;
};

type SpanProps = HTMLAttributes<HTMLSpanElement> & DataAttributes;

type DivProps = HTMLAttributes<HTMLDivElement> & DataAttributes;

type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & DataAttributes;

export type ChartLegendSwatchShape = 'line' | 'square';

export type ChartLegendSwatchVariant = 'default' | 'dash';

export type ChartLegendSize = 'md' | 'sm';

export type ChartLegendState = 'default' | 'selected' | 'inactive';

export type ChartLegendSectionDirection = 'vertical' | 'horizontal';

type SeriesColorProps = {
    seriesColor?: string;
};

export type ChartLegendSwatchProps = Omit<SpanProps, 'aria-hidden' | 'children' | 'color' | 'contentEditable' | 'tabIndex'> & SeriesColorProps & {
    shape?: ChartLegendSwatchShape;
    size?: ChartLegendSize;
    variant?: ChartLegendSwatchVariant;
};

export type ChartLegendProps = Omit<ButtonProps, 'aria-selected' | 'children' | 'color' | 'disabled' | 'role' | 'type'> & SeriesColorProps & {
    label: string;
    size?: ChartLegendSize;
    state?: ChartLegendState;
    swatchShape?: ChartLegendSwatchShape;
    swatchVariant?: ChartLegendSwatchVariant;
    value?: string;
};

type ChartLegendElement = ReactElement<ChartLegendProps>;

type ChartLegendChild = ChartLegendElement | readonly ChartLegendChild[];

export type ChartLegendSectionProps = Omit<DivProps, 'children' | 'role'> & {
    children: ChartLegendChild;
    direction?: ChartLegendSectionDirection;
    size?: ChartLegendSize;
};

export type ChartTooltipItemProps = Omit<DivProps, 'children' | 'color'> & SeriesColorProps & {
    label: string;
    value: string;
};

type ChartTooltipItemElement = ReactElement<ChartTooltipItemProps>;

export type ChartTooltipProps = Omit<DivProps, 'children'> & {
    children: ChartTooltipItemElement | readonly ChartTooltipItemElement[];
    date: string;
};

export declare const ChartLegendSwatch: import("react").ForwardRefExoticComponent<Omit<SpanProps, "tabIndex" | "contentEditable" | "color" | "aria-hidden" | "children"> & SeriesColorProps & {
    shape?: ChartLegendSwatchShape;
    size?: ChartLegendSize;
    variant?: ChartLegendSwatchVariant;
} & import("react").RefAttributes<HTMLSpanElement>>;

export declare const ChartLegend: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "role" | "color" | "aria-selected" | "children" | "disabled" | "type"> & SeriesColorProps & {
    label: string;
    size?: ChartLegendSize;
    state?: ChartLegendState;
    swatchShape?: ChartLegendSwatchShape;
    swatchVariant?: ChartLegendSwatchVariant;
    value?: string;
} & import("react").RefAttributes<HTMLButtonElement>>;

export declare const ChartLegendSection: import("react").ForwardRefExoticComponent<Omit<DivProps, "role" | "children"> & {
    children: ChartLegendChild;
    direction?: ChartLegendSectionDirection;
    size?: ChartLegendSize;
} & import("react").RefAttributes<HTMLDivElement>>;

export declare const ChartTooltipItem: import("react").ForwardRefExoticComponent<Omit<DivProps, "color" | "children"> & SeriesColorProps & {
    label: string;
    value: string;
} & import("react").RefAttributes<HTMLDivElement>>;

export declare const ChartTooltip: import("react").ForwardRefExoticComponent<Omit<DivProps, "children"> & {
    children: ChartTooltipItemElement | readonly ChartTooltipItemElement[];
    date: string;
} & import("react").RefAttributes<HTMLDivElement>>;