How to make chart responsive with Highcharts?

Question

I am using React and Highcharts for a project and want to know how to make this chart below responsive?

I tried to put maxwidth around the component, but did not succeed.

I want him to take all the white div responsibly.

Middle of the graph:

function updateChart(healthscore) {
  return {
    chart: {
      renderTo: "container",
      type: "bar",
      maxWidth: "100%",
      width: 460,
      height: 33,
    },
    title: {
      text: null,
    },
    credits: true,
    legend: true,
    tooltip: true,
    plotOptions: {
      bar: {
        dataLabels: {
          enabled: false,
        },
        borderWidth: 0,
        borderRadius: 0,
      },
    },
    navigation: {
      buttonOptions: {
        enabled: false,
      },
    },
    xAxis: {
      visible: false,
    },
    yAxis: {
      visible: false,
      min: 0,
      max: 100,
      gridLineWidth: 0,
      labels: {
        y: -2,
      },
    },
    series: [
      {
        name: "Fill",
        data: [100],
        color: "#e7eaf3",
        grouping: false,
        enableMouseTracking: false,
      },
      {
        name: "Percentage",
        data: [healthscore],
        color: "#2ecc71",
        dataLabels: {
          enabled: false,
          inside: true,
          align: "center",
          format: "{point.y}%",
          style: {
            color: "white",
            textOutline: false,
          },
        },
      },
    ],
  };
}

Code of graph Component:

<div className={styles.healthScore}>
  <HighchartsReact
    className={styles.charts}
    width={192}
    height={192}
    title={"Em alerta"}
    highcharts={Highcharts}
    options={updateChart(asset.healthscore)}
    allowChartUpdate={[true, true, true]}
  />
</div>

Answer 1

If you fix the width and height will get in the way. In the div that surrounds the highCharts tag you can put a class and add:

.graficos {
  display: flex;
  flex-wrap: wrap;
}

.grafico {
    width: 700px;
    flex-grow: 1;
}

so she’ll have 700px or more

<div class="graficos">
   <div class="grafico">
      <HighchartsReact ... />
   </div>
   <div class="grafico">
      <HighchartsReact ... />
   </div>
</div>