CODEWITHSUNDEEP
chart.jsreact-chartjs
buben
buben

Reputation: 1

How can I use npm-plugins with react-chartjs-2?

I use react-chartjs-2 with chartjs in my app and I want to use chartjs-plugin-datalabels to display titles. How can I register this plugin in react-chartjs-2?

I have further studied the problem. And I found out that there is a problem with the chartjs interfaces (I use typescript). According with shartjs docs I can specify the dataset as arrays of two numbers.

data: [[5,6], [-3,-6]]

But interface (from chartjs) declared as 

data?: Array<number | null | undefined> | ChartPoint[];

This is a contradiction. And there are lots of the same properties. I guess that's why the plugins don't work.

Chart config

let options = {
    plugins: {
        datalabels: {
            formatter(value: any, context: any) {
                if (value) {
                    return context.dataset.label;
                }

                return '';
            },
        },
    },
    title: {
        display: false,
    },
    maintainAspectRatio: false,
    resposive: false,
    tooltips: {
        mode: 'index',
        intersect: true,
    },
    scales: {
        xAxes: [{
            ticks: {
                suggestedMin: 0,
                suggestedMax: 100,
                stepSize: 1,
                display: false,
            },
            display: false,
            stacked: false,
            scaleLabel: {
                display: false,
            },
        }],
        yAxes: [{
            stacked: true,
            ticks: {
                display: false,
            },
        }],
    },
    legend: {
        display: false,
    },
};

Upvotes: 0

Views: 2351

Answers (1)

Tom Phan
Tom Phan

Reputation: 76

do you mean how do you import it into your project?

I use chartjs-plugin-annotation and I just add to the top in the import section:

import 'chartjs-plugin-annotation';

Upvotes: 1

Related Questions