Svelte ChartJS

https://saurav.tech/svelte-chartjs/
Admin
Svelte ChartJS is a typed Svelte wrapper component for Chart.js that enables easy integration of...
Tokens:9,130
Snippets:56
Trust Score:6
Update:6 months ago
Show doc for...
Tokens:
Raw
### Quick Start with Line Chart

Source: https://saurav.tech/svelte-chartjs

A basic example demonstrating how to use the Line component from svelte-chartjs. Ensure all necessary Chart.js components are imported and registered.

```svelte
<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: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
      label: 'Sales',
      data: [65, 59, 80, 81, 56, 55],
      borderColor: 'rgb(75, 192, 192)',
      fill: false,
    }],
  };
</script>

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

--------------------------------

### Usage Example

Source: https://saurav.tech/svelte-chartjs/examples/events

Example of how to integrate svelte-chartjs event handling into a Svelte component.

```APIDOC
## Usage

```svelte
<script>
  import {
    Chart,
    getDatasetAtEvent,
    getElementAtEvent,
    getElementsAtEvent,
  } from 'svelte-chartjs';
  import {
    Chart as ChartJS,
    Tooltip, Legend, BarElement, PointElement,
    LineElement, CategoryScale, LinearScale,
    LineController, BarController,
  } from 'chart.js';

  ChartJS.register(
    LinearScale, CategoryScale, BarElement, PointElement,
    LineElement, Legend, Tooltip, LineController, BarController
  );

  const data = { /* ... */ };
  let chart;

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

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

    if (element.length > 0) {
      const { datasetIndex, index } = element[0];
      console.log(data.labels[index], data.datasets[datasetIndex].data[index]);
    }
  }
</script>

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

--------------------------------

### Configuring Update Mode

Source: https://saurav.tech/svelte-chartjs/guides/reactivity

Example of using the updateMode prop to control transition animations during data updates.

```svelte
<Line {data} updateMode="none" />
```

--------------------------------

### Install svelte-chartjs

Source: https://saurav.tech/svelte-chartjs

Install the svelte-chartjs package along with chart.js using your preferred package manager.

```bash
pnpm add svelte-chartjs chart.js
```

```bash
yarn add svelte-chartjs chart.js
```

```bash
npm i svelte-chartjs chart.js
```

--------------------------------

### Accessing Chart Instance with bind:chart

Source: https://saurav.tech/svelte-chartjs/examples/ref

Use the `bind:chart` directive to get a reference to the Chart.js instance. This reference can then be used in `onMount` or other lifecycle functions to interact with the chart programmatically. Ensure all necessary Chart.js components are registered.

```svelte
<script>
  import { onMount } from 'svelte';
  import { Chart } from 'svelte-chartjs';
  import {
    Chart as ChartJS,
    Tooltip, Legend, BarElement, PointElement,
    LineElement, CategoryScale, LinearScale,
    LineController, BarController,
  } from 'chart.js';

  ChartJS.register(
    LinearScale, CategoryScale, BarElement, PointElement,
    LineElement, Legend, Tooltip, LineController, BarController
  );

  const data = {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
    datasets: [
      {
        type: 'line',
        label: 'Dataset 1',
        borderColor: 'rgb(255, 99, 132)',
        data: [65, 59, 80, 81, 56, 55, 40],
      },
      {
        type: 'bar',
        label: 'Dataset 2',
        backgroundColor: 'rgb(75, 192, 192)',
        data: [28, 48, 40, 19, 86, 27, 90],
      },
    ],
  };

  let chart;

  onMount(() => {
    // Access chart.tooltip, chart.data, etc.
    console.log(chart);
  });
</script>

<Chart bind:chart type="bar" {data} options={{ scales: { y: { beginAtZero: true } } }} />
```

--------------------------------

### Scatter Component API

Source: https://saurav.tech/svelte-chartjs/charts/scatter

Details on how to implement the Scatter component and the available props for configuration.

```APIDOC
## Scatter Component

### Description
The Scatter component renders a Chart.js scatter plot. It requires the registration of necessary Chart.js elements and scales before use.

### Props
- **data** (ChartData<'scatter'>) - Required - The dataset for the scatter plot.
- **options** (ChartOptions<'scatter'>) - Optional - Configuration options for the chart, defaults to {}.
- **plugins** (Plugin<'scatter'>[]) - Optional - Array of Chart.js plugins, defaults to [].
- **updateMode** (UpdateMode) - Optional - Transition mode for chart updates.
- **chart** (Chart) - Optional - Bindable reference to the underlying Chart.js instance.

