I want to make a responsive chart using ChartJS library. Everything works okay on screens wider than ~430px, but under this amount, the chart bees so small it dissapears. I want to make the graph visible as in 3rd image

More than ~430px:

Less than ~430px:

How would I want it:

EDIT: How currently it looks like:

<div className="graph">
<Topic />
<Doughnut data={{
  labels: ['Red', 'Blue', 'Yellow', 'Green'],
  datasets: [{
    label: '# of Votes',
    data: [12, 19, 3, 5],
    backgroundColor: [
      'rgba(255, 99, 132, 0.3)',
      'rgba(54, 162, 235, 0.3)',
      'rgba(255, 206, 86, 0.3)',
      'rgba(75, 192, 192, 0.3)',
    ],
    borderColor: [
      'rgba(255,99,132,1)',
      'rgba(54, 162, 235, 1)',
      'rgba(255, 206, 86, 1)',
      'rgba(75, 192, 192, 1)',
    ],
    borderWidth: 1
  }]
}}
/>

That's my code, just copy-paste to test the library. Maybe default height and width would help, but I need it responsive. How can I set it to work?

CSS wrappers look like this:

.Statistics .graphContainer{
   background-color: black;
   background-color: rgba(0,0,0,0.75);
   border: black solid;
   border-width: 3px;
   border-radius: 5px;
   margin-top: 75px;
   padding: 10px;
}

.Statistics .graph{
   margin-left: 10px;
   margin-top: 10px;
}

Additionally, .graph lies in .graphContainer

I want to make a responsive chart using ChartJS library. Everything works okay on screens wider than ~430px, but under this amount, the chart bees so small it dissapears. I want to make the graph visible as in 3rd image

More than ~430px:

Less than ~430px:

How would I want it:

EDIT: How currently it looks like:

<div className="graph">
<Topic />
<Doughnut data={{
  labels: ['Red', 'Blue', 'Yellow', 'Green'],
  datasets: [{
    label: '# of Votes',
    data: [12, 19, 3, 5],
    backgroundColor: [
      'rgba(255, 99, 132, 0.3)',
      'rgba(54, 162, 235, 0.3)',
      'rgba(255, 206, 86, 0.3)',
      'rgba(75, 192, 192, 0.3)',
    ],
    borderColor: [
      'rgba(255,99,132,1)',
      'rgba(54, 162, 235, 1)',
      'rgba(255, 206, 86, 1)',
      'rgba(75, 192, 192, 1)',
    ],
    borderWidth: 1
  }]
}}
/>

That's my code, just copy-paste to test the library. Maybe default height and width would help, but I need it responsive. How can I set it to work?

CSS wrappers look like this:

.Statistics .graphContainer{
   background-color: black;
   background-color: rgba(0,0,0,0.75);
   border: black solid;
   border-width: 3px;
   border-radius: 5px;
   margin-top: 75px;
   padding: 10px;
}

.Statistics .graph{
   margin-left: 10px;
   margin-top: 10px;
}

Additionally, .graph lies in .graphContainer

• javascript
• css
• reactjs
• chart.js

Share Improve this question Follow edited Mar 1, 2021 at 3:09 Gucal 93311 gold badge1212 silver badges2222 bronze badges asked Oct 3, 2018 at 18:52 Slawomir WozniakSlawomir Wozniak 51866 silver badges1616 bronze badges 8

• You can set a default width & height when your screen is small than 430px. – dsantoro Commented Oct 3, 2018 at 19:01
• There are responsive options (prop) that can be passed to ponents such as <Doughnut /> to make them responsive. Have you tried that option? – Alexander Staroselsky Commented Oct 3, 2018 at 19:04
• @AlexanderStaroselsky It seems that responsive option is default, and because it indeed resizes, it's true already – Slawomir Wozniak Commented Oct 3, 2018 at 19:20
• @dsantoro I tried this on canvas and it stretches the graph making it ugly. – Slawomir Wozniak Commented Oct 3, 2018 at 19:22
• 1 @SlawekWozniak you probably will want to update your question to indicate what you actually want it to look like at mobile screen sizes. This will help ensure you get the best assistance. – Alexander Staroselsky Commented Oct 4, 2018 at 2:29

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 3

I believe that following settings will work for you. Set responsive to true, maintainAspectRatio to false in the chart options and set style as like as max-height: 300px; width: auto;

I know this thread is a bit old - but this worked for me

plugins: {
            legend: {
                display: true,
                position: function () {
                    //you can return position based on inner width of your display area
                    if (window.innerWidth < 600) {
                        return "bottom";
                    }

You could try giving it a min-width (something like 200px) and height: auto.