React Js and Chart Js (Line Chart)

Question

I am trying to add line chart from chart js in react component. I have tried the following code but its showing white screen and no errors. I couldn't figure out what i did wrong. I went through chart.js documentation and got confused. Please give me suggestion how can i display the chart. I'm using react-chartjs-2 version 4.0.0 and chart.js version 3.7.0.

import React from "react";
import {Line} from 'react-chartjs-2';

const data = {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [
      {
        label: 'Rainfall',
        fill: false,
        lineTension: 0.5,
        backgroundColor: 'rgba(75,192,192,1)',
        borderColor: 'rgba(0,0,0,1)',
        borderWidth: 2,
        data: [65, 59, 80, 81, 56]
      }
    ]
  }

  const config = {
    type: 'line',
    data: data,
    options: {
      responsive: true,
      plugins: {
        legend: {
          position: 'top',
        },
        title: {
          display: true,
          text: 'Chart.js Line Chart'
        }
      }
    },
  };

const SavingsChart = () => {
    return (
          <Line
            data={data}
            options={config}
          />
      );
};

export default SavingsChart;

Tomas Vancoillie · Accepted Answer · 2022-01-18 11:12:39Z

3

You should register the chart from chart.js

See an example here

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from 'chart.js';

ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);

answered Jan 18, 2022 at 11:12

Tomas Vancoillie

3,8682 gold badges36 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TheTisiboth · Accepted Answer · 2022-01-18 11:00:58Z

0

You can try to add this line in the beginning of your file, it seems to fix this issue: import Chart from "chart.js/auto";

answered Jan 18, 2022 at 11:00

TheTisiboth

1,7011 gold badge8 silver badges18 bronze badges

Comments

uminder · Accepted Answer · 2022-01-19 14:46:56Z

0

You could create the chart in the render() method.

render() {
  return (
    <Line 
      data={this.state.data}
      options={this.state.options}
    />
  );
}

Please take a look at the following StackBlitz and see how it works with your amended code.

answered Jan 19, 2022 at 14:46

uminder

26.4k6 gold badges45 silver badges91 bronze badges

Collectives™ on Stack Overflow

React Js and Chart Js (Line Chart)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related