Chart

Beautiful charts. Built using LayerChart. Copy and paste into your apps.

Introducing Charts. A collection of chart components that you can copy and paste into your apps.

Charts are designed to look great out of the box. They work well with the other components and are fully customizable to fit your project.

Browse the Charts Library.

Component

We use LayerChart under the hood.

We designed the chart component with composition in mind. You build your charts using LayerChart components and only bring in custom components, such as Chart.Tooltip, when and where you need it.

<script lang="ts">
  import * as Chart from "$lib/components/ui/chart/index.js"
  import { scaleBand } from "d3-scale"
  import { BarChart } from "layerchart"
</script>
 
<Chart.Container config={chartConfig} class="min-h-[200px] w-full">
  <BarChart data={chartData} x="month" seriesLayout="group" series={[...]}>
    {#snippet tooltip()}
      <Chart.Tooltip />
    {/snippet}
  </BarChart>
</Chart.Container>

The components are yours.

Installation


pnpm dlx shadcn@latest add @force-ui-svelte/chart

Your First Chart

Let's build your first chart. We'll build a bar chart, add a grid, axis, tooltip and legend.

Start by defining your data

The following data represents the number of desktop and mobile users for each month.

Note: Your data can be in any shape. You are not limited to the shape of the data below. Use the x and series props to map your data to the chart.

lib/components/example-chart.svelte

<script lang="ts">
  const chartData = [
    { month: "January", desktop: 186, mobile: 80 },
    { month: "February", desktop: 305, mobile: 200 },
    { month: "March", desktop: 237, mobile: 120 },
    { month: "April", desktop: 73, mobile: 190 },
    { month: "May", desktop: 209, mobile: 130 },
    { month: "June", desktop: 214, mobile: 140 },
  ];
</script>

Define your chart config

The chart config holds configuration for the chart. This is where you place human-readable strings, such as labels, icons and color tokens for theming.

lib/components/example-chart.svelte

<script lang="ts">
  import * as Chart from "$lib/components/ui/chart/index.js";
 
  const chartConfig = {
    desktop: {
      label: "Desktop",
      color: "#2563eb",
    },
    mobile: {
      label: "Mobile",
      color: "#60a5fa",
    },
  } satisfies Chart.ChartConfig;
</script>

Build your chart

You can now build your chart using LayerChart components.

Important: Remember to set a min-h-[VALUE] on the Chart.Container component. This is required for the chart to be responsive.

Add a Grid

Let's add a grid to the chart.

Set the `axis` prop to `"both"` to show both axes with grid lines.

<BarChart
  data={chartData}
  x="month"
  axis="both"
  seriesLayout="group"
  series={[...]}
/>

Add an Axis

To add an x-axis to the chart with formatted ticks, use the props prop on BarChart.

Pass a custom formatter via the `props` prop.

<BarChart
  data={chartData}
  x="month"
  axis="x"
  seriesLayout="group"
  series={[...]}
  props={{
    xAxis: {
      format: (d) => d.slice(0, 3),
    },
  }}
/>

So far we've only used the BarChart component from LayerChart. They look great out of the box thanks to some customization in the chart component.

To add a tooltip, we'll use the custom Chart.Tooltip component from chart.

Add the `Chart.Tooltip` component using the `tooltip` snippet.

<BarChart data={chartData} x="month" axis="x" seriesLayout="group" series={[...]}>
  {#snippet tooltip()}
    <Chart.Tooltip />
  {/snippet}
</BarChart>

Hover to see the tooltips. Easy, right? One component, and we've got a beautiful tooltip.

Add Legend

We'll do the same for the legend. We'll use the legend prop on BarChart.

Set the `legend` prop to `true`.

<BarChart
  data={chartData}
  x="month"
  axis="x"
  seriesLayout="group"
  legend
  series={[...]}
>
  {#snippet tooltip()}
    <Chart.Tooltip />
  {/snippet}
</BarChart>

Done. You've built your first chart! What's next?

Chart Config

The chart config is where you define the labels, icons and colors for a chart.

It is intentionally decoupled from chart data.

This allows you to share config and color tokens between charts. It can also work independently for cases where your data or color tokens live remotely or in a different format.

<script lang="ts">
  import MonitorIcon from "@material-symbols/svg-400/rounded/monitor.svg?component"
  import * as Chart from "$lib/components/ui/chart/index.js";
 
  const chartConfig = {
    desktop: {
      label: "Desktop",
      icon: MonitorIcon,
      // A color like 'hsl(220, 98%, 61%)' or 'var(--color-name)'
      color: "#2563eb",
      // OR a theme object with 'light' and 'dark' keys
      theme: {
        light: "#2563eb",
        dark: "#dc2626",
      },
    },
  } satisfies Chart.ChartConfig;
</script>

Theming

Charts have built-in support for theming. You can use css variables (recommended) or color values in any color format, such as hex, hsl or oklch.

CSS Variables

Define your colors in your css file

app/globals.css

@layer base {
  :root {
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
  }
 
  .dark {
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
  }
}

Add the color to your `chartConfig`

lib/components/example-chart.svelte

<script lang="ts">
  const chartConfig = {
    desktop: {
      label: "Desktop",
      color: "var(--chart-1)",
    },
    mobile: {
      label: "Mobile",
      color: "var(--chart-2)",
    },
  } satisfies Chart.ChartConfig;
</script>

hex, hsl or oklch

You can also define your colors directly in the chart config. Use the color format you prefer.

lib/components/example-chart.svelte

<script lang="ts">
  const chartConfig = {
    desktop: {
      label: "Desktop",
      color: "#2563eb",
    },
    mobile: {
      label: "Mobile",
      color: "hsl(220, 98%, 61%)",
    },
    tablet: {
      label: "Tablet",
      color: "oklch(0.5 0.2 240)",
    },
    laptop: {
      label: "Laptop",
      color: "var(--chart-2)",
    },
  } satisfies Chart.ChartConfig;
</script>

Using Colors

To use the theme colors in your chart, reference the colors using the format var(--color-KEY).

Components

<BarChart series={[{ key: "desktop", color: "var(--color-desktop)" }]} />

Chart Data

lib/components/example-chart.svelte

const chartData = [
  { browser: "chrome", visitors: 275, color: "var(--color-chrome)" },
  { browser: "safari", visitors: 200, color: "var(--color-safari)" },
]

Tailwind

lib/components/example-chart.svelte

<label class="fill-(--color-desktop)" />

A chart tooltip contains a label, name, indicator and value. You can use a combination of these to customize your tooltip.

You can turn on/off any of these using the hideLabel, hideIndicator props and customize the indicator style using the indicator prop.

Use labelKey and nameKey to use a custom key for the tooltip label and name.

Chart comes with the <Chart.Tooltip> component. You can use this component to add custom tooltips to your chart.

Props

Use the following props to customize the tooltip.

Prop	Type	Description
`labelKey`	string	The config or data key to use for the label.
`nameKey`	string	The config or data key to use for the name.
`indicator`	`dot` `line` or `dashed`	The indicator style for the tooltip.
`hideLabel`	boolean	Whether to hide the label.
`hideIndicator`	boolean	Whether to hide the indicator.
`label`	string	A custom label for the tooltip.
`labelFormatter`	function	A function to format the label.
`formatter`	Snippet	A snippet to provide flexible rendering of the tooltip.

Colors

Colors are automatically referenced from the chart config.

Custom

To use a custom key for tooltip label and names, use the labelKey and nameKey props.

<script lang="ts">
  const chartData = [
    { browser: "chrome", visitors: 187, color: "var(--color-chrome)" },
    { browser: "safari", visitors: 200, color: "var(--color-safari)" },
  ];
 
  const chartConfig = {
    visitors: {
      label: "Total Visitors",
    },
    chrome: {
      label: "Chrome",
      color: "var(--chart-1)",
    },
    safari: {
      label: "Safari",
      color: "var(--chart-2)",
    },
  } satisfies Chart.ChartConfig;
</script>
 
<Chart.Tooltip labelKey="visitors" nameKey="browser" />

This will use Total Visitors for label and Chrome and Safari for the tooltip names.

Legend

You can use the legend prop on BarChart to add a legend to your chart.

lib/components/example-chart.svelte

<BarChart legend series={[...]} />

Colors

Colors are automatically referenced from the chart config.

Custom

To use a custom key for legend names, configure the label in your chartConfig.

<script lang="ts">
  const chartConfig = {
    chrome: {
      label: "Chrome",
      color: "var(--chart-1)",
    },
    safari: {
      label: "Safari",
      color: "var(--chart-2)",
    },
  } satisfies Chart.ChartConfig;
</script>

Accessibility

You can improve accessibility by providing meaningful labels in your chart config.

LayerChart handles keyboard and screen reader support through its built-in accessibility features.

Carousel Checkbox

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.

Chart

Start by defining your data

Define your chart config

Build your chart

Set the axis prop to "both" to show both axes with grid lines.

Pass a custom formatter via the props prop.

Add the Chart.Tooltip component using the tooltip snippet.

Set the legend prop to true.

Define your colors in your css file

Add the color to your chartConfig

Set the `axis` prop to `"both"` to show both axes with grid lines.

Pass a custom formatter via the `props` prop.

Add the `Chart.Tooltip` component using the `tooltip` snippet.

Set the `legend` prop to `true`.

Add the color to your `chartConfig`