How to access the hooks of the Chartjs plugins?

Question

wishing you all a happy week

I was wondering if you could help me, I'm using Chartjs from the server side to apply charts in reports and call them from the frontend.

The technologies that I am using is nodejs node developed with typescript and express and I am using handlebars for HTML templates, integrate Chartjs, since in addition to being free it is highly recommended in the community, but right now I am having some problems with the implementation

To better integrate the charts from the server I am using chartjs-node-canvas and generating images through the library,once I have the image I pass it to my template

So what I want to add sub tags to group the information, adding multilevel category tags, but it throws me the following error when I want to use the hooks in the plugins

image1 of the error

How to properly access Chartjs plugin hooks?

In the end, I would like to achieve something like this:

example of the expected result

I leave the code of the configuration of my graph, any type of help would be very grateful, I am new to the community, I hope I have written the question correctly. Thank you very much to all

import {
  ChartJSNodeCanvas
} from "chartjs-node-canvas";

const canvasRenderService = new ChartJSNodeCanvas({
  width: 1100,
  height: 700,
  chartCallback: (ChartJS) => {
    ChartJS.register(require('chartjs-plugin-datalabels'))
  }
});

const mkChart = await canvasRenderService.renderToBuffer({
  type: 'bar',
  data: {
    labels: labels,
    datasets: [{
        type: 'line',
        label: '% ACTIVITY',
        backgroundColor: '#FF7605',
        borderColor: '#FF7605',
        data: lineBar,
        datalabels: {
          anchor: 'start',
          align: 'center',
          clamp: true,
          backgroundColor: '#FF7605',
          color: 'white',
          font: {
            weight: 'bold'
          }
        }
      },
      {
        type: 'bar',
        label: 'WEEKLY SUMMARY OF HOURS',
        backgroundColor: '#222A35',
        borderColor: '#222A35',
        data: barHorizontal,
        datalabels: {
          rotation: 270,
          padding: 10
        }

      },
      {
        type: 'bar',
        label: 'HOURS',
        backgroundColor: '#008582',
        borderColor: '#008582',
        data: colbWeekly,
        datalabels: {
          anchor: 'end',
          align: 'top',
          clamp: true,
          backgroundColor: '#008582',
          color: 'white',
          font: {
            weight: 'bold'
          }
        }
      }
    ]
  },
  options: {
    plugins: {
      datalabels: {
        color: 'white',
        font: {
          weight: 'bold'
        },
      },
      title: {
        display: true,
        text: 'AVERAGE WEEKLY HOURS'
      },
      afterDatasetsDraw(chart, args, pluginOptions) {
        const {
          ctx,
          chartArea: {
            left,
            right,
            top,
            bottom,
            width,
            height
          }
        } = chart;

        ctx.save();
        ctx.font = 'bolder 12px sans-serif';
        ctx.fillStyle = 'rgba(102, 102, 102, 1)';
        ctx.textAlign = 'center';
        ctx.fillText('WEEK 1', width / 4 + left, bottom + 30)
      }
    },
    elements: {
      line: {
        fill: false
      }
    },
    scales: {
      xAxis: {
        stacked: true,
        ticks: {
          minRotation: 90
        },
        grid: {
          display: false
        }
      }
    }
  }

});

LeeLenalee · Answer

You can't access the plugin hooks from a specific plugin within the config of that plugin, you will need to create your own custom plugin and in the plugin itself you can access all the hooks:

const customPlugin = {
  id: 'customPlugin',
  afterDatasetsDraw: (chart, args, opts) => {
    console.log('afterDatasetsDraw')
  },
  beforeDatasetsDraw: (chart, args, opts) => {
    console.log('beforeDatasetsDraw');
  }
  // You can add all the other hooks here
}

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'pink'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'orange'
      }
    ]
  },
  options: {},
  plugins: [customPlugin]
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

How to access the hooks of the Chartjs plugins?

1 Answers