Skip to main content
Important: LayerChart v2 is still in pre-release and is actively evolving. Only use if you’re comfortable with potential breaking changes before stable v2.Your feedback will be invaluable in shaping the release and features. Current development status can be tracked here.
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 other components are 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 ChartTooltip, when and where you need it 
<script lang="ts">
  import * as Chart from "$lib/components/ui/chart/index.js";
  import { BarChart } from "layerchart";

  const data = [
    // ...
  ];
</script>

<Chart.Container>
  <BarChart {data} x="date" y="value">
    {#snippet tooltip()}
      <Chart.Tooltip />
    {/snippet}
  </BarChart>
</Chart.Container>
We do not wrap LayerChart. This means you’re not locked into an abstraction. When a new LayerChart version is released, you can follow the official upgrade path to upgrade your charts. The components are yours.

​
Installation

npx shadcn-svelte@next add chart

​
Your First Chart

Let’s build your first chart. We’ll build a bar chart with an axis, grid, tooltip, and legend.
1

Define 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 dataKey prop 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>
2

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>
3

Build your chart

You can now build your chart using LayerChart components. We’re using the BarChart component in this example, which is one of LayerChart’s “Simplified Charts”.These components handle a lot of the common chart scaffolding for you, while allowing you to customize them to your liking.

​
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 works independently for cases where your data or color tokens live remotely or in a different format. 
<script lang="ts">
  import MonitorIcon from "@lucide/svelte/icons/monitor";
  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 has 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

1

Define colors in CSS

src/routes/layout.css
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  /* ... */
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  /* ... */
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
}
2

Add color to chartConfig

<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. 
<script lang="ts">
  const chartConfig = {
    desktop: {
      label: "Desktop",
      color: "#2563eb",
    },
  } satisfies Chart.ChartConfig;
</script>

​
Using Colors

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

​
Components

<Bar fill="var(--color-desktop)" />

​
Chart Data

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

​
Tailwind

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

​
Tooltip

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.
PropTypeDescription
labelKeystringThe config or data key to use for the label.
nameKeystringThe config or data key to use for the name.
indicatordot line or dashedThe indicator style for the tooltip.
hideLabelbooleanWhether to hide the label.
hideIndicatorbooleanWhether to hide the indicator.
labelstringA custom label for the tooltip
labelFormatterfunctionA function to format the label.
formatterSnippetA 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 ChartConfig;
</script>

<Chart.Tooltip labelKey="visitors" nameKey="browser" />
This will use Total Visitors for label and Chrome and Safari for the tooltip names.

​
Links

Build docs developers (and LLMs) love

Get started for freeTalk to us