[Chartjs]-How to import and use a custom Chart.js plugin in Nuxt? (Chartjs-vuejs v2.9.4)

by

1👍

According to the vue-chartjs documentation you can do this in 2 ways.

If you want the plugin to be available for all your charts you can use the global registration like so:

import Chart from 'chart.js'

Chart.pluginService.register({
    id: "customScale",
    beforeLayout: (chart, options, c) => {
      let max = Number.MIN_VALUE;
      let min = Number.MAX_VALUE
      let grace = options.grace || 0

      chart.data.datasets.forEach((dataset) => {
        max = Math.max(max, Math.max(...dataset.data));
        min = Math.min(min, Math.min(...dataset.data))
      })

      if (typeof grace === 'string' && grace.includes('%')) {
        grace = Number(grace.replace('%', '')) / 100

        chart.options.scales.yAxes[0].ticks.suggestedMax = max + (max * grace)
        chart.options.scales.yAxes[0].ticks.suggestedMin = min - (min * grace)

      } else if (typeof grace === 'number') {

        chart.options.scales.yAxes[0].ticks.suggestedMax = max + grace
        chart.options.scales.yAxes[0].ticks.suggestedMin = min - grace

      }

    }
  });

This way of importing and registering should work from anywhere in your app.

The second way is an inline plugin. This needs to be done in your BarChart.vue and goes like this:

mounted() {
  this.addPlugin(
    Chart.pluginService.register({
      id: "customScale",
      beforeLayout: (chart, options, c) => {
        let max = Number.MIN_VALUE;
        let min = Number.MAX_VALUE
        let grace = options.grace || 0

        chart.data.datasets.forEach((dataset) => {
          max = Math.max(max, Math.max(...dataset.data));
          min = Math.min(min, Math.min(...dataset.data))
        })

        if (typeof grace === 'string' && grace.includes('%')) {
          grace = Number(grace.replace('%', '')) / 100

          chart.options.scales.yAxes[0].ticks.suggestedMax = max + (max * grace)
          chart.options.scales.yAxes[0].ticks.suggestedMin = min - (min * grace)

        } else if (typeof grace === 'number') {

          chart.options.scales.yAxes[0].ticks.suggestedMax = max + grace
          chart.options.scales.yAxes[0].ticks.suggestedMin = min - grace

        }

      }
    });
  )
}

Leave a comment