### Access Chart Instance via Template Refs in vue-chartjs

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/guide/index.md

Illustrates how to access the chart instance in Vue 3 projects using template refs. This allows direct interaction with the underlying Chart.js object.

```vue
<template>
  <BarChart ref="bar" />
</template>
```

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

### Install vue-chartjs and Chart.js

Source: https://github.com/apertureless/vue-chartjs/blob/main/README.md

This command installs the vue-chartjs library and its peer dependency, Chart.js, using pnpm, yarn, or npm. Ensure you have a package manager installed.

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

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

### Update Chart Data Reactively with vue-chartjs

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/guide/index.md

Shows how to update chart data and options reactively in Vue using computed properties with vue-chartjs. Supports mutable computed values for direct updates.

```vue
<template>
  <Bar :data="chartData" :options="chartOptions" />
</template>

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

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

export default {
  name: 'BarChart',
  components: { Bar },
  computed: {
      chartData() { return /* mutable chart data */ },
      chartOptions() { return /* mutable chart options */ }
    }
}
</script>
```

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

### Install vue-chartjs using package managers

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/migration-guides/vue-chart-3.md

Shows how to install the vue-chartjs package using package managers such as pnpm, yarn, and npm.

```bash
pnpm add vue-chartjs
```

```bash
yarn add vue-chartjs
```

```bash
npm i vue-chartjs
```

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

### Reactive Chart Data with Composition API

Source: https://context7.com/apertureless/vue-chartjs/llms.txt

Shows how to implement reactive charts using Vue 3's Composition API with `<script setup>`. The chart automatically updates when the `data` ref changes. This example uses a Bar chart and demonstrates updating the data through a button click.

```vue
<template>
  <Bar :data="data" :options="options" />
  <button @click="updateData">Update Data</button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
  ChartData
} from 'chart.js'
import { Bar } from 'vue-chartjs'

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

const options = {
  responsive: true,
  maintainAspectRatio: false
}

const data = ref<ChartData<'bar'>>({
  labels: ['January', 'February', 'March'],
  datasets: [
    {
      label: 'Revenue',
      backgroundColor: '#42b983',
      data: [100, 200, 300]
    }
  ]
})

const updateData = () => {
  data.value = {
    labels: ['January', 'February', 'March', 'April'],
    datasets: [
      {
        label: 'Revenue',
        backgroundColor: '#42b983',
        data: [150, 250, 350, 450]
      }
    ]
  }
}
</script>
```

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

### Build Project Dependencies with pnpm

Source: https://github.com/apertureless/vue-chartjs/blob/main/README.md

These commands are used to manage project dependencies and build the project for production using pnpm. This includes installing all necessary packages, building the project, and running various test suites.

```bash
# install dependencies
pnpm install

# build for production with minification
pnpm build

# run unit tests
pnpm test:unit

# run all tests
pnpm test
```

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

### Tree-shaking: Vue-chartjs v4 Pie Chart Import Example

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/migration-guides/v4.md

Demonstrates the tree-shakable import and registration for a Pie chart component in vue-chartjs v4. This approach explicitly imports necessary Chart.js modules and registers them.

```javascript
import { Pie } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale } from 'chart.js'

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

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

### Vue Chart with Props for Data and Options

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/de/guide/examples.md

Creates a reusable Bar chart component in Vue.js. It utilizes props to accept chart data and options, making the component presentation-focused and decoupling it from data fetching logic. Dependencies include 'vue-chartjs' and specific Chart.js modules.

```vue
<template>
  <Bar :data="chartData" :options="chartOptions" />
</template>

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

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

export default {
  name: 'BarChart',
  components: { Bar },
  props: {
    chartData: {
        type: Object,
        required: true
      },
    chartOptions: {
      type: Object,
      default: () => {}
    }
  }
}
</script>
```

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

### Vue Chart with Local Data

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/de/guide/examples.md

Demonstrates creating a Bar chart in Vue.js where the chart data is managed locally within the component's data properties. This approach is suitable for static or pre-defined datasets. It requires 'vue-chartjs' and core Chart.js modules.

```vue
<template>
  <Bar :data="chartData" />
</template>

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

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

