### Basic Line Chart Example

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/+page.md

A quick start example demonstrating how to create a line chart using svelte-chartjs. Ensure ChartJS is registered with necessary components.

```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 }} />
```

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

### Quick Setup with Auto Import

Source: https://context7.com/sauravkanchan/svelte-chartjs/llms.txt

For rapid prototyping, import 'chart.js/auto' to automatically register all Chart.js components. Note that this increases bundle size.

```svelte
<script>
  import { Line, Bar, Pie } from 'svelte-chartjs';
  import 'chart.js/auto';

  const lineData = {
    labels: ['A', 'B', 'C'],
    datasets: [{ label: 'Line', data: [1, 2, 3], borderColor: 'blue' }],
  };

  const barData = {
    labels: ['X', 'Y', 'Z'],
    datasets: [{ label: 'Bar', data: [4, 5, 6], backgroundColor: 'green' }],
  };

  const pieData = {
    labels: ['Red', 'Blue'],
    datasets: [{ data: [30, 70], backgroundColor: ['red', 'blue'] }],
  };
</script>

<Line data={lineData} options={{ responsive: true }} />
<Bar data={barData} options={{ responsive: true }} />
<Pie data={pieData} options={{ responsive: true }} />

```

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

### Install svelte-chartjs

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/+page.md

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

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

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

### Stacked Bar Chart Setup with svelte-chartjs

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/examples/stacked-bar/+page.md

Configure and render a stacked bar chart. Ensure Chart.js components and scales are registered. Stacking is controlled via the `options.scales` object.

```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} />
```

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

### Get dataset at event utility function

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/api/+page.md

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

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

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

### Lazy Chart.js Auto Import

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/+page.md

Use this import for a simple setup where all Chart.js components are automatically included. This is not recommended for production due to bundle size.

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

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

### Get elements at event utility function

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/api/+page.md

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

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

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

### Get element at event utility function

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/api/+page.md

Returns the single nearest element to the click point.

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

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

### Updating Chart Data with Svelte Reactivity

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/guides/reactivity/+page.md

Use standard Svelte `$state` reactivity to update chart data. Reassigning the `data` object triggers an automatic chart update. This example demonstrates adding a new data point.

```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 }} />
```

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

### Initialize Site Theme

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/app.html

Sets the document theme based on localStorage or system preference.

```javascript
(function () { var saved = localStorage.getItem('theme'); var theme = saved === 'light' || saved === 'dark' ? saved : window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; document.documentElement.setAttribute('data-theme', theme); })();
```

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

### Create and Render a Pie Chart

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/charts/pie/+page.md

Import the Pie component and necessary Chart.js modules. Register the modules and define your chart data and options. Use the Pie component, passing the data and options as props.

```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 }} />
```

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

### Initialize and Render Bar Chart

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/charts/bar/+page.md

Import necessary Chart.js modules and register them. Then, define chart data and render the Bar component with the provided data and options.

```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={data} options={{ responsive: true }} />
```

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

### Enable Tree-Shaking with Auto Registration

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/README.md

Import chart.js/auto to automatically register all Chart.js components.

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

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

### Import components and utilities

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/api/+page.md

Standard import statement for accessing components and interaction utilities from the library.

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

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

### Event Handling with Event Utilities

Source: https://context7.com/sauravkanchan/svelte-chartjs/llms.txt

Use getDatasetAtEvent, getElementAtEvent, and getElementsAtEvent to create interactive charts that respond to user clicks. Ensure the chart instance is bound to access these utilities.

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

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

  let chart;

  const data = {
    labels: ['January', 'February', 'March', 'April'],
    datasets: [
      { label: 'Dataset 1', data: [65, 59, 80, 81], backgroundColor: 'rgba(255, 99, 132, 0.5)' },
      { label: 'Dataset 2', data: [28, 48, 40, 19], backgroundColor: 'rgba(54, 162, 235, 0.5)' },
    ],
  };

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

    // Get the entire dataset at click position
    const dataset = getDatasetAtEvent(chart, event);
    if (dataset.length) {
      const datasetIndex = dataset[0].datasetIndex;
      console.log('Clicked dataset:', data.datasets[datasetIndex].label);
    }

    // Get the nearest single element at click position
    const element = getElementAtEvent(chart, event);
    if (element.length) {
      const { datasetIndex, index } = element[0];
      console.log('Clicked element:', data.labels[index], data.datasets[datasetIndex].data[index]);
    }

    // Get all elements at the same index across datasets
    const elements = getElementsAtEvent(chart, event);
    console.log('Total elements at index:', elements.length);
  }
