Line is rendering only vertical line instead of sloped line

Question

Line is not rendering correctly. It's rendering as instead of

My code is as follows:

LineGraph.js:

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

function Linegraph() {
    return (
        <div className="linegraph">
            <Line
                data={{
                    datasets:[{
                        type:"line",
                        data:[{x:10,y:20},{x:15,y:10},{x:12,y:4}],
                        backgroundColor:"black",
                        borderColor:'#5AC53B',
                        borderWidth:2,
                        pointBorderColor:'rgba(0,0,0,0)',
                        pointBackgroundColor:'rgba(0,0,0,0)',
                        pointHoverBackgroundColor:'#5AC53B',
                        pointHoverBorderColor:"#000000",
                        pointHoverBorderWidth:4,
                        pointHoverRadius:6,
                    }]
                }}
            />
        </div>
    )
}

export default Linegraph

I'm following a tutorial here and at 1:33:17 they were successfully able to implement it while mine remained as the vertical line going straight down.

Here's also a screenshot of my project set-up:

Your help is greatly appreciated!

Answer 1

You could change the chart type to 'scatter' and add the property drawLine: true to the dataset.

datasets:[{
  type: "scatter",
  drawLine: true,
  data:[{x:10,y:20},{x:15,y:10},{x:12,y:4}],
  ...

The Chart.js documentation states that scatter charts are based on basic line charts with the x axis changed to a linear axis.

Therefore, assuming you're using react-chartjs-2 together with Chart.js v3, you may also keep type: 'line' but will have to define the x-axis as type: 'linear' as follows:

data={{
  type: "line",
  ...
}}
options={{
  scales: {
    x: {
      type: "linear"
    }
  }
}}

Answer 2

We ended up getting this to work by going inside package.json and setting the following versions:

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

=)