### Install vue-chartjs and chart.js

Source: https://vue-chartjs.org/guide

Install vue-chartjs and chart.js using pnpm or yarn. Chart.js is a peer dependency and must be installed separately.

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

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

### Install vue-chartjs and chart.js

Source: https://vue-chartjs.org/guide

Install the necessary packages using npm.

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

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

### Access Chart Instance via Template Refs

Source: https://vue-chartjs.org/guide

Get access to the chart instance using template refs in Vue 3.

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

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

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

### Chart with Dynamic Styles

Source: https://vue-chartjs.org/guide/examples.html

This example demonstrates how to apply dynamic styles to a chart component, allowing for responsive sizing. Ensure `position: relative` is set on the container.

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

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

### Bar Chart with Local Data

Source: https://vue-chartjs.org/guide/examples.html

Handle chart data directly within the component. This example shows how to define and use local data for a Bar chart.

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

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

### Import Base Chart Component

Source: https://vue-chartjs.org/guide

Import the base chart component (e.g., Bar) from vue-chartjs.

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

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

### Creating a Custom Chart Type in Vue-Chart.js

Source: https://vue-chartjs.org/guide/examples.html

This snippet demonstrates how to create a custom chart type by extending Chart.js controllers and then generating a Vue component using `createTypedChart`. This is useful when default chart types do not meet specific visualization needs.

```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 with API Data

Source: https://vue-chartjs.org/guide/examples.html

This snippet shows how to load chart data from an API asynchronously. Use a `v-if` directive to ensure the chart renders only after the data is loaded.

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

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

### createTypedChart

Source: https://vue-chartjs.org/api

A global method to create custom typed charts by providing a chart type and controller.

```APIDOC
## createTypedChart

### Description

A global method to create custom typed charts by providing a chart type and controller.

### Method

`createTypedChart(chart-type, chart-controller)`

### Parameters

#### Path Parameters

* **chart-type** (string) - Required - The type of the chart (e.g., 'line', 'bar').
* **chart-controller** (object) - Required - The Chart.js controller for the specified chart type.
```

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

### Bar Chart with Props

Source: https://vue-chartjs.org/guide/examples.html

Create a reusable Bar chart component by passing chart data and options via props. This allows parent components to manage data fetching and presentation logic.

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

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

### Create a Bar Chart Component

Source: https://vue-chartjs.org/guide

Define a Vue component to render a bar chart using vue-chartjs. Ensure all necessary Chart.js modules are registered.

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

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

### Describe Chart with aria-describedby

Source: https://vue-chartjs.org/guide

Reference a describing element, like a table, using the `aria-describedby` property for enhanced accessibility.

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

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

### Use Bar Chart Component in App

Source: https://vue-chartjs.org/guide

Import and use the created BarChart component in your main Vue application.

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

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

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

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

### Props

Source: https://vue-chartjs.org/api

Props that can be passed to vue-chartjs components to configure charts.

```APIDOC
## Props

### Description

Props that can be passed to vue-chartjs components to configure charts.

### Parameters

#### Path Parameters

* **data** (object) - Required - Data object that is passed into the Chart.js chart
* **options** (object) - Required - Options object that is passed into the Chart.js chart
* **datasetIdKey** (string) - Required - Key name to identify the dataset
* **plugins** (array) - Required - Plugins array that is passed into the Chart.js chart
* **updateMode** (string) - Required - Mode string to indicate the transition configuration to be used.
* **ariaLabel** (string) - Optional - An ARIA label that describes the chart to make it accessible.
* **ariaDescribedby** (string) - Optional - A reference to the describing element. E. g. a table representation of the data.
```

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

### Label Chart with aria-label

Source: https://vue-chartjs.org/guide

Make charts accessible by providing a descriptive label directly using the `aria-label` prop.

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

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

### Enable ESM in package.json

Source: https://vue-chartjs.org/migration-guides/v5.html

To use ESM-only packages like Chart.js v4 and vue-chartjs v5, ensure your project's package.json is configured to use modules.

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

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

### Provide Fallback Content for Canvas

Source: https://vue-chartjs.org/guide

Include fallback content within the component's slot for browsers that cannot render the canvas element.

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

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

### Create a Typed Chart in Vue-Chartjs

Source: https://vue-chartjs.org/api

Use `createTypedChart` to create a custom chart type by providing the chart type string and the Chart.js controller. This is useful for defining reusable chart components.

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

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

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

### Update Charts with Reactive Data

Source: https://vue-chartjs.org/guide

Vue-chartjs components automatically watch for changes in `data` and `options` props. Use computed properties for mutable chart 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>
```

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

### Handle Readonly Computed Chart Data

Source: https://vue-chartjs.org/guide

If `chartData` is a readonly computed property, use `JSON.stringify(JSON.parse(chartData))` to create a mutable clone to avoid 'Target is readonly' warnings.

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

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.