MazChart

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

To use this component, you have to install the chart.js and vue-chartjs dependency

npm install chart.js@^4 vue-chartjs@^5

INFO

For maz-ui versions below 3.9.x, you should only install chart.js@^3

npm install chart.js@^3

Documentation

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

You can also check the documentation and examples of vue-chartjs

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

Bar chart

View code

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

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

Pie chart

View code

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

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

Line chart

View code

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

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

Component informations

Props

Prop name	Description	Type	Values	Default
type	Chart.js chart type	ChartType	-
data	The data object that is passed into the Chart.js chart @see https://www.chartjs.org/docs/latest/getting-started/	ChartData<ChartType>	-
options	The options object that is passed into the Chart.js chart @see https://www.chartjs.org/docs/latest/general/options.html	object	-	{}
plugins	The plugins array that is passed into the Chart.js chart @see https://www.chartjs.org/docs/latest/developers/plugins.html	array	-	[]
datasetIdKey	Key name to identificate dataset	string	-	'label'
updateMode	A mode string to indicate transition configuration should be used. @see https://www.chartjs.org/docs/latest/developers/api.html#update-mode	UpdateMode	-	undefined

Types

ChartProps

Follow this link to see the type definitions: vue-chartjs/src/types.ts