Search code examples
reactjsgraphchart.jsbar-chartreact-chartjs

Reactjs- Bar Graph-chartjs- Data not coming in individual blocks

My data format is this for bar graph: [img1][1]

The graph I'm getting is this: [img2][2]

I want separate blocks for separate dates. What am I doing wrong here?

Implemented using <Bar data={data} options={options} />

where data is what is shown in picture 1 and options is:

      scales: {
        yAxes: [{
          display: true,
          ticks: {
            beginAtZero: true
          }
        }],
        xAxes: [{
          display: true,
          ticks: {
            beginAtZero: true
          }
        }]
      },
      legend: {
        display: false
      }
   }; ```

  [1]: https://i.sstatic.net/vqggX.png
  [2]: https://i.sstatic.net/E6HUZ.png
Solution

  • This is because your labels array is a nested array so chart.js sees it as a multi line array. If you change it to a single flat array it will work just fine