</script>

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

```

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

### Tree-shakable Chart.js Import and Registration

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/+page.md

Import and register only the necessary Chart.js components for better performance and smaller bundle sizes. This is the recommended approach.

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

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

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

### Create a Line Chart with svelte-chartjs

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/charts/line/+page.md

Import and register necessary Chart.js modules, then define chart data and options to render a line chart using the Line component. Ensure all required Chart.js components are registered before use.

```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 }} />
```

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

### Pie Chart Component Usage

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/charts/pie/+page.md

Demonstrates how to import and use the Pie component from svelte-chartjs, including necessary Chart.js imports and data configuration.

```APIDOC
## Pie Chart Component Usage

### Description
This section shows how to integrate the Pie chart component into your Svelte application. It includes the necessary imports for both `svelte-chartjs` and `chart.js`, along with an example of how to define the chart data and options.

### Method
Component Usage

### Endpoint
N/A (Component Integration)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```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 }} />
```

### Response
#### Success Response (200)
N/A (Component Rendering)

#### Response Example
N/A (Component Rendering)
```

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

### Implement Gradient Fill in Svelte

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/examples/gradient/+page.md

Register the Filler plugin and use onMount to create a linear gradient once the chart context is available.

```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 }} />
```

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

### Implement Clipboard Copy Functionality

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/app.html

Listens for clicks on elements with the .copy-btn class to copy base64-encoded code to the clipboard.

```javascript
document.addEventListener('click', function (e) { var btn = e.target.closest('.copy-btn'); if (!btn) return; var code = atob(btn.dataset.code); navigator.clipboard.writeText(code).then(function () { btn.textContent = 'Copied!'; setTimeout(function () { btn.textContent = 'Copy'; }, 1500); }); });
```

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

### Pie Chart Props

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/charts/pie/+page.md

Lists and describes the available props for the Pie Chart component.

```APIDOC
## Pie Chart Props

### Description
These are the configurable properties available for the Pie Chart component.

### Method
Component Props

### Endpoint
N/A (Component Integration)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

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

### Request Example
None

### Response
#### Success Response (200)
N/A (Component Rendering)

#### Response Example
N/A (Component Rendering)
```

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

### Implement Pie Chart Component

Source: https://context7.com/sauravkanchan/svelte-chartjs/llms.txt

Displays proportional data as slices of a circle, requiring ArcElement registration.

```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',
        ],
        hoverBackgroundColor: [
          '#FF5A5E',
          '#5AD3D1',
          '#FFC870',
          '#A8B3C5',
          '#616774',
        ],
      },
    ],
  };
</script>

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

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

### Implement a Line Chart

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/README.md

Register necessary Chart.js components and pass data to the Line component.

```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(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 }} />
```

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

### Implement Line Chart Component

Source: https://context7.com/sauravkanchan/svelte-chartjs/llms.txt

Renders a line chart requiring registration of 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: 'Sales 2024',
        fill: true,
        lineTension: 0.3,
        backgroundColor: 'rgba(225, 204, 230, 0.3)',
        borderColor: 'rgb(205, 130, 158)',
        pointBorderColor: 'rgb(205, 130, 158)',
        pointBackgroundColor: 'rgb(255, 255, 255)',
        pointBorderWidth: 10,
        pointHoverRadius: 5,
        pointRadius: 1,
        data: [65, 59, 80, 81, 56, 55, 40],
      },
      {
        label: 'Sales 2023',
        fill: true,
        lineTension: 0.3,
        backgroundColor: 'rgba(184, 185, 210, 0.3)',
        borderColor: 'rgb(35, 26, 136)',
        pointBorderColor: 'rgb(35, 26, 136)',
        pointBackgroundColor: 'rgb(255, 255, 255)',
        pointBorderWidth: 10,
        pointHoverRadius: 5,
        pointRadius: 1,
        data: [28, 48, 40, 19, 86, 27, 90],
      },
    ],
  };
</script>

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

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

### Doughnut Chart Usage

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/charts/doughnut/+page.md

Import and register necessary Chart.js modules, then define chart data and render the Doughnut component with responsive options.