export default {
  name: 'BarChart',
  components: { Bar },
  data() {
    return {
      chartData: {
        labels: [ 'January', 'February', 'March'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [40, 20, 12]
          }
        ]
      }
    }
  }
}
</script>
```

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

### Update component import paths for vue-chartjs

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/migration-guides/vue-chart-3.md

Provides code examples for changing component import paths when migrating to vue-chartjs, with separate instructions for Vue 2.7/3 and older Vue 2 versions.

```javascript
import { /* component */ } from 'vue-chartjs'
```

```javascript
import { /* component */ } from 'vue-chartjs/legacy'
```

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

### Create Bar Chart with Vue 3 Options API

Source: https://context7.com/apertureless/vue-chartjs/llms.txt

Demonstrates how to create a bar chart using the Bar component from vue-chartjs. It includes registering necessary Chart.js components and passing data and options as props. This example uses the Vue 3 Options API.

```vue
<template>
  <Bar :data="data" :options="options" />
</template>

<script lang="ts">
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale
} from 'chart.js'
import { Bar } from 'vue-chartjs'

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

export default {
  name: 'App',
  components: { Bar },
  data() {
    return {
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
          {
            label: 'GitHub Commits',
            backgroundColor: '#f87979',
            data: [40, 20, 12, 39, 10, 40, 39]
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>
```

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

### Handle Readonly Chart Data Warnings in vue-chartjs

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/guide/index.md

Provides a workaround for 'Target is readonly' warnings when updating chart data in vue-chartjs by using JSON stringify/parse for read-only computed data. Writable computed values avoid this.

```vue
<template>
  <Bar :data="JSON.stringify(JSON.parse(chartData))" :options="chartOptions" />
</template>
```

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

### Handle Chart Events with Vue-Chart.js

Source: https://context7.com/apertureless/vue-chartjs/llms.txt

Shows how to handle user interactions with charts by adding event listeners and using utility functions from vue-chartjs to get clicked elements. This enables interactive chart features. Dependencies include Vue, Vue-Chart.js, and Chart.js.

```vue
<template>
  <Bar ref="chartRef" :data="data" :options="options" @click="handleClick" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale
} from 'chart.js'
import { Bar, getElementAtEvent, getDatasetAtEvent, getElementsAtEvent } from 'vue-chartjs'
import type { ChartComponentRef } from 'vue-chartjs'

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

const chartRef = ref<ChartComponentRef | null>(null)

const data = {
  labels: ['January', 'February', 'March'],
  datasets: [
    {
      label: 'Sales',
      backgroundColor: '#f87979',
      data: [40, 20, 12]
    }
  ]
}

const options = {
  responsive: true,
  onClick: (event: any, activeElements: any) => {
    console.log('Chart clicked', activeElements)
  }
}

const handleClick = (event: MouseEvent) => {
  if (!chartRef.value?.chart) return

  const chart = chartRef.value.chart

  // Get the clicked element
  const element = getElementAtEvent(chart, event)
  console.log('Clicked element:', element)

  // Get all elements at the index
  const elements = getElementsAtEvent(chart, event)
  console.log('Elements at index:', elements)

  // Get dataset at event
  const dataset = getDatasetAtEvent(chart, event)
  console.log('Dataset:', dataset)
}
</script>
```

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

### Create a Bar Chart Component with vue-chartjs

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/de/guide/index.md

Example of creating a reusable Bar Chart component in Vue.js using vue-chartjs. It imports the Bar component, registers necessary Chart.js modules, and defines chart data and options.

```vue
<template>
  <Bar
    id="my-chart-id"
    :options="chartOptions"
    :data="chartData"
  />
</template>

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

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

export default {
  name: 'BarChart',
  components: { Bar },
  data() {
    return {
      chartData: {
        labels: [ 'January', 'February', 'March' ],
        datasets: [ { data: [40, 20, 12] } ]
      },
      chartOptions: {
        responsive: true
      }
    }
  }
}
</script>
```

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

### Vue Chart with Dynamic Styles

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/de/guide/examples.md

Shows how to dynamically apply styles to a Vue.js Bar chart component, enabling control over its dimensions like height and width. This is achieved by using computed properties for style bindings and setting 'position: relative' on the container. Dependencies: 'vue-chartjs', Chart.js modules.

```vue
<template>
  <div>
    <Bar :style="myStyles"/>
  </div>
</template>

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

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

export default {
  name: 'BarChart',
  components: { Bar },
  computed: {
    myStyles () {
      return {
        height: `${/* mutable height */}px`,
        position: 'relative'
      }
    }
  }
}
</script>
```

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

### Chart Creation: Vue-chartjs v3 (extends/mixins)

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/migration-guides/v4.md

Illustrates the older method of creating charts in vue-chartjs v3, which involved extending the chart component and using `renderChart` within the `mounted` hook. This required separate component files.

```javascript
// BarChart.js
import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart({
      labels: ['January', 'February', 'March'],
      datasets: [
        {
          label: 'GitHub Commits',
          backgroundColor: '#f87979',
          data: [40, 20, 12]
        }
      ]
    })
  }
}
```

```vue
<template>
  <BarChart />
</template>

<script>
import BarChart from 'path/to/component/BarChart'

export default {
  name: 'DataPage',
  components: { BarChart }
}
</script>
```

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

### Tree-shaking: Vue-chartjs v3 vs v4 Import

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/migration-guides/v4.md

Compares the import statements for vue-chartjs v3 and v4. v4 introduces a 'lazy way' and a 'tree-shakable way' for more optimized bundle sizes by explicitly importing and registering chart components.

```javascript
import { Bar } from 'vue-chartjs'
```

```javascript
import 'chart.js/auto';
import { Bar } from 'vue-chartjs'
```

```javascript
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'

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

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

### Vue Custom Chart Creation with vue-chartjs

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/de/guide/examples.md

Explains how to create custom chart types in vue-chartjs by extending existing Chart.js controllers. This involves importing Chart.js, using `createTypedChart`, defining a custom controller class, and then using the generated component. Useful for extending Chart.js functionality within a Vue application.

```javascript
// 1. Import Chart.js so you can use the global Chart object
import { Chart } from 'chart.js'
// 2. Import the `createTypedChart()` method to create the vue component.
import { createTypedChart } from 'vue-chartjs'
// 3. Import needed controller from Chart.js
import { LineController } from 'chart.js'

// 3. Extend one of the default charts
// http://www.chartjs.org/docs/latest/developers/charts.html
class LineWithLineController extends LineController { /* custom magic here */}

// 4. Generate the vue-chartjs component
// The first argument is the chart-id, the second the chart type, third is the custom controller
const CustomLine = createTypedChart('line', LineWithLineController)

// 5. Extend the CustomLine Component just like you do with the default vue-chartjs charts.

export default {
  components: { CustomLine }
}
```

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

### Chart Creation: Vue-chartjs v4 (props)

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/migration-guides/v4.md

Shows the modern approach in vue-chartjs v4 for creating charts. Components are used like standard Vue components, with chart data and configuration passed via props. Chart.js modules must be registered.

```vue
<template>
  <Bar :chart-data="chartData" />
</template>

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

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

export default {
  name: 'BarChart',
  components: { Bar },
  data() {
    return {
      chartData: {
        labels: [ 'January', 'February', 'March'],
        datasets: [
          {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [40, 20, 12]
          }
        ]
      }
    }
  }
}
</script>
```

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

### Pie Chart Component in Vue.js

Source: https://context7.com/apertureless/vue-chartjs/llms.txt

Renders a pie chart using the Pie component from vue-chartjs. This example shows how to define custom colors and labels for chart segments. It requires Chart.js and ArcElement registration.

```vue
<template>
  <Pie :data="data" :options="options" />
</template>

<script lang="ts">
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  ArcElement
} from 'chart.js'
import { Pie } from 'vue-chartjs'

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

export default {
  components: { Pie },
  data() {
    return {
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [
          {
            label: 'Votes',
            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)',
              'rgba(153, 102, 255, 0.6)',
              'rgba(255, 159, 64, 0.6)'
            ],
            data: [12, 19, 3, 5, 2, 3]
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>
```

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

### Reactivity: Vue-chartjs v3 (mixins)

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/migration-guides/v4.md

Illustrates chart updates in vue-chartjs v3 using `reactiveProp` and `reactiveData` mixins. Charts did not automatically update when data changed, requiring these mixins for re-rendering.

```javascript
import { Line, mixins } from 'vue-chartjs'

export default {
  extends: Line,
  mixins: [mixins.reactiveProp],
  props: ['chartData', 'options'],
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}
```

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

### Update Charts Dynamically with vue-chartjs

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/de/guide/index.md

Example of a Vue component that displays a chart with mutable data and options. It utilizes computed properties for `chartData` and `chartOptions`, allowing for dynamic updates. Includes a workaround for 'Target is readonly' warnings by stringifying and parsing data.

```vue
<template>
  <Bar :data="chartData" :options="chartOptions" />
</template>

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

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

export default {
  name: 'BarChart',
  components: { Bar },
  computed: {
      chartData() { return /* mutable chart data */ },
      chartOptions() { return /* mutable chart options */ }
    }
}
</script>
```

```vue
<template>
  <Bar :data="JSON.stringify(JSON.parse(chartData))" :options="chartOptions" />
</template>
```

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

### Enable ESM in package.json

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/de/migration-guides/v5.md

This configuration enables native ECMAScript Modules (ESM) support in your Node.js project, which is required for vue-chartjs v5. Ensure your project's 'package.json' includes the 'type': 'module' field.

```json
{
  "type": "module"
}
```

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

### Vue Component for Bar Chart with vue-chartjs

Source: https://github.com/apertureless/vue-chartjs/blob/main/README.md

This Vue component demonstrates how to use vue-chartjs to render a bar chart. It imports necessary Chart.js modules and the Bar component from vue-chartjs, registers them, and configures the chart data and options. The component requires 'chart.js' and 'vue-chartjs' to be installed.

```vue
<template>
  <Bar :data="data" :options="options" />
</template>

<script lang="ts">
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale
} from 'chart.js'
import { Bar } from 'vue-chartjs'

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

export default {
  name: 'App',
  components: {
    Bar
  },
  data() {
    return {
      data: {
        labels: ['January', 'February', 'March'],
        datasets: [{ data: [40, 20, 12] }]
      },
      options: {
        responsive: true
      }
    }
  }
}
</script>
```

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

### Vue Chart with API Data and v-if

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/de/guide/examples.md

Illustrates fetching chart data from an API asynchronously in a Vue.js component. It uses a `v-if` directive to ensure the chart renders only after the data is loaded, preventing rendering issues with Chart.js. Requires 'vue-chartjs', Chart.js modules, and an API endpoint.

```vue
<template>
  <div class="container">
    <Bar v-if="loaded" :data="chartData" />
  </div>
</template>

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

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

export default {
  name: 'BarChart',
  components: { Bar },
  data: () => ({
    loaded: false,
    chartData: null
  }),
  async mounted () {
    this.loaded = false

    try {
      const { userlist } = await fetch('/api/userlist')
      this.chartdata = userlist

      this.loaded = true
    } catch (e) {
      console.error(e)
    }
  }
}
</script>
```

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

### Reactivity: Vue-chartjs v4 (built-in watcher)

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/migration-guides/v4.md

Demonstrates chart updates in vue-chartjs v4, which features a built-in data change watcher. Charts automatically update or re-render when new data is passed, eliminating the need for `reactiveProp` or `reactiveData` mixins.

```vue
<template>
  <Bar :chart-data="chartData" />
</template>

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

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

export default {
  name: 'BarChart',
  components: { Bar },
  computed: {
      chartData() { return /* mutable chart data */ }
    }
}
</script>
```

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

### Use a vue-chartjs Chart Component in Vue App

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/de/guide/index.md

Demonstrates how to import and use a custom chart component (e.g., BarChart) within a main Vue application file (App.vue).

```vue
<template>
  <BarChart />
</template>

<script>
import BarChart from 'path/to/component/BarChart'

export default {
  name: 'App',
  components: { BarChart }
}
</script>
```

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

### Access Chart Instance with Vue-Chart.js

Source: https://context7.com/apertureless/vue-chartjs/llms.txt

Demonstrates how to access the underlying Chart.js instance using template refs in Vue.js for advanced customization. This allows direct manipulation of the chart object after it's mounted. Dependencies include Vue, Vue-Chart.js, and Chart.js.

```vue
<template>
  <Bar ref="chartRef" :data="data" :options="options" />
  <button @click="resetZoom">Reset Zoom</button>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale
} from 'chart.js'
import { Bar } from 'vue-chartjs'
import type { ChartComponentRef } from 'vue-chartjs'

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

const chartRef = ref<ChartComponentRef | null>(null)

const data = {
  labels: ['January', 'February', 'March'],
  datasets: [
    {
      label: 'Sales',
      backgroundColor: '#f87979',
      data: [40, 20, 12]
    }
  ]
}

const options = {
  responsive: true,
  maintainAspectRatio: false
}

const resetZoom = () => {
  if (chartRef.value?.chart) {
    chartRef.value.chart.resetZoom()
  }
}

onMounted(() => {
  // Access chart instance after mount
  if (chartRef.value?.chart) {
    console.log('Chart instance:', chartRef.value.chart)
  }
})
</script>
```

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

### Uninstall vue-chart-3 using package managers

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/migration-guides/vue-chart-3.md

Demonstrates how to uninstall the vue-chart-3 package using different package managers like pnpm, yarn, and npm.

```bash
pnpm rm vue-chart-3
```

```bash
yarn remove vue-chart-3
```

```bash
npm uninstall vue-chart-3
```

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

### Create Line Chart with Vue 3 Options API

Source: https://context7.com/apertureless/vue-chartjs/llms.txt

Illustrates the creation of a line chart using the Line component from vue-chartjs. It requires registering specific Chart.js components like LineElement and PointElement. Data and options are passed as props, utilizing the Vue 3 Options API.

```vue
<template>
  <Line :data="chartData" :options="chartOptions" />
</template>

<script lang="ts">
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from 'chart.js'
import { Line } from 'vue-chartjs'

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

export default {
  components: { Line },
  data() {
    return {
      chartData: {
        labels: ['January', 'February', 'March', 'April', 'May'],
        datasets: [
          {
            label: 'Sales',
            backgroundColor: '#f87979',
            borderColor: '#f87979',
            data: [40, 20, 12, 39, 10]
          }
        ]
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>
```

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

### TypeScript Support in Vue-Chart.js

Source: https://context7.com/apertureless/vue-chartjs/llms.txt

Illustrates how to integrate Vue-Chart.js with TypeScript for enhanced type safety and autocompletion, leveraging Chart.js type definitions. This improves developer experience and reduces potential errors. Dependencies include Vue, Vue-Chart.js, and Chart.js.

```vue
<template>
  <Bar :data="data" :options="options" />
</template>

<script lang="ts" setup>
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
  ChartData,
  ChartOptions
} from 'chart.js'
import { Bar } from 'vue-chartjs'

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

const data: ChartData<'bar'> = {
  labels: ['January', 'February', 'March'],
  datasets: [
    {
      label: 'Dataset 1',
      backgroundColor: '#f87979',
      data: [40, 20, 12]
    }
  ]
}

const options: ChartOptions<'bar'> = {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    y: {
      beginAtZero: true
    }
  }
}
</script>
```

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

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

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/de/migration-guides/v4.md

Demonstrates the tree-shakable import and registration of Chart.js components in vue-chartjs v4. This method allows for smaller bundle sizes by only including necessary components.

```javascript
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'

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

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

### Use Chart.js Plugins with Vue-Chart.js

Source: https://context7.com/apertureless/vue-chartjs/llms.txt

Explains how to add Chart.js plugins either globally or inline to customize chart appearance and behavior in Vue.js applications. This allows for extending chart functionality. Dependencies include Vue, Vue-Chart.js, and Chart.js.

```vue
<template>
  <Line :data="data" :options="options" :plugins="plugins" />
</template>

<script lang="ts" setup>
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from 'chart.js'
import { Line } from 'vue-chartjs'

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

const plugins = [
  {
    id: 'customPlugin',
    beforeDraw: (chart: any) => {
      const ctx = chart.ctx
      const canvas = chart.canvas
      ctx.fillStyle = 'white'
      ctx.fillRect(0, 0, canvas.width, canvas.height)
    },
    afterDatasetsDraw: (chart: any) => {
      const ctx = chart.ctx
      ctx.font = '16px Arial'
      ctx.fillStyle = 'black'
      ctx.textAlign = 'center'
      ctx.fillText('Custom Label', chart.width / 2, 50)
    }
  }
]

const data = {
  labels: ['January', 'February', 'March'],
  datasets: [
    {
      label: 'Data',
      backgroundColor: '#f87979',
      borderColor: '#f87979',
      data: [40, 20, 12]
    }
  ]
}

const options = {
  responsive: true,
  maintainAspectRatio: false
}
</script>
```

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

### Access Chart Instance via Template Refs in Vue 3

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/de/guide/index.md

Shows how to access the underlying Chart.js instance from a vue-chartjs component using template refs in a Vue 3 application. This allows direct interaction with the chart object.

```javascript
const chartInstance = this.$refs.bar.chart
```

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

### Create Typed Chart with vue-chartjs

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/api/index.md

Demonstrates how to create a custom typed chart using the `createTypedChart` global method from 'vue-chartjs'. This method requires the chart type string and a Chart.js controller. It allows for the creation of reusable custom chart components.

```javascript
import { createTypedChart } from 'vue-chartjs'
import { LineController } from 'chart.js'

const CustomLine = createTypedChart('line', LineController)
```

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

### Create Typed Chart Component with vue-chartjs

Source: https://context7.com/apertureless/vue-chartjs/llms.txt

Demonstrates how to create custom Chart.js components using the `createTypedChart` function from vue-chartjs. This is useful for chart types not included by default or for custom controllers. It involves registering custom logic with Chart.js and then creating a typed component.

```typescript
import { defineComponent } from 'vue'
import { Chart as ChartJS } from 'chart.js'
import { createTypedChart } from 'vue-chartjs'

// Create a custom chart type
ChartJS.register({
  id: 'custom-line',
  beforeDraw: (chart) => {
    // Custom drawing logic
  }
})

// Create a typed chart component
const CustomLine = createTypedChart('line', ChartJS)

// Use in a component
export default defineComponent({
  components: { CustomLine },
  data() {
    return {
      chartData: {
        labels: ['January', 'February', 'March'],
        datasets: [
          {
            label: 'Custom Chart',
            backgroundColor: '#42b983',
            data: [10, 20, 30]
          }
        ]
      },
      chartOptions: {
        responsive: true
      }
    }
  }
})
```

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

### Create Typed Chart with vue-chartjs

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/de/api/index.md

Demonstrates how to create a custom typed chart using the `createTypedChart` global method from 'vue-chartjs'. This method requires the chart type as a string and the corresponding Chart.js controller class. It's useful for defining reusable chart components with specific configurations.

```javascript
import { createTypedChart } from 'vue-chartjs'
import { LineController } from 'chart.js'

const CustomLine = createTypedChart('line', LineController)

```

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

### Vue.js: Provide Fallback Content for Chart Components

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/de/guide/index.md

Illustrates how to include fallback content within Vue-Chartjs components using slots. This content is displayed if the browser cannot render the canvas element, ensuring a better user experience in unsupported environments.

```vue
<template>
  <BarChart>Chart couldn't be loaded.</BarChart>
</template>
```

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

### Vue.js: Use aria-describedby for Chart Accessibility

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/de/guide/index.md

Demonstrates using the `aria-describedby` property to link a chart component to a descriptive HTML element, such as a table, for improved accessibility. This helps screen readers associate chart data descriptions with the chart itself.

```vue
<template>
  <BarChart aria-describedby="my-data-table" />
  <table id="my-data-table">
    <caption>Sales figures for the years 2022 to 2024.</caption>
    <thead>
      <tr>
        <th>2022</th>
        <th>2023</th>
        <th>2024</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>987</td>
        <td>1209</td>
        <td>825</td>
      </tr>
    </tbody>
  </table>
</template>
```

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

### Vue-Chart.js v3 Tree-shaking Import

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/de/migration-guides/v4.md

Imports the Bar component from vue-chartjs in v3. This method is not tree-shakable and includes all Chart.js features by default.

```javascript
import { Bar } from 'vue-chartjs'
```

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

### Add Accessibility Labels to Charts

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/de/guide/index.md

Demonstrates how to improve chart accessibility by adding an `aria-label` prop directly to the chart component. This provides a descriptive text for screen readers.

```vue
<template>
  <BarChart aria-label="Sales figures for the years 2022 to 2024. Sales in 2022: 987, Sales in 2023: 1209, Sales in 2024: 825." />
</template>
```

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

### Control Chart Update Animations in Vue-Chartjs

Source: https://context7.com/apertureless/vue-chartjs/llms.txt

Manage how charts animate during updates using the updateMode prop. This allows for different animation behaviors like 'default' or 'resize'. It requires Chart.js and vue-chartjs, and accepts chart data and options as input.

```vue
<template>
  <Bar :data="data" :options="options" :update-mode="updateMode" />
  <button @click="changeUpdateMode">Toggle Update Mode</button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
  ChartData,
  UpdateMode
} from 'chart.js'
import { Bar } from 'vue-chartjs'

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

