ChartJS on small screen

Question

I want to make a responsive chart using ChartJS library. Everything works okay on screens wider than ~430px, but under this amount, the chart becomes 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

Answer 1

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;

Answer 2

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