```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 }} />
```

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

### Create a Scatter Chart Component

Source: https://context7.com/sauravkanchan/svelte-chartjs/llms.txt

Plots individual data points on a 2D grid to show correlations. Requires PointElement and LinearScale for axes.

```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 = {
    datasets: [
      {
        label: 'Dataset 1',
        data: [
          { x: -10, y: 0 },
          { x: 0, y: 10 },
          { x: 10, y: 5 },
          { x: 5, y: 15 },
          { x: -5, y: 8 },
        ],
        backgroundColor: 'rgba(255, 99, 132, 0.8)',
      },
      {
        label: 'Dataset 2',
        data: [
          { x: -8, y: 12 },
          { x: 3, y: 7 },
          { x: 8, y: 3 },
          { x: -3, y: -2 },
          { x: 12, y: 9 },
        ],
        backgroundColor: 'rgba(54, 162, 235, 0.8)',
      },
    ],
  };
</script>

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

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

### Scatter Chart Component

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/charts/scatter/+page.md

Demonstrates the basic usage of the Scatter component from svelte-chartjs, including necessary Chart.js imports and data configuration.

```APIDOC
## Scatter Chart Component Usage

### Description
This section shows how to import and use the Scatter component in a Svelte application. It includes the necessary Chart.js imports and registration of required modules, along with a sample data structure for a scatter plot.

### Method
Svelte Component Usage

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

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```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={data} options={{ responsive: true }} />
```

### Response
#### Success Response (200)
N/A (Client-side rendering)

#### Response Example
N/A
```

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

### Create a Bubble Chart Component

Source: https://context7.com/sauravkanchan/svelte-chartjs/llms.txt

Extends scatter plots by adding a third dimension (radius). Each data point needs x, y, and r values. Scales must be configured.

```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 = {
    datasets: [
      {
        label: 'Sales by Region',
        data: [
          { x: 20, y: 30, r: 15 },
          { x: 40, y: 10, r: 25 },
          { x: 30, y: 22, r: 10 },
          { x: 10, y: 40, r: 20 },
        ],
        backgroundColor: 'rgba(255, 99, 132, 0.6)',
        borderColor: 'rgb(255, 99, 132)',
      },
    ],
  };

  const options = {
    responsive: true,
    scales: {
      x: { min: 0, max: 50 },
      y: { min: 0, max: 50 },
    },
  };
</script>

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

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

### Polar Area Chart Component

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/charts/polar/+page.md

Demonstrates how to use the PolarArea component with sample data and options.

```APIDOC
## Polar Area Chart Component Usage

### Description
This section shows how to import and use the `PolarArea` component from `svelte-chartjs`, including necessary Chart.js registrations and example data.

### Method
Component Usage

### Endpoint
N/A (Component Integration)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None (Component Props)

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

### Request Example
```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 }} />
```

### Response
#### Success Response (200)
Component renders the Polar Area Chart.

#### Response Example
(Visual rendering of the chart)
```

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

### Implement Bar Chart Component

Source: https://context7.com/sauravkanchan/svelte-chartjs/llms.txt

Creates vertical or horizontal bar charts, requiring registration of BarElement, CategoryScale, and LinearScale.

```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: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [
      {
        label: 'Revenue ($M)',
        data: [12, 19, 8, 15],
        backgroundColor: [
          'rgba(255, 99, 132, 0.6)',
          'rgba(54, 162, 235, 0.6)',
          'rgba(255, 206, 86, 0.6)',
          'rgba(75, 192, 192, 0.6)',
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
        ],
        borderWidth: 1,
      },
    ],
  };

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

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

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

### Imports

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/api/+page.md

Import statements for using svelte-chartjs components and utilities.

```APIDOC
## Imports

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

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

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

### Line Component Props

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/charts/line/+page.md

Documentation for the properties available for the Line chart component.

```APIDOC
## Line Component Props

### Description
Configuration properties for the Line chart component.

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

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

### Handle Chart Click Events in Svelte

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/examples/events/+page.md

Use this snippet to set up event listeners for chart clicks. It imports necessary Chart.js components and svelte-chartjs utility functions. Ensure Chart.js components are registered before use.

```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} />
```

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

### Bubble Component API

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/charts/bubble/+page.md

Documentation for the Bubble component props and usage.

```APIDOC
## Bubble Component

