🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Chart

ChartContainer is a wrapper component for Recharts charts that provides consistent styling and theming.

This component handles responsive sizing, theme-aware color configuration, and consistent styling across chart elements. It accepts a config object that defines colors, labels, and icons for each data series, which are automatically applied to tooltips and legends for consistent presentation.

Use ChartContainer as the root wrapper for any Recharts chart (LineChart, BarChart, AreaChart, etc.) to ensure proper styling, theming, and responsive behavior. The container includes pre-configured styles for axes, grids, tooltips, and data points that integrate with your design system's tokens.

Example

"use client"

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@strongtie/design-system/chart"
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "#2563eb",
  },
} satisfies ChartConfig

export function ChartDefault() {
  return (
    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
      <BarChart accessibilityLayer data={chartData}>
        <CartesianGrid vertical={false} />
        <XAxis
          dataKey="month"
          tickLine={false}
          tickMargin={10}
          axisLine={false}
          tickFormatter={(value) => value.slice(0, 3)}
        />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
      </BarChart>
    </ChartContainer>
  )
}

Installation


npm install @strongtie/design-system

import { Chart } from "@strongtie/design-system/chart"

Components

This module exports the following components:

ChartContainer
Tooltip
ChartTooltipContent
Legend
componentDidMount
componentDidUpdate
ChartLegendContent
ChartStyle

Props

`<ChartContainer>`

Prop	Type	Default	Description
`config` *	`ChartConfig`	-

`<Tooltip>`

Prop	Type	Default	Description
`active`	`boolean`	-	If true, then Tooltip is always displayed, once an activeIndex is set by mouse over, or programmatically. If false, then Tooltip is never displayed. If active is undefined, Recharts will control when the Tooltip displays. This includes mouse and keyboard controls.
`allowEscapeViewBox`	`AllowInDimension`	-
`animationDuration`	`number`	-
`animationEasing`	`ease` \| `ease-in` \| `ease-out` \| `ease-in-out` \| `linear`	-
`content`	`ContentType<TValue, TName>`	-
`coordinate`	`Partial<Coordinate>`	-
`cursor`	`boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| SVGProps<...`	-
`defaultIndex`	`number`	-
`filterNull`	`boolean`	-
`includeHidden`	`boolean`	-	If true, then Tooltip will information about hidden series (defaults to false). Interacting with the hide property of Area, Bar, Line, Scatter.
`isAnimationActive`	`boolean`	-
`offset`	`number`	-
`payloadUniqBy`	`UniqueOption<Payload<TValue, TName>>`	-
`position`	`Partial<Coordinate>`	-
`reverseDirection`	`AllowInDimension`	-
`shared`	`boolean`	-
`trigger`	`hover` \| `click`	-
`useTranslate3d`	`boolean`	-
`viewBox`	`CartesianViewBox`	-
`wrapperStyle`	`CSSProperties`	-

`<ChartTooltipContent>`

Prop	Type	Default	Description
`active`	`boolean`	-	If true, then Tooltip is always displayed, once an activeIndex is set by mouse over, or programmatically. If false, then Tooltip is never displayed. If active is undefined, Recharts will control when the Tooltip displays. This includes mouse and keyboard controls.
`allowEscapeViewBox`	`AllowInDimension`	-
`animationDuration`	`number`	-
`animationEasing`	`ease` \| `ease-in` \| `ease-out` \| `ease-in-out` \| `linear`	-
`content`	`(ContentType<ValueType, NameType> & string)`	-
`coordinate`	`Partial<Coordinate>`	-
`cursor`	`boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| SVGProps<...`	-
`defaultIndex`	`number`	-
`filterNull`	`boolean`	-
`hideIndicator`	`boolean`	`false`
`hideLabel`	`boolean`	`false`
`includeHidden`	`boolean`	-	If true, then Tooltip will information about hidden series (defaults to false). Interacting with the hide property of Area, Bar, Line, Scatter.
`indicator`	`line` \| `dot` \| `dashed`	`dot`
`isAnimationActive`	`boolean`	-
`labelKey`	`string`	-
`nameKey`	`string`	-
`offset`	`number`	-
`payloadUniqBy`	`UniqueOption<Payload<ValueType, NameType>>`	-
`position`	`Partial<Coordinate>`	-
`reverseDirection`	`AllowInDimension`	-
`shared`	`boolean`	-
`trigger`	`hover` \| `click`	-
`useTranslate3d`	`boolean`	-
`viewBox`	`CartesianViewBox`	-
`wrapperStyle`	`CSSProperties`	-

