Do you know if this should work with React?

[daveywb]

Firstly, thanks for updating this for v3!

I'm trying to use this with React. I've npm installed the package, imported it into my file (import 'chart.js-plugin-labels-dv';), added labels:{render: 'label'} to the plugins object, but it doesn't seem to have any effect.

I'm using react-chartjs-2 (which works with v3 even though the name is a little misleading)

Should this work?

Thanks.

[DavideViolante]

Honestly I don't know since I don't use React. It should work since it's working on Angular.
Try importing this instead

import Chart from 'chart.js/auto';

If you make this work I'll add info in the Readme.

[Shahzayb]

import React from 'react';
import Chart from 'chart.js/auto';
import * as helpers from 'chart.js/helpers';

function ChartProvider({children}) {
  React.useEffect(() => {
    window.Chart = Chart;
    Chart.helpers = helpers;
    import('chart.js-plugin-labels-dv');
  }, []);
  return children;
}

export default ChartProvider;

<ChartProvider>
  <App />
</ChartProvider>

[Shahzayb]

You can also use this https://github.com/chartjs/chartjs-plugin-datalabels

[Shahzayb]

Checkout https://github.com/chartjs/awesome for more plugins.

[DavideViolante]

Can someone confirm that @Shahzayb solution works with React? I wanted to add the info in the readme.

[Levy-D]

This works for me, with one change:

import React from 'react';
import { Chart } from 'chart.js'; //Changed import
import * as helpers from 'chart.js/helpers';

export const LabelPluginProvider: React.FC = ({ children }) => {
    React.useEffect(() => {
        window.Chart = Chart;
        Chart.helpers = helpers;
        import('chart.js-plugin-labels-dv');
    }, []);
    return children;
};```

[DavideViolante]

Thanks @Levy-D , I added the info in the readme. Can you help @MrWhiteX with #14 too?

[leduccuong2104]

Chartjs plugin labels with Meteor, it not working

[keremilhan]

This works for me, with one change:

import React from 'react';
import { Chart } from 'chart.js'; //Changed import
import * as helpers from 'chart.js/helpers';

export const LabelPluginProvider: React.FC = ({ children }) => {
    React.useEffect(() => {
        window.Chart = Chart;
        Chart.helpers = helpers;
        import('chart.js-plugin-labels-dv');
    }, []);
    return children;
};```

This doesn't work for me. Can anyone help me?