Search code examples
chart.jsreact-chartjs

Line is rendering only vertical line instead of sloped line

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

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: project set-up

Your help is greatly appreciated!

Solution

  • 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'

    =)