How to make gauge charts edges rounded plotly js?

I want to make this charts edges rounded, how can I do that? I've tried:

border-radius: 100%;
stroke-linejoin: round;
stroke-linecap:round;

none of them worked.

If I give stroke-width: 1, it become slightly rounded but I want it to be completely rounded.

My code:

import Plot from 'react-plotly.js';

const AngularGaugeChart = () => {
  const data: any = [
    {
      domain: {
        x: [0, 1],
        y: [0, 1],
      },
      value: 96,
      title: {
        text: 'Tempture',
        font: { size: 24 },
      },
      type: 'indicator',
      mode: 'gauge+number',
      gauge: {
        axis: {
          range: [0, 100],
          tickwidth: 0,
          tickformat: '',
          tickcolor: 'transparent',
        },
        bar: {
          color: 'gray',
          thickness: 0.9,
        },
        bgcolor: 'white',
      },
    },
  ];
  const layout = {
    autosize: true,
    margin: {
      t: 0,
      b: 0,
      l: 50,
      r: 50,
    },
    paper_bgcolor: '#262626',
    font: {
      color: '#fff',
      family: 'Roboto',
    },
  };
  return (
    <>
      <Plot
        style={{ width: '50%', height: '50%', margin: 'auto' }}
        useResizeHandler={true}
        data={data}
        layout={layout}
      />
    </>
  );
};

export default AngularGaugeChart;

Here is the picture of current status. I'm trying to make these edges rounded.