Vue Chartjs

https://vue-chartjs.org/
Admin
Vue Chartjs is a project that enables easy and beautiful charts with Chart.js and Vue.js.
Tokens:4,762
Snippets:42
Trust Score:8.3
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install vue-chartjs and chart.js

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

Installation command for vue-chartjs and chart.js using npm.

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

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

### Install vue-chartjs and chart.js with pnpm

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

Use pnpm to add both vue-chartjs and chart.js as dependencies. chart.js is a peer dependency, so it must be installed separately.

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

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

### Install vue-chartjs and chart.js with yarn

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

Use yarn to add both vue-chartjs and chart.js as dependencies. chart.js is a peer dependency, so it must be installed separately.

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

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

### Use BarChart in App.vue

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

Example of using the BarChart component in a Vue app.

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

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

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

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

### Get chart instance in Vue 3

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

Access the chart instance from a template ref in Vue 3.

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

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

### BarChart with API data and v-if guard

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

Use this pattern when fetching chart data asynchronously. The v-if prevents Chart.js from rendering before data arrives. The component receives data and options via props from a container. Note: the example uses 'chartdata' in the assignment, which may be a typo for 'chartData'.

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

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

### Access chart instance via template ref

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

Shows how to set a template ref on a chart component to access the chart instance.

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

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

### Updating charts with reactive data

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

Shows how to use computed properties for chart data and options to enable automatic 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>
```

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

### Import Bar component from vue-chartjs

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

Import the Bar chart component from vue-chartjs.

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

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

### Reference describing element with aria-describedby

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

Use aria-describedby to link to a table that describes the chart data.

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

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

### Chart with props - BarChart component

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

Create a reusable BarChart component that accepts chartData and chartOptions as props. The parent component is responsible for data fetching and passes the data via props. The chart options prop has a default of an empty object.

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

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

### BarChart with dynamic styles via computed property

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

Use this pattern to dynamically change the height and width of the chart container. Set responsive: true and pass a styles object as inline styles to the outer div. The computed property 'myStyles' must include 'position: relative' as a warning. The height uses a placeholder for a mutable value.

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

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

### Create a BarChart component

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

A complete Vue component that renders a Bar chart using vue-chartjs and registers required Chart.js elements.

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

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

### Provide fallback content via slot

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

Use the component slot to provide fallback content if the canvas cannot be rendered.

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

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

### Create a custom chart type with createTypedChart()

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

Use this snippet to extend a default Chart.js controller and generate a custom Vue chart component. Import Chart.js and the createTypedChart() method, then pass the chart type and custom controller to createTypedChart(). The resulting component can be used like any other vue-chartjs chart.

```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 local data - BarChart component

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

Create a BarChart component that defines its chart data locally in the component's data() function. This is suitable when the parent does not need to control the data.

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

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

### createTypedChart usage

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

Imports createTypedChart from vue-chartjs and LineController from chart.js, then creates a custom line chart component.

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

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

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

### createTypedChart

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

Creates a typed chart component for a given chart type and controller. This is a global method that must be imported from vue-chartjs.

```APIDOC
## createTypedChart

### Description
Creates a typed chart component for a given chart type and controller. This is a global method that must be imported from vue-chartjs.

### Method
Function

### Arguments
- **chart-type** (string) - Required - The chart type (e.g., 'line').
- **chart-controller** (ChartController) - Required - The Chart.js controller (e.g., LineController).

### Usage Example
```js
import { createTypedChart } from 'vue-chartjs'
import { LineController } from 'chart.js'

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

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

### Enable ESM in package.json

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

Required for Chart.js v4 and vue-chartjs v5, which are ESM-only packages. Add "type": "module" to your package.json to use them in your project.

```json
// package.json
{
  "type": "module"
}
```

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

### Add aria-label to chart

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

Pass an aria-label prop to make the chart accessible.

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

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

### Clone chartData to avoid readonly warnings

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

Use JSON.stringify and JSON.parse to clone chartData when it is a read-only reactive value, preventing Vue's 'Target is readonly' warnings.

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