How to make a 30days chart responsive on mobile using chart.js?

Question

I made a chart that included 30 days of absent data and I made it using the react-chartjs-2 library but the results are not responsive how to make it responsive?

this is what it looks like on a laptop: chart on laptop

and this if it looks on mobile: chart on mobile

this is my code:

  this.state = {
  loadFirst: true,
  loadData: false,
  filterYear: moment().format('YYYY'),
  filterMonth: moment().format('MM'),
  filtered: {
    year: moment().format('YYYY'),
    month: moment().format('MM')
  },
  data: {},
  options: {
    scales: {
      yAxes: [
        {
          stacked: true,
          ticks: {
            beginAtZero: true
          }
        }
      ],
      xAxes: [
        {
          stacked: true
        }
      ]
    }
  }
}

and this:

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

how to fix it?

i want my chart data in the form of bars to remain visible at mobile size, or how to make it scroll? — Fraza Aditya Wiguna, Sep 08 '21 at 13:50

score 0 · Answer 1 · answered Sep 08 '21 at 14:31

0

There are limitations to how small you can go because chart.js still needs to draw it, you can disable the legend while on mobile to give the chart a bit more space to work with since its taking up most of the canvas or you can increase the size of the canvas

answered Sep 08 '21 at 14:31

LeeLenalee

27,463
6
45
69

thanks for the advice, I've done adding the width and making the overflow to auto. – Fraza Aditya Wiguna Sep 09 '21 at 03:31

How to make a 30days chart responsive on mobile using chart.js?

1 Answers1