### Usage Example
```html
<script>
  import { Scatter } from 'svelte-chartjs';
  import { Chart as ChartJS, Title, Tooltip, Legend, LineElement, CategoryScale, LinearScale, PointElement } from 'chart.js';

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

  const data = {
    datasets: [{
      label: 'Dataset',
      data: [{ x: 1, y: 1 }, { x: 2, y: 2 }],
    }],
  };
</script>

<Scatter {data} options={{ responsive: true }} />
```
```

--------------------------------

### Handle Chart.js Click Events

Source: https://saurav.tech/svelte-chartjs/examples/events

Demonstrates importing event utilities and using them within a Svelte component's click handler to retrieve chart interaction data.

```svelte
<script>
  import {
    Chart,
    getDatasetAtEvent,
    getElementAtEvent,
    getElementsAtEvent,
  } from 'svelte-chartjs';
  import {
    Chart as ChartJS,
    Tooltip, Legend, BarElement, PointElement,
    LineElement, CategoryScale, LinearScale,
    LineController, BarController,
  } from 'chart.js';

  ChartJS.register(
    LinearScale, CategoryScale, BarElement, PointElement,
    LineElement, Legend, Tooltip, LineController, BarController
  );

  const data = { /* ... */ };
  let chart;

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

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

    if (element.length > 0) {
      const { datasetIndex, index } = element[0];
      console.log(data.labels[index], data.datasets[datasetIndex].data[index]);
    }
  }
</script>

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

--------------------------------

### Polar Area Chart Usage

Source: https://saurav.tech/svelte-chartjs/charts/polar

Demonstrates how to import and use the PolarArea component with sample data and Chart.js configuration.

```APIDOC
## Polar Area Chart

### Description
This section shows how to use the PolarArea component from svelte-chartjs to render a polar area chart.

### Method
Component Usage

### Endpoint
N/A (Client-side component)

### Parameters
#### Props
- **data** (ChartData<'polarArea'>) - Required - Chart data object.
- **options** (ChartOptions<'polarArea'>) - Optional - Chart.js options for customization. Defaults to `{}`.
- **plugins** (Plugin<'polarArea'>[]) - Optional - Array of Chart.js plugins. Defaults to `[]`.
- **updateMode** (UpdateMode) - Optional - Transition mode for chart updates.
- **chart** (Chart) - Optional - Bindable chart instance.

### Request Example
```html
<script>
  import { PolarArea } from 'svelte-chartjs';
  import {
    Chart as ChartJS,
    Title, Tooltip, Legend, ArcElement, RadialLinearScale,
  } from 'chart.js';

  ChartJS.register(Title, Tooltip, Legend, ArcElement, RadialLinearScale);

  const data = {
    datasets: [{
      data: [300, 50, 100, 40, 120],
      backgroundColor: [
        'rgba(247, 70, 74, 0.5)',
        'rgba(70, 191, 189, 0.5)',
        'rgba(253, 180, 92, 0.5)',
        'rgba(148, 159, 177, 0.5)',
        'rgba(77, 83, 96, 0.5)',
      ],
      label: 'My dataset',
    }],
    labels: ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'],
  };
</script>

<PolarArea {data} options={{ responsive: true }} />
```

### Response
N/A (Client-side component rendering)

### Response Example
N/A (Client-side component rendering)
```

--------------------------------

### Chart Components

Source: https://saurav.tech/svelte-chartjs/api

Overview of the available chart components and their corresponding Chart.js controllers.

```APIDOC
## Chart Components

### Description
Svelte-chartjs provides typed wrapper components for various Chart.js types. Each component automatically registers its own controller.

### Components
- **Bar** - 'bar' - BarController
- **Line** - 'line' - LineController
- **Pie** - 'pie' - PieController
- **Doughnut** - 'doughnut' - DoughnutController
- **Radar** - 'radar' - RadarController
- **PolarArea** - 'polarArea' - PolarAreaController
- **Bubble** - 'bubble' - BubbleController
- **Scatter** - 'scatter' - ScatterController
- **Chart** - any - None (requires 'type' prop)
```

--------------------------------

### Bar Component API

Source: https://saurav.tech/svelte-chartjs/charts/bar

