svelte-chartjs

svelte-chartjs

Svelte wrapper for chart.js. Open for PRs and contributions!

Docs   •   Install   •   Usage   •   Available Charts   •   Tree-Shaking   •   Examples   •   Stack Overflow

Documentation

Full documentation and live demos are available at the docs site.

Install

Install this library with peer dependencies:

pnpm add svelte-chartjs chart.js
# or
yarn add svelte-chartjs chart.js
# or
npm i svelte-chartjs chart.js

Usage

<script>
  import { Line } from 'svelte-chartjs';
  import {
    Chart as ChartJS,
    Title,
    Tooltip,
    Legend,
    LineElement,
    LinearScale,
    PointElement,
    CategoryScale,
  } from 'chart.js';

  ChartJS.register(
    Title,
    Tooltip,
    Legend,
    LineElement,
    LinearScale,
    PointElement,
    CategoryScale
  );

  const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'My First dataset',
        fill: true,
        backgroundColor: 'rgba(75,192,192,0.2)',
        borderColor: 'rgba(75,192,192,1)',
        data: [65, 59, 80, 81, 56, 55, 40],
      },
    ],
  };
</script>

<Line {data} options={{ responsive: true }} />

Custom Size

In order for Chart.js to obey the custom size you need to set maintainAspectRatio to false, example:

<Line
  data={data}
  width={100}
  height={50}
  options={{ maintainAspectRatio: false }}
/>

Available Charts

Component	Chart.js Type
Bar	Bar chart
Bubble	Bubble chart
Doughnut	Doughnut chart
Line	Line chart
Pie	Pie chart
PolarArea	Polar area chart
Radar	Radar chart
Scatter	Scatter chart

A generic Chart component is also available. Use the type prop to specify the chart type:

<Chart type="bar" {data} {options} />

Tree-Shaking

Quick Setup

Import chart.js/auto to register everything:

import { Line } from 'svelte-chartjs';
import 'chart.js/auto';

Optimized (Selective Imports)

Import and register only the components you need for a smaller bundle:

import { Line } from 'svelte-chartjs';
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  LineElement,
  LinearScale,
  PointElement,
  CategoryScale,
} from 'chart.js';

ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale);

Typed chart components (e.g. Pie, Bar) automatically register their controller, so you don't need to register it yourself. For example, when using Pie, you don't need to register PieController explicitly.

For a full list of available imports, see the Chart.js integration docs.

Accessing the Chart Instance

Use bind:chart to get a reference to the underlying Chart.js instance:

<script>
  import { Line } from 'svelte-chartjs';

  let chart;
</script>

<Line bind:chart {data} {options} />

Event Utilities

Three helper functions are exported for extracting chart elements from pointer events:

• getDatasetAtEvent(chart, event) — returns the dataset at the event point
• getElementAtEvent(chart, event) — returns the nearest element at the event point
• getElementsAtEvent(chart, event) — returns all elements at the event point

<script>
  import {
    Chart,
    getDatasetAtEvent,
    getElementAtEvent,
    getElementsAtEvent,
  } from 'svelte-chartjs';

  let chart;

  function onClick(event) {
    if (!chart) return;

    const dataset = getDatasetAtEvent(chart, event);
    const element = getElementAtEvent(chart, event);
    const elements = getElementsAtEvent(chart, event);

    console.log({ dataset, element, elements });
  }
</script>

<Chart bind:chart type="bar" onclick={onClick} {data} {options} />

Examples

• Bar Chart
• Bubble Chart
• Doughnut Chart
• Line Chart
• Pie Chart
• PolarArea Chart
• Radar Chart
• Scatter Chart
• Chart Instance
• Events Handling

Compatibility

Dependency	Version
Svelte	^5.0.0
Chart.js	^3.5.0 || ^4.0.0

For Svelte 4 support, use v3.x.

License

MIT