[Chartjs]-TypeScript issue with custom plugin and afterDraw callback Chart.js and react-chartjs-2

by

2👍

✅

You need to import the Plugin interface from Chart.js and type your code:

import {
    Chart,
    Plugin
} from 'chart.js';

const plugins: Plugin[] = [{
    id: "tooltipLine",
    afterDraw: (chart) => {
        if (chart.tooltip.opacity === 1) {
            const {
                ctx
            } = chart;
            const {
                caretX
            } = chart.tooltip;
            const topY = chart.scales.y.top;
            const bottomY = chart.scales.y.bottom;

            ctx.save();
            ctx.setLineDash([3, 3]);
            ctx.beginPath();
            ctx.moveTo(caretX, topY - 5);
            ctx.lineTo(caretX, bottomY);
            ctx.lineWidth = 1;
            ctx.strokeStyle = getRgba(colors.white, 0.5);
            ctx.stroke();
            ctx.restore();
        }
    }
}];

Leave a comment