Import Chart from react-chartjs-2 invalid

[gravitymedianet]

I am trying to extend Chart.js, when I use the sample code given in the readme, which says:

import { Chart } from 'react-chartjs-2';

componentWillMount() {
  Chart.pluginService.register({
    afterDraw: function (chart, easing) {
      // Plugin code.
    }
  });
}

I get the following error from VS Code:

Module '"react-chartjs-2"' has no exported member 'Chart'. Did you mean to use 'import Chart from "react-chartjs-2"' instead?

Using version "react-chartjs-2": "^2.11.1",

I ended up doing Import Chart from "chart.js";

[YakovlevCoded]

Hello, I updated the wrapper version. Try to install the ^3.0.2 version. You can import Chart or add plugins as props. You can see more info here: https://github.com/reactchartjs/react-chartjs-2#plugins

[SliiCer]

Hello,

Can u please provide a sample code on how to use afterDraw/afterDatasetsDraw/afterLayout... plugins. With 3.x.x version. I tried many differents way without result :s

[ar-lk]

Sorry for the late reply. but @SliiCer if you still need to know how to use afterDraw/afterDatasetsDraw/afterLayout. try this. i'm using react-chartjs-2 v3.2.0

//chart plugins
var chartpluginsset = [
    {
        afterDatasetDraw: (chart) => {
          console.log('After draw: ', chart);
       }
    }
];

//add plugins as a prop to your rendering chart
<Line data={data} options={options} plugins={chartpluginsset } />

[mkhoussid]

I ended up hiding the canvas if there is no data and showing a div element with the No data message.

Something like this:

import * as React from 'react';
import { Bar as RCBar } from 'react-chartjs-2';
import clsx from 'clsx';

const useStyles = makeStyles({
    container: {},
    hidden: {
        display: 'none',
    },
    showNoData: ({ width, height }) => ({
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        width,
        height,
    }),
});

const BarChart = React.memo(({ metrics }) => {
    const canvasRef = React.useRef(null);
    const chartContainerRef = React.useRef(null);

    const [hasNoData, setHasNoData] = React.useState(false);
    const [noDataConfig, setNoDataConfig] = React.useState({
        width: 0,
        height: 0,
    });

    const classes = useStyles(noDataConfig);

    React.useEffect(() => {
        // check if no data
        if (!metrics.events.length) {
            setHasNoData(true);

            // set div dimensions based on canvas dimensions
            setNoDataConfig({
                width: canvasRef.current.chartArea.width,
                height: canvasRef.current.chartArea.height,
            });

            // hide canvas
            chartContainerRef.current.style.display = 'none';
        }
    }, [metrics]);

    return (
        <div className={classes.container}>
            <div ref={chartContainerRef}>
                <RCBar options={. . .} data={. . .} ref={canvasRef} />
            </div>
            <div
                className={clsx(classes.hidden, {
                    [classes.showNoData]: hasNoData,
                })}
            >
                <div>{'No data'}</div>
            </div>
        </div>
    );
});

export default BarChart;