CODEWITHSUNDEEP
javascriptreactjschart.js2
Denisepen
Denisepen

Reputation: 1

React-Chartjs-2: All Data Not Showing on The Chart

I'm trying to create line charts using react-chartjs-2. I am getting the data from an api and rendering it to each chart during the componentWillMount phase. I know that I'm getting the correct data because I originally created the charts using Sparklines components and the charts were perfect. I decided to use Chartjs instead because of the ability to customize the charts. The problem is that only the first 2 data points are showing up on each chart. Can someone please tell me what I'm doing wrong here? Am I forgetting something in the chart options? I'm relatively new to React so I'm just getting a feel for using outside components. Thanks!

import {Bar, Line, Pie} from 'react-chartjs-2';



export default (props) => {

const chartData = {
  labels:  [],
  datasets: [{
    label: 'Total Kills per Game',
    data: props.data,
    backgroundColor: props.color
  }]
}

return(

<div className="chart">
  <Line
    data={chartData}

    options={{

      maintainAspectRatio: false,
        title: {
          display: false,
          text: 'Title',
          fontSize: 25
        },
        legend: {
          display: false,
          position: 'bottom'
        },
        scales: {
       xAxes: [{
        scaleLabel: {
            display: true,
            labelString: 'Date',
            fontSize: 10
        },
        //type: 'linear',
        position: 'bottom',
        gridLines: {
            display: false
        }
     }],
       yAxes: [{
        scaleLabel: {
            display: true,
            labelString: 'Total',
            fontSize: 10
         }
       }]
      }
    }}
  />

</div>
 )
}

Upvotes: 0

Views: 7456

Answers (2)

Alexander Hades
Alexander Hades

Reputation: 113

Try setting your labels vaiable to something other than empty list - e.g. Array(this.props.date.length).map((x) => x)

const chartData = {
   labels:  Array(props.data.length).map((x) => x),
   datasets: [{
   label: 'Total Kills per Game',
   data: props.data,
   backgroundColor: props.color
}]

Upvotes: 2

menomanabdulla
menomanabdulla

Reputation: 175

Yes you are solid on that point your data has arrived perfectly.The conflict is you have faced that "maintainAspectRatio: false". maintainAspectRatio is used for scaled map height based on data ratio.

Just Remove "maintainAspectRatio: false" form options,you will get it perfect.

Thank You.

Upvotes: 0

Related Questions