3

I am trying to implement this chart using the module react-chartjs-2 I installed the module:

npm install --save react-chartjs-2 chart.js

So I have this in package.json:

  "chart.js": "^2.9.4",
  "react-chartjs-2": "^2.11.1"

I copied the chart code from github:

import React from 'react'
import { Line } from '@reactchartjs/react-chart.js'

const data = {
  labels: ['1', '2', '3', '4', '5', '6'],
  datasets: [
    {
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      fill: false,
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgba(255, 99, 132, 0.2)',
    },
  ],
}

const options = {
  scales: {
    yAxes: [
      {
        ticks: {
          beginAtZero: true,
        },
      },
    ],
  },
}

const LineChart = () => (
  <>
    <div className='header'>
      <h1 className='title'>Line Chart</h1>
      <div className='links'>
        <a
          className='btn btn-gh'
          href='https://github.com/reactchartjs/react-chartjs-2/blob/react16/example/src/charts/Line.js'
        >
          Github Source
        </a>
      </div>
    </div>
    <Line data={data} options={options} />
  </>
)

export default LineChart

But, I keep getting this error:

Module not found: Can't resolve '@reactchartjs/react-chart-2.js'

Any idea what I did wrong?

AG_HIHI
  • 1,705
  • 5
  • 27
  • 69

4 Answers4

7

Just in case someone faces the same error, just do this:

import { Line } from "react-chartjs-2";
AG_HIHI
  • 1,705
  • 5
  • 27
  • 69
6

I Had The Same Problem , This Worked For Me.

yarn add react-chartjs-2 chart.js

For some reason, npm did not work.

Timeless
  • 7,338
  • 9
  • 60
  • 94
Fine Boy
  • 321
  • 4
  • 6
  • This solved my issue. Never expected that npm would not work. If anyone having issues with yarn, follow use : https://stackoverflow.com/a/66239058/3921632 and then run the "yarn add react-chartjs-2 chart.js" – techcomp Feb 17 '22 at 10:16
0
import { Bar,Line } from "react-chartjs-2/dist";
Amarjit Pheiroijam
  • 11
  • 2
  • 3
    [A code-only answer is not high quality](//meta.stackoverflow.com/questions/392712/explaining-entirely-code-based-answers). While this code may be useful, you can improve it by saying why it works, how it works, when it should be used, and what its limitations are. Please [edit] your answer to include explanation and link to relevant documentation. – Stephen Ostermiller Jan 03 '23 at 09:36
0

This problem occurrs due to npm not installing that package properly

yarn add react-chartjs-2 chart.js  --network-timeout 1000000000

This is working for me

Hille
  • 2,123
  • 22
  • 39
Kishor Indhe
  • 1