jhonnold / react-chart.js

React Components for the popular chart library Chart.js

@jhonnold/react-chart.js

React Components for the popular Chart.js libary

Install

npm install --save @jhonnold/react-chart.js chart.js

chart.js is a peer-dependency and must be installed alongside this library

Getting Started

import { BarChart } from '@jhonnold/react-chart.js';

<BarChart data={...} />

General

Direct examples of each chart type can be found in examples.

Live Examples: Github Pages

Components

import ChartComponent, {
    LineChart,
    BarChart,
    HorizontalBarChart,
    RadarChart,
    DoughnutChart,
    PolarAreaChart,
    BubbleChart,
    PieChart,
    ScatterChart,
} from '@jhonnold/react-chart.js';

Configure

Props

const {
    id,         // string
    height,     // number
    width,      // number
    redraw,     // boolean
    type,       // string (required only on ChartComponent)
    data,       // chart.js dataObj or fn that returns dataObj (required)
    options,    // chart.js options
    plugins,    // chart.js plugins
} = props;

id

Type: string Default: undefined

ID attribute applied to the rendered canvas

height

Type: number Default: 150

Height attribute applied to the rendered canvas

width

Type: number Default: 300

Width attribute applied to the rendered canvas

redraw

Type: boolean Default: false

If true, will tear down and redraw chart on all updates

type

Type: 'line' | 'bar' | 'horizontalBar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'

Chart.js chart type (required only on ChartComponent)

data (required)

Type: ((canvas: HTMLCanvasElement | null): Chart.ChartData) | Chart.ChartData

The data object that is passed into the Chart.js chart (more info).

This can also be a function, that receives a canvas element and returns the data object.

const data = canvas => {
    const ctx = canvas.getContext('2d');
    const g = ctx.createLinearGradient(...);

    // ...

    return {
        datasets: [{
            backgroundColor: g,
            //. ..
        }],
        // ...
    };
}

options

Type: Chart.ChartOptions

The options object that is passed into the Chart.js chart (more info)

plugins

Type: Chart.PluginServiceRegistrationOptions[]

The plugins array that is passed into the Chart.js chart (more info)

License

MIT © jhonnold

react-chart.js's Issues

Can't resolve module chart.js compile error

My build fails to compile because it can't resolve chart.js in dist/index.js. I've tried uninstalling the package and reinstalling but same error occurs. No changes have been made to the original code.

Chart appears but bar values don't

Hi Jay,

I have a really super simple chart that I generate from some data from web service, I pass the data into the component and I'm using the useEffect hook to render the chart. Here's the code:

export const RetirementChart = ({retirementData}) => {

    const [chart, setChart] = useState(null);
   

    useEffect(() => {
        if (retirementData && retirementData.coefficients) {
            let retirementSchedule = retirementData.coefficients.find(coeff => coeff.name === 'retirementSchedule');


            if (retirementSchedule && retirementSchedule.value) {
                const labelArray = [];
                const dataArray = [];
                const backgroundColorArray = [];
                const borderColorArray = [];

                retirementSchedule.value.forEach(entry => {
                    labelArray.push(entry.year.toString());
                    let balance = parseFloat(entry.balance.toFixed(2));
                    dataArray.push(balance);
                    backgroundColorArray.push('rgba(60, 179, 113, .75)');
                    borderColorArray.push('rgba(0,0,0,1)');
                });

                let data = {
                    datasets: [
                        {
                            labels: labelArray,
                            data: dataArray,
                            label: "Estimated Balance"
                        }
                    ],
                    borderWidth: 1,
                    backgroundColor: backgroundColorArray,
                    borderColor: borderColorArray,
                };

                let theChart = <Bar data={data}/>
                setChart(theChart);

            }
        }
    }, []);

    return (
        <div>
            {chart}
        </div>
    )
};

So when I call the service, the data definitely comes back, and I can see the chart, with the Y-axis correctly scaled to the data, but I just don't see any bar values.

Maybe I'm missing something else. Can you point me in the right direction. Thanks for your help.