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

Question

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?

Timeless · Accepted Answer · 2021-11-05 08:40:29Z

7

I Had The Same Problem , This Worked For Me.

yarn add react-chartjs-2 chart.js

For some reason, npm did not work.

edited Nov 5, 2021 at 8:40

Timeless

7,59710 gold badges65 silver badges96 bronze badges

answered Jun 4, 2021 at 15:54

Newton Karani

3595 silver badges7 bronze badges

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

1 Comment

techcomp Over a year ago

This solved my issue. Never expected that npm would not work. If anyone having issues with yarn, follow use : stackoverflow.com/a/66239058/3921632 and then run the "yarn add react-chartjs-2 chart.js"

AG_HIHI · Accepted Answer · 2021-01-15 14:23:01Z

6

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

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

answered Jan 15, 2021 at 14:23

AG_HIHI

2,0656 gold badges40 silver badges101 bronze badges

2 Comments

Chidiebere Ezeokwelume Over a year ago

Not helpful at all. Did not solve it

Jayakumar Thangavel Over a year ago

It is not helpful

Amarjit Pheiroijam · Accepted Answer · 2023-01-03 08:29:46Z

1

import { Bar,Line } from "react-chartjs-2/dist";

edited Jan 3, 2023 at 8:29

answered Jan 3, 2023 at 8:29

Amarjit Pheiroijam

213 bronze badges

1 Comment

Stephen Ostermiller Over a year ago

A code-only answer is not high quality. 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.

Hille · Accepted Answer · 2023-01-19 14:00:14Z

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

edited Jan 19, 2023 at 14:00

Hille

2,3611 gold badge29 silver badges43 bronze badges

answered Jan 18, 2023 at 6:37

Kishor Indhe

1

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related