search

SeanSobey / ChartjsNodeCanvas

A node renderer for Chart.js using canvas.
MIT License
230 stars 75 forks source link

chartjs-plugin-datalabels plugin: var x0 = origin.x; TypeError: Cannot read properties of null (reading 'x') #109

Closed zjacky0409 closed 2 years ago

zjacky0409 commented 2 years ago

When I apply chartjs-plugin-datalabels plugin for the doughnut chart, there is an error.

/usr/lib/node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js:121 var x0 = origin.x; ^

TypeError: Cannot read properties of null (reading 'x') at orient (/usr/lib/node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js:121:19) at Object.fallback [as positioner] (/usr/lib/node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js:345:13) at coordinates (/usr/lib/node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js:841:21) at Object.draw (/usr/lib/node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js:1012:18) at Object.afterDatasetsDraw (/usr/lib/node_modules/chartjs-plugin-datalabels/dist/chartjs-plugin-datalabels.js:1307:12) at callback (/usr/lib/node_modules/chartjs-node-canvas/node_modules/chart.js/dist/chart.js:828:15) at PluginService._notify (/usr/lib/node_modules/chartjs-node-canvas/node_modules/chart.js/dist/chart.js:6233:11) at PluginService.notify (/usr/lib/node_modules/chartjs-node-canvas/node_modules/chart.js/dist/chart.js:6220:25) at Chart.notifyPlugins (/usr/lib/node_modules/chartjs-node-canvas/node_modules/chart.js/dist/chart.js:7361:26) at Chart._drawDatasets (/usr/lib/node_modules/chartjs-node-canvas/node_modules/chart.js/dist/chart.js:7108:10)

my source code:

let configuration = {
        type: 'doughnut',
        data: {
            labels: ....labels here,
            datasets: [
                {
                    data: ..... data here,
                    backgroundColor: .... background color here
                }
            ]
        },
        options: {
            devicePixelRatio: 2.0,
            maintainAspectRatio: false,
            plugins:{
                legend: {
                    labels:{
                      boxWidth: 15,
                      fontSize: 8
                    },
                    display: true,
                    position: 'right'
                },
                responsive: false,
                datalabels: {
                    anchor: 'center',
                    backgroundColor: null,
                    borderWidth: 0,
                    color: 'black',
                    display: function (context){
                        var dataset = context.dataset;
                        var count = dataset.data.length;
                        var value = dataset.data[context.dataIndex];
                        return value > count * 1.5;
                    },
                    formatter: (value) => {
                        return value + '%';
                    },
                    font: {
                        size: 10
                    } 
                },   

            }

        }
    };
    let width = 400; 
    let height = 200; 

    let chartJSNodeCanvas = new ChartJSNodeCanvas({ 
        width, height, backgroundColour: 'white', plugins: {
            requireLegacy: [
                'chartjs-plugin-datalabels'
            ]
        }
    });

Versions

How can i solve the problem?

A github link may be related to the problem: https://github.com/chartjs/chartjs-plugin-datalabels/issues/141

Thank you For Your Help.

zjacky0409 commented 2 years ago

I found that If i install the chartjs-node-canvas package globally(i.e. npm install chartjs-node-canvas -g), it will occurs the error. If I install it locally(npm install chartjs-node-canvas), it wont occurs the error.