Documentation for the Bar component props and implementation details.

```APIDOC
## Bar Component

### Description
The Bar component is used to render bar charts. It requires specific Chart.js elements to be registered before use.

### Props
- **data** (ChartData<'bar'>) - Required - Chart data object.
- **options** (ChartOptions<'bar'>) - Optional - Chart.js configuration options. Default: {}
- **plugins** (Plugin<'bar'>[]) - Optional - Chart.js plugins. Default: []
- **updateMode** (UpdateMode) - Optional - Transition mode for updates.
- **chart** (Chart) - Optional - Bindable chart instance.

### Request Example
<script>
  import { Bar } from 'svelte-chartjs';
  import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js';

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

  const data = {
    labels: ['Red', 'Blue', 'Yellow'],
    datasets: [{ label: '% of Votes', data: [12, 19, 3] }]
  };
</script>

<Bar {data} options={{ responsive: true }} />
```

--------------------------------

### Import svelte-chartjs modules

Source: https://saurav.tech/svelte-chartjs/api

Standard import statement for components and utility functions.

```typescript
import {
  Chart,
  Line,
  Bar,
  Pie,
  Doughnut,
  Radar,
  PolarArea,
  Bubble,
  Scatter,
  getDatasetAtEvent,
  getElementAtEvent,
  getElementsAtEvent,
} from 'svelte-chartjs';
```

--------------------------------

### Implement a Stacked Bar Chart with svelte-chartjs

Source: https://saurav.tech/svelte-chartjs/examples/stacked-bar

Register necessary Chart.js components and configure the scales object with stacked: true to enable stacking.

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

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

  const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'Dataset 1',
        data: [65, 59, 80, 81, 56, 55, 40],
        backgroundColor: 'rgb(255, 99, 132)',
      },
      {
        label: 'Dataset 2',
        data: [28, 48, 40, 19, 86, 27, 90],
        backgroundColor: 'rgb(75, 192, 192)',
      },
    ],
  };

  const options = {
    responsive: true,
    scales: {
      x: { stacked: true },
      y: { stacked: true },
    },
  };
</script>

<Bar {data} {options} />
```

--------------------------------

### Tree-shakable Chart.js Import

Source: https://saurav.tech/svelte-chartjs

Import and register only the Chart.js components you need for better performance and smaller bundle sizes. Typed chart components automatically register their controllers.

```javascript
import {
  Chart as ChartJS,
  Title, Tooltip, Legend,
  LineElement, LinearScale, PointElement, CategoryScale,
} from 'chart.js';

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

--------------------------------

### Svelte Line Chart Implementation

Source: https://saurav.tech/svelte-chartjs/charts/line

Use this snippet to render a basic line chart. Ensure Chart.js is registered with all necessary components like Title, Tooltip, Legend, LineElement, LinearScale, PointElement, and CategoryScale.

```svelte
<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(225, 204, 230, .3)',
      borderColor: 'rgb(205, 130, 158)',
      data: [65, 59, 80, 81, 56, 55, 40],
    }],
  };
</script>

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

```

--------------------------------

### Create Gradient Fill for Line Chart

Source: https://saurav.tech/svelte-chartjs/examples/gradient

Use `bind:chart` to access the canvas context and create a linear gradient. Apply this gradient as the `backgroundColor` for the dataset. Ensure the Filler plugin is registered and the gradient is created after the chart mounts.

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

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

  let chart = $state(null);

  let data = $state({
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'Sales',
      data: [65, 59, 80, 81, 56, 55, 40],
      fill: true,
      borderColor: 'rgb(75, 192, 192)',
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
      tension: 0.4,
    }],
  });

  onMount(() => {
    if (!chart) return;

    const ctx = chart.ctx;
    const gradient = ctx.createLinearGradient(0, 0, 0, chart.chartArea.bottom);
    gradient.addColorStop(0, 'rgba(75, 192, 192, 0.6)');
    gradient.addColorStop(1, 'rgba(75, 192, 192, 0.0)');

    data = {
      ...data,
      datasets: [{ ...data.datasets[0], backgroundColor: gradient }],
    };
  });
</script>

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