### Description
The Bubble component renders a bubble chart using Chart.js within a Svelte application.

### Props
- **data** (ChartData<'bubble'>) - Required - The dataset for the bubble chart.
- **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 reference to the underlying Chart.js instance.

### Usage Example
```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',
      }
    ]
  };
</script>

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

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

### Optimize Bundle with Selective Imports

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/README.md

Manually import and register only the specific Chart.js components required for the application.

```javascript
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);
```

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

### Create a Doughnut Chart Component

Source: https://context7.com/sauravkanchan/svelte-chartjs/llms.txt

Use this component for proportional data with a hollow center. Ensure ArcElement and CategoryScale are registered.

```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: ['Desktop', 'Mobile', 'Tablet'],
    datasets: [
      {
        data: [55, 35, 10],
        backgroundColor: ['#36A2EB', '#FF6384', '#FFCE56'],
        hoverBackgroundColor: ['#36A2EB', '#FF6384', '#FFCE56'],
        borderWidth: 2,
      },
    ],
  };

  const options = {
    responsive: true,
    cutout: '60%',
    plugins: {
      legend: {
        position: 'bottom',
      },
    },
  };
</script>

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

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

### Scatter Chart Props

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/charts/scatter/+page.md

Details the available properties (props) for the Scatter component, their types, default values, and descriptions.

```APIDOC
## Scatter Chart Props

### Description
This section lists and describes the configurable properties for the Scatter component.

### Method
Component Props

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

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

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

### Request Example
N/A

### Response
#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Implement Polar Area Chart

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/charts/polar/+page.md

Import the PolarArea component and ChartJS modules. Register necessary Chart.js components before rendering the chart with your data and options.

```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 }} />
```

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

### Event Utility Functions

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/README.md

Helper functions to retrieve chart datasets or elements based on pointer events.

```APIDOC
## Event Utility Functions

### Description
These functions allow developers to extract specific chart data or elements when a user interacts with the chart via pointer events.

### Functions
- **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.

### Parameters
- **chart** (Object) - Required - The chart instance.
- **event** (Event) - Required - The pointer event object.

### Usage Example
```javascript
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 });
}
```
```

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

### Use Generic Chart Component

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/README.md

Utilize the generic Chart component by specifying the chart type via the type prop.

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

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

### Utility Functions

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/api/+page.md

Utility functions for interacting with chart events and elements.

```APIDOC
## Utility Functions

### `getDatasetAtEvent(chart, event)`

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

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

### `getElementAtEvent(chart, event)`

Returns the single nearest element to the click point.

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

### `getElementsAtEvent(chart, event)`

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

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

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

### Create a Radar Chart Component

Source: https://context7.com/sauravkanchan/svelte-chartjs/llms.txt

Ideal for comparing multiple variables across categories. Requires RadialLinearScale and PointElement to be registered.

```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: ['Speed', 'Power', 'Defense', 'Stamina', 'Technique', 'Team Play'],
    datasets: [
      {
        label: 'Player A',
        data: [85, 90, 70, 80, 95, 75],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgb(255, 99, 132)',
        pointBackgroundColor: 'rgb(255, 99, 132)',
      },
      {
        label: 'Player B',
        data: [75, 85, 90, 70, 80, 90],
        backgroundColor: 'rgba(54, 162, 235, 0.2)',
        borderColor: 'rgb(54, 162, 235)',
        pointBackgroundColor: 'rgb(54, 162, 235)',
      },
    ],
  };
</script>

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

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

### Custom Size Line Chart

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/+page.md

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

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

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

### Implement Scatter Chart in Svelte

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/charts/scatter/+page.md

Register necessary Chart.js elements before rendering the Scatter component. Ensure all required scales and elements are imported and registered to avoid runtime errors.

```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 }} />
```

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

### Handle Chart Events in Svelte

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/README.md

Use `getDatasetAtEvent`, `getElementAtEvent`, and `getElementsAtEvent` to retrieve chart data and elements on click events. Ensure the chart instance is available before calling these functions.

```svelte
<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} />
```

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

### Access Chart.js instance with bind:chart

Source: https://github.com/sauravkanchan/svelte-chartjs/blob/master/sites/docs/src/routes/examples/ref/+page.md

Use the bind:chart directive to expose the Chart.js instance to a local variable. This allows direct interaction with the Chart.js API after the component mounts.

```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 } } }} />
```