`<Legend>`

Prop	Type	Default
`chartHeight`	`number`	-
`chartWidth`	`number`	-
`dangerouslySetInnerHTML`	`{ __html: string; }`	-
`margin`	`{ top?: number; left?: number; bottom?: number \| undefined; right?: number \| und...`	-
`onAbort`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onAbortCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onAnimationEnd`	`AdaptChildAnimationEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onAnimationEndCapture`	`AdaptChildAnimationEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onAnimationIteration`	`AdaptChildAnimationEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onAnimationIterationCapture`	`AdaptChildAnimationEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onAnimationStart`	`AdaptChildAnimationEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onAnimationStartCapture`	`AdaptChildAnimationEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onAuxClick`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onAuxClickCapture`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onBBoxUpdate`	`((box: DOMRect \| null) => void)`	-
`onBeforeInput`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onBeforeInputCapture`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onBlur`	`AdaptChildFocusEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onBlurCapture`	`AdaptChildFocusEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onCanPlay`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onCanPlayCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onCanPlayThrough`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onCanPlayThroughCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onChange`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onChangeCapture`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onClickCapture`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onCompositionEnd`	`AdaptChildCompositionEventHandler<any, ReactElement<unknown, string \| JSXElement...`	-
`onCompositionEndCapture`	`AdaptChildCompositionEventHandler<any, ReactElement<unknown, string \| JSXElement...`	-
`onCompositionStart`	`AdaptChildCompositionEventHandler<any, ReactElement<unknown, string \| JSXElement...`	-
`onCompositionStartCapture`	`AdaptChildCompositionEventHandler<any, ReactElement<unknown, string \| JSXElement...`	-
`onCompositionUpdate`	`AdaptChildCompositionEventHandler<any, ReactElement<unknown, string \| JSXElement...`	-
`onCompositionUpdateCapture`	`AdaptChildCompositionEventHandler<any, ReactElement<unknown, string \| JSXElement...`	-
`onContextMenu`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onContextMenuCapture`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onCopy`	`AdaptChildClipboardEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onCopyCapture`	`AdaptChildClipboardEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onCut`	`AdaptChildClipboardEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onCutCapture`	`AdaptChildClipboardEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onDoubleClick`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onDoubleClickCapture`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onDrag`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragCapture`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragEnd`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragEndCapture`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragEnter`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragEnterCapture`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragExit`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragExitCapture`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragLeave`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragLeaveCapture`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragOver`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragOverCapture`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragStart`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragStartCapture`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDrop`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDropCapture`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDurationChange`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onDurationChangeCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onEmptied`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onEmptiedCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onEncrypted`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onEncryptedCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onEnded`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onEndedCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onError`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onErrorCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onFocus`	`AdaptChildFocusEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onFocusCapture`	`AdaptChildFocusEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onGotPointerCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onGotPointerCaptureCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onInput`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onInputCapture`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onInvalid`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onInvalidCapture`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onKeyDown`	`AdaptChildKeyboardEventHandler<any, ReactElement<unknown, string \| JSXElementCon...`	-
`onKeyDownCapture`	`AdaptChildKeyboardEventHandler<any, ReactElement<unknown, string \| JSXElementCon...`	-
`onKeyPress`	`AdaptChildKeyboardEventHandler<any, ReactElement<unknown, string \| JSXElementCon...`	-
`onKeyPressCapture`	`AdaptChildKeyboardEventHandler<any, ReactElement<unknown, string \| JSXElementCon...`	-
`onKeyUp`	`AdaptChildKeyboardEventHandler<any, ReactElement<unknown, string \| JSXElementCon...`	-
`onKeyUpCapture`	`AdaptChildKeyboardEventHandler<any, ReactElement<unknown, string \| JSXElementCon...`	-
`onLoad`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onLoadCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onLoadedData`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onLoadedDataCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onLoadedMetadata`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onLoadedMetadataCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onLoadStart`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onLoadStartCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onLostPointerCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onLostPointerCaptureCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onMouseDown`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onMouseDownCapture`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onMouseMove`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onMouseMoveCapture`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onMouseOut`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onMouseOutCapture`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onMouseOver`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onMouseOverCapture`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onMouseUp`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onMouseUpCapture`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onPaste`	`AdaptChildClipboardEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onPasteCapture`	`AdaptChildClipboardEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onPause`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onPauseCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onPlay`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onPlayCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onPlaying`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onPlayingCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onPointerCancel`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerCancelCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerDown`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerDownCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerEnter`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerEnterCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerLeave`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerLeaveCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerMove`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerMoveCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerOut`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerOutCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerOver`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerOverCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerUp`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerUpCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onProgress`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onProgressCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onRateChange`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onRateChangeCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onReset`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onResetCapture`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onScroll`	`AdaptChildUIEventHandler<any, ReactElement<unknown, string \| JSXElementConstruct...`	-
`onScrollCapture`	`AdaptChildUIEventHandler<any, ReactElement<unknown, string \| JSXElementConstruct...`	-
`onSeeked`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onSeekedCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onSeeking`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onSeekingCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onSelect`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onSelectCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onStalled`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onStalledCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onSubmit`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onSubmitCapture`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onSuspend`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onSuspendCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onTimeUpdate`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onTimeUpdateCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onTouchCancel`	`AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onTouchCancelCapture`	`AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onTouchEnd`	`AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onTouchEndCapture`	`AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onTouchMove`	`AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onTouchMoveCapture`	`AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onTouchStart`	`AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onTouchStartCapture`	`AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onTransitionEnd`	`AdaptChildTransitionEventHandler<any, ReactElement<unknown, string \| JSXElementC...`	-
`onTransitionEndCapture`	`AdaptChildTransitionEventHandler<any, ReactElement<unknown, string \| JSXElementC...`	-
`onVolumeChange`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onVolumeChangeCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onWaiting`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onWaitingCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onWheel`	`AdaptChildWheelEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onWheelCapture`	`AdaptChildWheelEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`payloadUniqBy`	`UniqueOption<Payload>`	-
`wrapperStyle`	`CSSProperties`	-

`<ChartLegendContent>`

Prop	Type	Default	Description
`hideIcon`	`boolean`	`false`
`nameKey`	`string`	-

`<ChartStyle>`

Prop	Type	Default	Description
`config` *	`ChartConfig`	-
`id` *	`string`	-

Example

"use client"

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@strongtie/design-system/chart"
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "#2563eb",
  },
} satisfies ChartConfig

export function ChartDefault() {
  return (
    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
      <BarChart accessibilityLayer data={chartData}>
        <CartesianGrid vertical={false} />
        <XAxis
          dataKey="month"
          tickLine={false}
          tickMargin={10}
          axisLine={false}
          tickFormatter={(value) => value.slice(0, 3)}
        />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
      </BarChart>
    </ChartContainer>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

chart-container

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Carousel Checkbox

On This Page

Example Installation Components Props <ChartContainer><Tooltip><ChartTooltipContent><Legend><ChartLegendContent><ChartStyle>Example Styling Classes Accessibility

Contribute

Chart

ChartContainer is a wrapper component for Recharts charts that provides consistent styling and theming.

Example

"use client"

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@strongtie/design-system/chart"
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "#2563eb",
  },
} satisfies ChartConfig

export function ChartDefault() {
  return (
    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
      <BarChart accessibilityLayer data={chartData}>
        <CartesianGrid vertical={false} />
        <XAxis
          dataKey="month"
          tickLine={false}
          tickMargin={10}
          axisLine={false}
          tickFormatter={(value) => value.slice(0, 3)}
        />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
      </BarChart>
    </ChartContainer>
  )
}

Installation


npm install @strongtie/design-system

import { Chart } from "@strongtie/design-system/chart"

Components

This module exports the following components:

ChartContainer
Tooltip
ChartTooltipContent
Legend
componentDidMount
componentDidUpdate
ChartLegendContent
ChartStyle

Props

`<ChartContainer>`

Prop	Type	Default	Description
`config` *	`ChartConfig`	-

`<Tooltip>`

Prop	Type	Default	Description
`active`	`boolean`	-	If true, then Tooltip is always displayed, once an activeIndex is set by mouse over, or programmatically. If false, then Tooltip is never displayed. If active is undefined, Recharts will control when the Tooltip displays. This includes mouse and keyboard controls.
`allowEscapeViewBox`	`AllowInDimension`	-
`animationDuration`	`number`	-
`animationEasing`	`ease` \| `ease-in` \| `ease-out` \| `ease-in-out` \| `linear`	-
`content`	`ContentType<TValue, TName>`	-
`coordinate`	`Partial<Coordinate>`	-
`cursor`	`boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| SVGProps<...`	-
`defaultIndex`	`number`	-
`filterNull`	`boolean`	-
`includeHidden`	`boolean`	-	If true, then Tooltip will information about hidden series (defaults to false). Interacting with the hide property of Area, Bar, Line, Scatter.
`isAnimationActive`	`boolean`	-
`offset`	`number`	-
`payloadUniqBy`	`UniqueOption<Payload<TValue, TName>>`	-
`position`	`Partial<Coordinate>`	-
`reverseDirection`	`AllowInDimension`	-
`shared`	`boolean`	-
`trigger`	`hover` \| `click`	-
`useTranslate3d`	`boolean`	-
`viewBox`	`CartesianViewBox`	-
`wrapperStyle`	`CSSProperties`	-

`<ChartTooltipContent>`

Prop	Type	Default	Description
`active`	`boolean`	-	If true, then Tooltip is always displayed, once an activeIndex is set by mouse over, or programmatically. If false, then Tooltip is never displayed. If active is undefined, Recharts will control when the Tooltip displays. This includes mouse and keyboard controls.
`allowEscapeViewBox`	`AllowInDimension`	-
`animationDuration`	`number`	-
`animationEasing`	`ease` \| `ease-in` \| `ease-out` \| `ease-in-out` \| `linear`	-
`content`	`(ContentType<ValueType, NameType> & string)`	-
`coordinate`	`Partial<Coordinate>`	-
`cursor`	`boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| SVGProps<...`	-
`defaultIndex`	`number`	-
`filterNull`	`boolean`	-
`hideIndicator`	`boolean`	`false`
`hideLabel`	`boolean`	`false`
`includeHidden`	`boolean`	-	If true, then Tooltip will information about hidden series (defaults to false). Interacting with the hide property of Area, Bar, Line, Scatter.
`indicator`	`line` \| `dot` \| `dashed`	`dot`
`isAnimationActive`	`boolean`	-
`labelKey`	`string`	-
`nameKey`	`string`	-
`offset`	`number`	-
`payloadUniqBy`	`UniqueOption<Payload<ValueType, NameType>>`	-
`position`	`Partial<Coordinate>`	-
`reverseDirection`	`AllowInDimension`	-
`shared`	`boolean`	-
`trigger`	`hover` \| `click`	-
`useTranslate3d`	`boolean`	-
`viewBox`	`CartesianViewBox`	-
`wrapperStyle`	`CSSProperties`	-

`<Legend>`

Prop	Type	Default
`chartHeight`	`number`	-
`chartWidth`	`number`	-
`dangerouslySetInnerHTML`	`{ __html: string; }`	-
`margin`	`{ top?: number; left?: number; bottom?: number \| undefined; right?: number \| und...`	-
`onAbort`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onAbortCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onAnimationEnd`	`AdaptChildAnimationEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onAnimationEndCapture`	`AdaptChildAnimationEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onAnimationIteration`	`AdaptChildAnimationEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onAnimationIterationCapture`	`AdaptChildAnimationEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onAnimationStart`	`AdaptChildAnimationEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onAnimationStartCapture`	`AdaptChildAnimationEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onAuxClick`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onAuxClickCapture`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onBBoxUpdate`	`((box: DOMRect \| null) => void)`	-
`onBeforeInput`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onBeforeInputCapture`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onBlur`	`AdaptChildFocusEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onBlurCapture`	`AdaptChildFocusEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onCanPlay`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onCanPlayCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onCanPlayThrough`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onCanPlayThroughCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onChange`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onChangeCapture`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onClickCapture`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onCompositionEnd`	`AdaptChildCompositionEventHandler<any, ReactElement<unknown, string \| JSXElement...`	-
`onCompositionEndCapture`	`AdaptChildCompositionEventHandler<any, ReactElement<unknown, string \| JSXElement...`	-
`onCompositionStart`	`AdaptChildCompositionEventHandler<any, ReactElement<unknown, string \| JSXElement...`	-
`onCompositionStartCapture`	`AdaptChildCompositionEventHandler<any, ReactElement<unknown, string \| JSXElement...`	-
`onCompositionUpdate`	`AdaptChildCompositionEventHandler<any, ReactElement<unknown, string \| JSXElement...`	-
`onCompositionUpdateCapture`	`AdaptChildCompositionEventHandler<any, ReactElement<unknown, string \| JSXElement...`	-
`onContextMenu`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onContextMenuCapture`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onCopy`	`AdaptChildClipboardEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onCopyCapture`	`AdaptChildClipboardEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onCut`	`AdaptChildClipboardEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onCutCapture`	`AdaptChildClipboardEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onDoubleClick`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onDoubleClickCapture`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onDrag`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragCapture`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragEnd`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragEndCapture`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragEnter`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragEnterCapture`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragExit`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragExitCapture`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragLeave`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragLeaveCapture`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragOver`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragOverCapture`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragStart`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDragStartCapture`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDrop`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDropCapture`	`AdaptChildDragEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onDurationChange`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onDurationChangeCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onEmptied`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onEmptiedCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onEncrypted`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onEncryptedCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onEnded`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onEndedCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onError`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onErrorCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onFocus`	`AdaptChildFocusEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onFocusCapture`	`AdaptChildFocusEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onGotPointerCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onGotPointerCaptureCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onInput`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onInputCapture`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onInvalid`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onInvalidCapture`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onKeyDown`	`AdaptChildKeyboardEventHandler<any, ReactElement<unknown, string \| JSXElementCon...`	-
`onKeyDownCapture`	`AdaptChildKeyboardEventHandler<any, ReactElement<unknown, string \| JSXElementCon...`	-
`onKeyPress`	`AdaptChildKeyboardEventHandler<any, ReactElement<unknown, string \| JSXElementCon...`	-
`onKeyPressCapture`	`AdaptChildKeyboardEventHandler<any, ReactElement<unknown, string \| JSXElementCon...`	-
`onKeyUp`	`AdaptChildKeyboardEventHandler<any, ReactElement<unknown, string \| JSXElementCon...`	-
`onKeyUpCapture`	`AdaptChildKeyboardEventHandler<any, ReactElement<unknown, string \| JSXElementCon...`	-
`onLoad`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onLoadCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onLoadedData`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onLoadedDataCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onLoadedMetadata`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onLoadedMetadataCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onLoadStart`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onLoadStartCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onLostPointerCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onLostPointerCaptureCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onMouseDown`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onMouseDownCapture`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onMouseMove`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onMouseMoveCapture`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onMouseOut`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onMouseOutCapture`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onMouseOver`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onMouseOverCapture`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onMouseUp`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onMouseUpCapture`	`AdaptChildMouseEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onPaste`	`AdaptChildClipboardEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onPasteCapture`	`AdaptChildClipboardEventHandler<any, ReactElement<unknown, string \| JSXElementCo...`	-
`onPause`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onPauseCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onPlay`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onPlayCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onPlaying`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onPlayingCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onPointerCancel`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerCancelCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerDown`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerDownCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerEnter`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerEnterCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerLeave`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerLeaveCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerMove`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerMoveCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerOut`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerOutCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerOver`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerOverCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerUp`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onPointerUpCapture`	`AdaptChildPointerEventHandler<any, ReactElement<unknown, string \| JSXElementCons...`	-
`onProgress`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onProgressCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onRateChange`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onRateChangeCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onReset`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onResetCapture`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onScroll`	`AdaptChildUIEventHandler<any, ReactElement<unknown, string \| JSXElementConstruct...`	-
`onScrollCapture`	`AdaptChildUIEventHandler<any, ReactElement<unknown, string \| JSXElementConstruct...`	-
`onSeeked`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onSeekedCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onSeeking`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onSeekingCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onSelect`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onSelectCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onStalled`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onStalledCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onSubmit`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onSubmitCapture`	`AdaptChildFormEventHandler<any, ReactElement<unknown, string \| JSXElementConstru...`	-
`onSuspend`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onSuspendCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onTimeUpdate`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onTimeUpdateCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onTouchCancel`	`AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onTouchCancelCapture`	`AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onTouchEnd`	`AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onTouchEndCapture`	`AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onTouchMove`	`AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onTouchMoveCapture`	`AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onTouchStart`	`AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onTouchStartCapture`	`AdaptChildTouchEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onTransitionEnd`	`AdaptChildTransitionEventHandler<any, ReactElement<unknown, string \| JSXElementC...`	-
`onTransitionEndCapture`	`AdaptChildTransitionEventHandler<any, ReactElement<unknown, string \| JSXElementC...`	-
`onVolumeChange`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onVolumeChangeCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onWaiting`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onWaitingCapture`	`AdaptChildReactEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onWheel`	`AdaptChildWheelEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`onWheelCapture`	`AdaptChildWheelEventHandler<any, ReactElement<unknown, string \| JSXElementConstr...`	-
`payloadUniqBy`	`UniqueOption<Payload>`	-
`wrapperStyle`	`CSSProperties`	-

`<ChartLegendContent>`

Prop	Type	Default	Description
`hideIcon`	`boolean`	`false`
`nameKey`	`string`	-

`<ChartStyle>`

Prop	Type	Default	Description
`config` *	`ChartConfig`	-
`id` *	`string`	-

Example

"use client"

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@strongtie/design-system/chart"
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"

const chartData = [
  { month: "January", desktop: 186 },
  { month: "February", desktop: 305 },
  { month: "March", desktop: 237 },
  { month: "April", desktop: 73 },
  { month: "May", desktop: 209 },
  { month: "June", desktop: 214 },
]

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "#2563eb",
  },
} satisfies ChartConfig

export function ChartDefault() {
  return (
    <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
      <BarChart accessibilityLayer data={chartData}>
        <CartesianGrid vertical={false} />
        <XAxis
          dataKey="month"
          tickLine={false}
          tickMargin={10}
          axisLine={false}
          tickFormatter={(value) => value.slice(0, 3)}
        />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Bar dataKey="desktop" fill="var(--color-desktop)" radius={8} />
      </BarChart>
    </ChartContainer>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

chart-container

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Carousel Checkbox

On This Page

Example Installation Components Props <ChartContainer><Tooltip><ChartTooltipContent><Legend><ChartLegendContent><ChartStyle>Example Styling Classes Accessibility

Contribute