svelte-chartjs

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

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