MazChart

MazChart is a standalone component which generates graphics & charts with chart.js

Documentation

Follow the Chart.JS documentation to create your own chart.

You can use all the plugins of Chart.JS. Follow the examples below.

Performance

MazChart lazy-loads chart.js on mount and registers only the controllers, elements and scales needed for the chart type you requested. A <MazChart type="pie"> won't pull BarController, LineElement or any other unused module. The chart instance is also held outside Vue's reactivity (shallowRef + markRaw) — this avoids accidental deep proxying of the underlying chart and the freezes that can come with it on large datasets.

When data or options change after the initial render, chart.update() is called with 'none' by default so updates don't animate. Pass update-mode="default" (or any other Chart.js update mode) to opt back into animations.

Bar chart

View code

<script setup lang="ts">
import dataLabels from 'chartjs-plugin-datalabels'

const barChart = {
  type: 'bar',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First Dataset',
      data: [65, 59, 80, 81, 56, 55, 40],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(255, 159, 64, 0.2)',
        'rgba(255, 205, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(201, 203, 207, 0.2)'
      ],
      borderColor: [
        'rgb(255, 99, 132)',
        'rgb(255, 159, 64)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(54, 162, 235)',
        'rgb(153, 102, 255)',
        'rgb(201, 203, 207)'
      ],
      borderWidth: 1
    }]
  },
}
</script>

<template>
  <MazChart
    :type="barChart.type"
    :data="barChart.data"
    :options="barChart.options"
  />
</template>

Pie chart

View code

<script setup lang="ts">
const pieChart = {
  type: 'doughnut',
  data: {
    labels: [
      `Perfects - ${40}%`,
      `Bons - ${35}%`,
      `Mauvais - ${25}%`,
    ],
    datasets: [
      {
        backgroundColor: [
          '#fcb731',
          'rgb(28 209 161)',
          'rgb(255, 109, 106)',
        ],
        data: [
          40,
          35,
          25,
        ],
      },
    ],
  },
}
</script>

<template>
  <MazChart
    :type="pieChart.type"
    :data="pieChart.data"
  />
</template>

Line chart

View code

<script setup lang="ts">
import dataLabels from 'chartjs-plugin-datalabels'

let delayed: boolean

const animation = {
  onComplete: () => {
    delayed = true
  },
  delay: (context: Record<string, any>) => {
    let delay = 0
    if (context.type === 'data' && context.mode === 'default' && !delayed) {
      delay = context.dataIndex * 100 + context.datasetIndex * 50
    }
    return delay
  },
}

const lineChart = {
  type: 'line',
  // locally registered and available for this chart
  plugins: [dataLabels],
  data: {
    labels: [1, 2, 3, 4, 5, 6],
    datasets: [
      {
        label: 'Moyenne des bons pronos du groupe',
        data: [10, 15, 20, 25, 30, 35],
        fill: false,
        borderColor: 'rgb(28 209 161)',
        tension: 0.5,
        backgroundColor: '#17a2b8',
      },
      {
        label: 'Vos bons pronos',
        data: [10, 15, 20, 25, 30, 35],
        fill: false,
        borderColor: '#333',
        tension: 0.5,
        backgroundColor: '#1e90ff',
      },
    ],
  },
  options: {
    plugins: {
      datalabels: {
        backgroundColor: (context: Record<string, any>) => {
          return context.dataset.backgroundColor
        },
        borderRadius: 4,
        color: 'white',
        font: {
          weight: 'bold',
        },
        padding: 6,
      },
    },
    animation,
  }
}
</script>

<template>
  <MazChart v-bind="lineChart" />
</template>

Accessibility

A chart is drawn in a <canvas>, which has no accessible content. Give it a name with aria-label (or aria-labelledby): the canvas is then exposed as an image (role="img"). For complex data, also provide the values in text (a table, a summary) next to the chart.

<MazChart type="bar" :data="data" aria-label="Sales by quarter, from 120 to 340 units" />

Props

Name	Description	Type	Required	Default	Possible values
type	Type of the chart	T	Yes	-	'bar' | 'line' | 'scatter' | 'bubble' | 'pie' | 'doughnut' | 'polarArea' | 'radar'
data	Data of the chart	ChartData<T, TData, TLabel>	Yes	-	-
options	Options of the chart	Exclude<DeepPartial<CoreChartOptions<T> & ElementChartOptions<T> & PluginChartOptions<T> & DatasetChartOptions<T> & ScaleChartOptions<T> & ChartTypeRegistry[T]["chartOptions"]>, _DeepPartialArray<unknown>>	No	{}	-
plugins	Plugins of the chart	Plugin<keyof ChartTypeRegistry, AnyObject>[]	No	-	-
dataset-id-key	Dataset ID key	string	No	-	-
update-mode	Update mode used when data or options change after the initial render. Defaults to 'none' to skip animations on updates (the initial render still animates per the chart's options).	"none" | "default" | "active" | "reset" | "resize" | "hide" | "show"	No	"none"	'none' | 'default' | 'active' | 'reset' | 'resize' | 'hide' | 'show'

Types

MazChartProps is generic over the chart type, the data point shape and the label type — it mirrors the same generic signature as Chart.js itself:

interface MazChartProps<
  T extends ChartType = ChartType,
  TData = DefaultDataPoint<T>,
  TLabel = unknown,
> {
  type: T
  data: ChartData<T, TData, TLabel>
  options?: ChartOptions<T>
  plugins?: Plugin[]
  datasetIdKey?: string
  updateMode?: UpdateMode
}

For the underlying types, see chart.js types.