const updateMode = ref<UpdateMode>('default')

const data = ref<ChartData<'bar'>>({
  labels: ['January', 'February', 'March'],
  datasets: [
    {
      label: 'Sales',
      backgroundColor: '#f87979',
      data: [40, 20, 12]
    }
  ]
})

const options = {
  responsive: true,
  maintainAspectRatio: false
}

const changeUpdateMode = () => {
  updateMode.value = updateMode.value === 'default' ? 'resize' : 'default'
}
</script>
```

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

### Radar Chart Component in Vue.js

Source: https://context7.com/apertureless/vue-chartjs/llms.txt

Implements a radar chart for visualizing multi-dimensional data using the Radar component and associated Chart.js scales and elements (RadialLinearScale, PointElement, LineElement, Filler). It includes configurations for datasets and options.

```vue
<template>
  <Radar :data="data" :options="options" />
</template>

<script lang="ts">
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler
} from 'chart.js'
import { Radar } from 'vue-chartjs'

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

export default {
  components: { Radar },
  data() {
    return {
      data: {
        labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
        datasets: [
          {
            label: 'My First dataset',
            backgroundColor: 'rgba(179,181,198,0.2)',
            borderColor: 'rgba(179,181,198,1)',
            pointBackgroundColor: 'rgba(179,181,198,1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(179,181,198,1)',
            data: [65, 59, 90, 81, 56, 55, 40]
          },
          {
            label: 'My Second dataset',
            backgroundColor: 'rgba(255,99,132,0.2)',
            borderColor: 'rgba(255,99,132,1)',
            pointBackgroundColor: 'rgba(255,99,132,1)',
            pointBorderColor: '#fff',
            pointHoverBackgroundColor: '#fff',
            pointHoverBorderColor: 'rgba(255,99,132,1)',
            data: [28, 48, 40, 19, 96, 27, 100]
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>
```

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

### Add Accessibility Attributes to Vue-Chartjs Charts

Source: https://context7.com/apertureless/vue-chartjs/llms.txt

Enhance chart accessibility for screen readers by using the ariaLabel and ariaDescribedby props. This requires the chart component and a corresponding description element. No specific dependencies beyond vue-chartjs and chart.js are needed.

```vue
<template>
  <Bar
    :data="data"
    :options="options"
    aria-label="Monthly sales bar chart"
    aria-describedby="chart-description"
  />
  <p id="chart-description" style="display: none;">
    This bar chart shows monthly sales data for January through March,
    with values of 40, 20, and 12 respectively.
  </p>
</template>

<script lang="ts" setup>
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale
} from 'chart.js'
import { Bar } from 'vue-chartjs'

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

const data = {
  labels: ['January', 'February', 'March'],
  datasets: [
    {
      label: 'Sales',
      backgroundColor: '#f87979',
      data: [40, 20, 12]
    }
  ]
}

const options = {
  responsive: true,
  maintainAspectRatio: false
}
</script>
```

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

### Doughnut Chart Component in Vue.js

Source: https://context7.com/apertureless/vue-chartjs/llms.txt

Creates a doughnut chart by importing the Doughnut component and registering necessary Chart.js elements like ArcElement for rendering arcs. It takes data and options as props for customization.

```vue
<template>
  <Doughnut :data="data" :options="options" />
</template>

<script lang="ts">
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  ArcElement
} from 'chart.js'
import { Doughnut } from 'vue-chartjs'

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

export default {
  components: { Doughnut },
  data() {
    return {
      data: {
        labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
        datasets: [
          {
            backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
            data: [40, 20, 80, 10]
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: {
            display: true,
            position: 'bottom'
          }
        }
      }
    }
  }
}
</script>
```

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

### Vue-Chart.js v4 Lazy Import

Source: https://github.com/apertureless/vue-chartjs/blob/main/website/src/de/migration-guides/v4.md

Imports 'chart.js/auto' and the Bar component from vue-chartjs in v4. This 'lazy way' simplifies migration but is less optimized for bundle size compared to the tree-shakable approach.

```javascript
import 'chart.js/auto';
import { Bar } from 'vue-chartjs'
```

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

### Vue Scatter Chart Component

Source: https://context7.com/apertureless/vue-chartjs/llms.txt

Implements a scatter chart using vue-chartjs to visualize correlations between two variables based on x and y coordinates. It requires Chart.js and registers necessary scales and elements. The component accepts `data` and `options` props.

```vue
<template>
  <Scatter :data="data" :options="options" />
</template>

<script lang="ts">
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  LinearScale,
  PointElement
} from 'chart.js'
import { Scatter } from 'vue-chartjs'

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

export default {
  components: { Scatter },
  data() {
    return {
      data: {
        datasets: [
          {
            label: 'Scatter Dataset',
            backgroundColor: 'rgba(75,192,192,0.4)',
            borderColor: 'rgba(75,192,192,1)',
            data: [
              { x: -10, y: 0 },
              { x: 0, y: 10 },
              { x: 10, y: 5 },
              { x: 0.5, y: 5.5 }
            ]
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>
```

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

### Vue Bubble Chart Component

Source: https://context7.com/apertureless/vue-chartjs/llms.txt

Renders a bubble chart using vue-chartjs, suitable for visualizing three-dimensional data with x, y, and radius values. It requires Chart.js and registers necessary scales and elements. The component accepts `data` and `options` props.

```vue
<template>
  <Bubble :data="data" :options="options" />
</template>

<script lang="ts">
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  LinearScale,
  PointElement
} from 'chart.js'
import { Bubble } from 'vue-chartjs'

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

export default {
  components: { Bubble },
  data() {
    return {
      data: {
        datasets: [
          {
            label: 'Dataset 1',
            backgroundColor: 'rgba(255,99,132,0.5)',
            borderColor: 'rgba(255,99,132,1)',
            data: [
              { x: 20, y: 30, r: 15 },
              { x: 40, y: 10, r: 10 },
              { x: 30, y: 20, r: 20 }
            ]
          },
          {
            label: 'Dataset 2',
            backgroundColor: 'rgba(54,162,235,0.5)',
            borderColor: 'rgba(54,162,235,1)',
            data: [
              { x: 10, y: 40, r: 12 },
              { x: 25, y: 35, r: 8 },
              { x: 35, y: 15, r: 18 }
            ]
          }
        ]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>
```

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

### Delay Chart Destruction in Vue-Chartjs Components

Source: https://context7.com/apertureless/vue-chartjs/llms.txt

Prevent visual glitches during component unmounting or route transitions by delaying chart destruction with the destroyDelay prop. This prop accepts a number representing milliseconds. It requires Chart.js and vue-chartjs.

```vue
<template>
  <Bar :data="data" :options="options" :destroy-delay="300" />
</template>

<script lang="ts" setup>
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale
} from 'chart.js'
import { Bar } from 'vue-chartjs'

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

const data = {
  labels: ['January', 'February', 'March'],
  datasets: [
    {
      label: 'Sales',
      backgroundColor: '#f87979',
      data: [40, 20, 12]
    }
  ]
}

const options = {
  responsive: true,
  maintainAspectRatio: false
}
</script>
```