```

--------------------------------

### Updating Chart Data with Svelte State

Source: https://saurav.tech/svelte-chartjs/guides/reactivity

Demonstrates how to trigger a chart update by reassigning the data object using Svelte's $state.

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

  let data = $state({
    labels: ['Jan', 'Feb', 'Mar'],
    datasets: [{ label: 'Sales', data: [10, 20, 30] }],
  });

  function addPoint() {
    data = {
      ...data,
      labels: [...data.labels, 'Apr'],
      datasets: data.datasets.map((ds) => ({
        ...ds,
        data: [...ds.data, 40],
      })),
    };
  }
</script>

<button onclick={addPoint}>Add</button>
<Line {data} options={{ responsive: true }} />
```

--------------------------------

### Implement a Pie Chart in Svelte

Source: https://saurav.tech/svelte-chartjs/charts/pie

Requires registering Chart.js components before rendering the Pie component. Ensure all necessary Chart.js elements are imported and registered.

```svelte
<script>
  import { Pie } from 'svelte-chartjs';
  import {
    Chart as ChartJS,
    Title, Tooltip, Legend, ArcElement, CategoryScale,
  } from 'chart.js';

  ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale);

  const data = {
    labels: ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'],
    datasets: [{
      data: [300, 50, 100, 40, 120],
      backgroundColor: ['#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'],
    }],
  };
</script>

<Pie {data} options={{ responsive: true }} />
```

--------------------------------

### Pie Chart Usage

Source: https://saurav.tech/svelte-chartjs/charts/pie

This snippet demonstrates how to import and use the Pie Chart component in a Svelte application. It includes necessary Chart.js imports and registration, data configuration, and component rendering.

```APIDOC
## Pie Chart

### Description

This section provides a usage example for the Pie Chart component from the svelte-chartjs library. It shows how to import the component, register necessary Chart.js modules, define chart data, and render the chart.

### Method

Component Usage

### Endpoint

N/A (Client-side component)

### Parameters

#### Props

- **data** (ChartData<'pie'>) - Required - Chart data for the pie chart.
- **options** (ChartOptions<'pie'>) - Optional - Chart.js options for customization. Defaults to `{}`.
- **plugins** (Plugin<'pie'>[]) - Optional - Chart.js plugins to be used with the chart. Defaults to `[]`.
- **updateMode** (UpdateMode) - Optional - Specifies the transition mode for chart updates.
- **chart** (Chart) - Optional - Allows binding to the chart instance.

### Request Example

```html
<script>
  import { Pie } from 'svelte-chartjs';
  import {
    Chart as ChartJS,
    Title, Tooltip, Legend, ArcElement, CategoryScale,
  } from 'chart.js';

  ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale);

  const data = {
    labels: ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'],
    datasets: [{
      data: [300, 50, 100, 40, 120],
      backgroundColor: ['#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'],
    }],
  };
</script>

<Pie {data} options={{ responsive: true }} />
```

### Response

N/A (Client-side component rendering)

#### Success Response (200)

N/A

#### Response Example

N/A
```

--------------------------------

### Bubble Chart Component

Source: https://saurav.tech/svelte-chartjs/charts/bubble

Usage and property documentation for the Bubble chart component.

```APIDOC
## Bubble Chart Component

### Description
The Bubble component allows for rendering bubble charts in Svelte applications using Chart.js.

### Props
- **data** (ChartData<'bubble'>) - Required - Chart data object containing datasets.
- **options** (ChartOptions<'bubble'>) - Optional - Chart.js configuration options. Default: {}
- **plugins** (Plugin<'bubble'>[]) - Optional - Array of Chart.js plugins. Default: []
- **updateMode** (UpdateMode) - Optional - Transition mode for chart updates.
- **chart** (Chart) - Optional - Bindable chart instance.

### Usage Example
```html
<script>
  import { Bubble } from 'svelte-chartjs';
  import { Chart as ChartJS, Title, Tooltip, Legend, PointElement, LinearScale } from 'chart.js';

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

  const data = {
    labels: 'Bubble',
    datasets: [
      {
        label: 'John',
        data: [{ x: 3, y: 7, r: 10 }],
        backgroundColor: '#ff6384',
      }
    ]
  };
</script>

<Bubble {data} options={{ responsive: true }} />
```
```

--------------------------------

### Svelte Bar Chart Implementation

Source: https://saurav.tech/svelte-chartjs/charts/bar

