RadCN
Displayreadycomponentready

Chart

Dependency-free SVG chart primitives for grouped bars, grid lines, axis ticks, legends, and explicit tooltip content.

Importimport { ChartBarSeries, ChartContainer, ChartLegend, ChartTooltip } from 'radcn/chart'
Preview

Live package example

Render the six shadcn Chart component examples as Remix 3-native SVG and explicit content composition.

Component Examples

Render the six shadcn Chart component examples as Remix 3-native SVG and explicit content composition.

Preview
Default
Grouped bars share one dependency-free SVG coordinate system.
Grid
Grid lines are package-owned SVG marks.
Axis
Month ticks are rendered as accessible server HTML/SVG.
Legend
Legend rows compose beside the chart instead of reading a Recharts payload.
Tooltip
Tooltip rows are explicit RadCN content.
Tooltip Anatomy
Indicators, hidden labels, and formatted values are explicit props.
Page Views
Desktop12,486
Mobile8,420
Chrome1,286
Single metric
Desktop12,486
Chrome1,286
import {
  ChartBarSeries,
  ChartContainer,
  ChartLegend,
  ChartLegendItem,
  ChartTooltip,
  ChartTooltipItem,
  type ChartConfig,
  type ChartSeries,
} from 'radcn/chart'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from 'radcn/card'

const labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
const series: ChartSeries[] = [
  { name: 'desktop', label: 'Desktop', values: [186, 305, 237, 73, 209, 214] },
  { name: 'mobile', label: 'Mobile', values: [80, 200, 120, 190, 130, 140] },
]
const config: ChartConfig = {
  desktop: { color: '#2563eb', label: 'Desktop' },
  mobile: { color: '#60a5fa', label: 'Mobile' },
}

export function ChartPreview() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Device traffic</CardTitle>
        <CardDescription>January - June 2024</CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer ariaLabel="Device traffic chart" config={config} title="Device traffic">
          <ChartBarSeries labels={labels} name="desktop" series={series} showGrid showXAxis values={[]} />
          <ChartTooltip label="June">
            <ChartTooltipItem color="#2563eb" indicator="line" label="Desktop" name="desktop" value="214 visitors" />
            <ChartTooltipItem color="#60a5fa" indicator="line" label="Mobile" name="mobile" value="140 visitors" />
          </ChartTooltip>
          <ChartLegend>
            <ChartLegendItem color="#2563eb" name="desktop">Desktop</ChartLegendItem>
            <ChartLegendItem color="#60a5fa" name="mobile">Mobile</ChartLegendItem>
          </ChartLegend>
        </ChartContainer>
        <ChartTooltip hideLabel label="Browser">
          <ChartTooltipItem color="#22c55e" indicator="dashed" label="Chrome" name="chrome" value="1,286" />
          <ChartTooltipItem hideIndicator label="Firefox" name="firefox" value="1,000" />
        </ChartTooltip>
      </CardContent>
    </Card>
  )
}

Installation

Intended future install command. RadCN is private and not published to npm yet, so this snippet documents the target user-facing API rather than something external consumers can run today.

pnpm add radcn # intended future package
import { ChartBarSeries, ChartContainer, ChartLegend, ChartTooltip } from 'radcn/chart'

Theming

RadCN tokens read the resolved theme from the document. Store the user's preference separately, then resolve system preferences to a concrete light or dark theme before setting package tokens.

<html data-radcn-theme-mode="system" data-radcn-theme="dark">
  ...
</html>

Accessibility

  • ChartContainer renders a named figure with role="img", visible title text, and optional description wiring.
  • Bars, ticks, grid lines, legends, and tooltips are server-rendered SVG/HTML, so the chart is inspectable without client JavaScript.
  • Tooltip content is authored explicitly, which keeps labels and values visible to assistive technology instead of depending on a hover payload.

Customization

  • ChartContainer config writes chart-scoped CSS variables, so multiple series can share stable colors across bars, legends, and tooltips.
  • ChartBarSeries supports grouped multi-series bars, optional grid lines, optional x-axis ticks, and the existing single-series values API.
  • ChartTooltipItem supports dot, line, dashed, and hidden indicators with public data hooks for app CSS.
  • Charts compose naturally inside Card, CardHeader, CardContent, and CardFooter without making Card a Chart dependency.

Remix 3 Notes

  • RadCN does not depend on Recharts. Recharts ResponsiveContainer maps to SVG viewBox sizing and RadCN CSS constraints.
  • React payload objects, formatter callbacks, and chart context map to explicit props, formatted values, and app-owned state.
  • lucide icons and upstream callout SVGs are presentation choices for apps, not Chart package dependencies.
  • The 70 chart gallery examples remain unresolved and will be implemented family by family after the component example surface is stable.