Chartjs-Line is rendering only vertical line instead of sloped line

by

0👍

✅

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'

=)

0👍

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"
    }
  }
}}

Leave a comment