Use this snippet to render a bar chart. Ensure Chart.js components are registered before use. The 'data' prop is required and defines the chart's labels and datasets.

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

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

  const data = {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '% of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor': [
        'rgba(255, 134, 159, 0.4)',
        'rgba(98, 182, 239, 0.4)',
        'rgba(255, 218, 128, 0.4)',
        'rgba(113, 205, 205, 0.4)',
        'rgba(170, 128, 252, 0.4)',
        'rgba(255, 177, 101, 0.4)',
      ],
      borderWidth: 2,
    }],
  };
</script>

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

```

--------------------------------

### Create Mixed Chart with Line and Bar Types

Source: https://saurav.tech/svelte-chartjs/examples/multitype

Use the generic Chart component and specify 'type' on each dataset to combine different chart types. Ensure all necessary controllers (e.g., LineController, BarController) and elements are registered with ChartJS.

```javascript
<script>
  import { Chart } from 'svelte-chartjs';
  import {
    Chart as ChartJS,
    Tooltip, Legend, BarElement, PointElement,
    LineElement, CategoryScale, LinearScale,
    LineController, BarController,
  } from 'chart.js';

  ChartJS.register(
    Tooltip, Legend, BarElement, PointElement,
    LineElement, CategoryScale, LinearScale,
    LineController, BarController
  );

  const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        type: 'line',
        label: 'Line Dataset',
        borderColor: 'rgb(255, 99, 132)',
        data: [65, 59, 80, 81, 56, 55, 40],
        fill: false,
      },
      {
        type: 'bar',
        label: 'Bar Dataset',
        backgroundColor: 'rgba(75, 192, 192, 0.5)',
        data: [28, 48, 40, 19, 86, 27, 90],
      },
    ],
  };
</script>

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

```

--------------------------------

### Utility Functions

Source: https://saurav.tech/svelte-chartjs/api

Functions for interacting with chart elements based on events.

```APIDOC
## Utility Functions

### getDatasetAtEvent(chart, event)
Returns all elements belonging to the same dataset as the clicked element.
- **Signature**: function getDatasetAtEvent(chart: Chart, event: PointerEvent): InteractionItem[]

### getElementAtEvent(chart, event)
Returns the single nearest element to the click point.
- **Signature**: function getElementAtEvent(chart: Chart, event: PointerEvent): InteractionItem[]

### getElementsAtEvent(chart, event)
Returns all elements at the same data index as the clicked element.
- **Signature**: function getElementsAtEvent(chart: Chart, event: PointerEvent): InteractionItem[]
```

--------------------------------

### Radar Chart Implementation in Svelte

Source: https://saurav.tech/svelte-chartjs/charts/radar

Use this snippet to render a radar chart. Ensure Chart.js is registered with the necessary elements and scales. The 'data' prop is required and defines the chart's labels and datasets.

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

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

  const data = {
    labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
    datasets: [
      {
        label: 'My First dataset',
        backgroundColor: 'rgba(194, 116, 161, 0.5)',
        borderColor: 'rgb(194, 116, 161)',
        data: [65, 59, 90, 81, 56, 55, 40],
      },
      {
        label: 'My Second dataset',
        backgroundColor: 'rgba(71, 225, 167, 0.5)',
        borderColor: 'rgb(71, 225, 167)',
        data: [28, 48, 40, 19, 96, 27, 100],
      },
    ],
  };
</script>

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

```

--------------------------------

### Retrieve elements at event

Source: https://saurav.tech/svelte-chartjs/api

Returns all elements at the same data index as the clicked element.

```typescript
function getElementsAtEvent(chart: Chart, event: PointerEvent): InteractionItem[]
```

--------------------------------

### Lazy Import Chart.js Components

Source: https://saurav.tech/svelte-chartjs

This import statement includes all Chart.js components, which is convenient but not recommended for production due to bundle size.

```javascript
import 'chart.js/auto';
```

--------------------------------

### Radar Chart Usage

Source: https://saurav.tech/svelte-chartjs/charts/radar

This snippet demonstrates how to import and use the Radar component from svelte-chartjs, including necessary Chart.js imports and data configuration.

