Closed daveywb closed 1 year ago
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.
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>
You can also use this https://github.com/chartjs/chartjs-plugin-datalabels
Checkout https://github.com/chartjs/awesome for more plugins.
Can someone confirm that @Shahzayb solution works with React? I wanted to add the info in the readme.
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;
};```
Thanks @Levy-D , I added the info in the readme. Can you help @MrWhiteX with #14 too?
Chartjs plugin labels with Meteor, it not working
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?
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';
), addedlabels:{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.