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
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 } } } } });
1 answers
solution1
0 ACCPTED 2022-09-19 16:52:45
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);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.js"></script> <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.