```APIDOC
## Radar Chart

### Description
This section provides a complete example of how to use the Radar chart component in a Svelte application. It includes the necessary imports for Chart.js and the Radar component itself, along with sample data and options.

### Usage Example
```svelte
<script>
  import { Radar } from 'svelte-chartjs';
  import {
    Chart as ChartJS,
    Title, Tooltip, Legend,
    PointElement, RadialLinearScale, LineElement,
  } from 'chart.js';

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

  const data = {
    labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
    datasets: [
      {
        label: 'My First dataset',
        backgroundColor: 'rgba(194, 116, 161, 0.5)',
        borderColor: 'rgb(194, 116, 161)',
        data: [65, 59, 90, 81, 56, 55, 40],
      },
      {
        label: 'My Second dataset',
        backgroundColor: 'rgba(71, 225, 167, 0.5)',
        borderColor: 'rgb(71, 225, 167)',
        data: [28, 48, 40, 19, 96, 27, 100],
      },
    ],
  };
</script>

<Radar {data} options={{ responsive: true }} />
```

### Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `data` | `ChartData<'radar'>` | required | Chart data |
| `options` | `ChartOptions<'radar'>` | `{}` | Chart.js options |
| `plugins` | `Plugin<'radar'>[]` | `[]` | Chart.js plugins |
| `updateMode` | `UpdateMode` | — | Transition mode |
| `chart` | `Chart` | — | Bindable chart instance |
```

--------------------------------

### Create Bubble Chart with svelte-chartjs

Source: https://saurav.tech/svelte-chartjs/charts/bubble

Use this snippet to render a bubble chart. Ensure Chart.js components like Title, Tooltip, Legend, PointElement, and LinearScale are registered.

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

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

  const data = {
    labels: 'Bubble',
    datasets: [
      {
        label: 'John',
        data: [{ x: 3, y: 7, r: 10 }],
        backgroundColor: '#ff6384',
      },
      {
        label: 'Peter',
        data: [{ x: 3.2, y: 7, r: 10 }],
        backgroundColor: '#44e4ee',
      },
    ],
  };
</script>

<Bubble {data} options={{ responsive: true }} />
```

--------------------------------

### Implement a Scatter Chart in Svelte

Source: https://saurav.tech/svelte-chartjs/charts/scatter

Requires registering specific Chart.js elements before use. The data object must conform to the Scatter chart dataset structure.

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

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

  const data = {
    labels: ['Scatter'],
    datasets: [{
      borderColor: 'rgba(99, 0, 125, .2)',
      backgroundColor: 'rgba(99, 0, 125, .5)',
      label: 'V(node2)',
      data: [
        { x: 1, y: -0.017 },
        { x: 2, y: -0.068 },
        { x: 5, y: -0.411 },
        { x: 10, y: -1.445 },
      ],
    }],
  };
</script>

<Scatter {data} options={{ responsive: true }} />
```

--------------------------------

### Retrieve dataset elements at event

Source: https://saurav.tech/svelte-chartjs/api

Returns all elements belonging to the same dataset as the clicked element.

```typescript
function getDatasetAtEvent(chart: Chart, event: PointerEvent): InteractionItem[]
```

--------------------------------

### Event Handling Utilities

Source: https://saurav.tech/svelte-chartjs/examples/events

svelte-chartjs provides three utility functions to extract meaningful data from Chart.js click events.

```APIDOC
## Event Utilities

svelte-chartjs provides three utility functions to extract meaningful data from Chart.js click events.

### `getDatasetAtEvent(chart, event)`

- **Mode**: `'dataset'`
- **Description**: Returns all elements in the same dataset.

### `getElementAtEvent(chart, event)`

- **Mode**: `'nearest'`
- **Description**: Returns the nearest single element.

### `getElementsAtEvent(chart, event)`

- **Mode**: `'index'`
- **Description**: Returns all elements at the same index.

All three functions accept a `Chart` instance and a `PointerEvent`, and return an array of `InteractionItem` objects with `datasetIndex` and `index` properties.
```

--------------------------------

### Import ChartBaseProps type

Source: https://saurav.tech/svelte-chartjs/api

Import statement for the ChartBaseProps type definition.

```typescript
import type { ChartBaseProps } from 'svelte-chartjs';
```

--------------------------------

### Custom Chart Size

Source: https://saurav.tech/svelte-chartjs

Control the dimensions of the chart by setting `maintainAspectRatio` to `false` in the options and providing `width` and `height` props.

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

--------------------------------

### Polar Area Chart Implementation

Source: https://saurav.tech/svelte-chartjs/charts/polar

Use this snippet to render a Polar Area Chart. Ensure Chart.js is registered with the necessary elements and scales.

```svelte
<script>
  import { PolarArea } from 'svelte-chartjs';
  import {
    Chart as ChartJS,
    Title,
    Tooltip,
    Legend,
    ArcElement,
    RadialLinearScale,
  } from 'chart.js';

  ChartJS.register(Title, Tooltip, Legend, ArcElement, RadialLinearScale);

  const data = {
    datasets: [{
      data: [300, 50, 100, 40, 120],
      backgroundColor: [
        'rgba(247, 70, 74, 0.5)',
        'rgba(70, 191, 189, 0.5)',
        'rgba(253, 180, 92, 0.5)',
        'rgba(148, 159, 177, 0.5)',
        'rgba(77, 83, 96, 0.5)',
      ],
      label: 'My dataset',
    }],
    labels: ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'],
  };
</script>

<PolarArea {data} options={{ responsive: true }} />
```

--------------------------------

### ChartBaseProps

Source: https://saurav.tech/svelte-chartjs/api

Common properties accepted by all chart components.

```APIDOC
## ChartBaseProps

### Description
All components extend HTMLCanvasAttributes and accept the following props.

### Parameters
- **data** (ChartData<TType>) - Required - The data object passed to Chart.js
- **options** (ChartOptions<TType>) - Optional - Chart.js configuration options (Default: {})
- **plugins** (Plugin<TType>[]) - Optional - Chart.js plugins array (Default: [])
- **updateMode** (UpdateMode) - Optional - Transition configuration mode
- **chart** (Chart | null) - Optional - Bindable Chart.js instance

### Generic Chart Component Props
- **type** (ChartType) - Required - The chart type (e.g. 'bar', 'line')
```

--------------------------------

### Retrieve single element at event

Source: https://saurav.tech/svelte-chartjs/api

Returns the single nearest element to the click point.

```typescript
function getElementAtEvent(chart: Chart, event: PointerEvent): InteractionItem[]
```

--------------------------------

### Create Horizontal Bar Chart with svelte-chartjs

Source: https://saurav.tech/svelte-chartjs/examples/horizontal-bar

Use this component to render a horizontal bar chart. Ensure Chart.js components are registered before use. The `indexAxis: 'y'` option is crucial for horizontal bars.

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

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

  const data = {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [
      {
        label: 'Dataset 1',
        data: [65, 59, 80, 81, 56, 55, 40],
        backgroundColor: 'rgba(255, 99, 132, 0.5)',
      },
      {
        label: 'Dataset 2',
        data: [28, 48, 40, 19, 86, 27, 90],
        backgroundColor: 'rgba(53, 162, 235, 0.5)',
      },
    ],
  };

  const options = {
    indexAxis: 'y',
    responsive: true,
    plugins: {
      legend: { position: 'top' },
      title: { display: true, text: 'Horizontal Bar Chart' },
    },
  };
</script>

<Bar {data} {options} />

```

--------------------------------

### Doughnut Chart Usage with svelte-chartjs

Source: https://saurav.tech/svelte-chartjs/charts/doughnut

Use this snippet to render a Doughnut chart. Ensure Chart.js components like Title, Tooltip, Legend, ArcElement, and CategoryScale are registered before use. The 'data' prop is required and defines the chart's labels and datasets.

```svelte
<script>
  import { Doughnut } from 'svelte-chartjs';
  import {
    Chart as ChartJS,
    Title, Tooltip, Legend, ArcElement, CategoryScale,
  } from 'chart.js';

  ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale);

  const data = {
    labels: ['Red', 'Green', 'Yellow', 'Grey', 'Dark Grey'],
    datasets: [{
      data: [300, 50, 100, 40, 120],
      backgroundColor: ['#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'],
    }],
  };
</script>

<Doughnut {data} options={{ responsive: true }} />
```

--------------------------------

### Internal Reactive Effect Implementation

Source: https://saurav.tech/svelte-chartjs/guides/reactivity

The internal mechanism used by Chart.svelte to watch for prop changes and trigger chart updates.

```javascript
$effect(() => {
  const frozenData = freeze(data);
  const frozenOptions = freeze(options);
  const frozenUpdateMode = freeze(updateMode);

  const currentChart = untrack(() => chart);
  if (!currentChart) return;

  currentChart.data = frozenData;
  if (currentChart.options && frozenOptions) {
    Object.assign(currentChart.options, frozenOptions);
  }
  currentChart.update(frozenUpdateMode);
});
```
Tokens:
Raw