0

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;

current chart

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

Jantoma21
  • 395
  • 4
  • 10
  • unfortunately as far as I know, you probably need to construct the gauge chart from scratch. i have an answer to a [similar question](https://stackoverflow.com/questions/70864936/gauge-chart-in-plotly-to-give-more-than-180-degree-more-than-a-circle) that might be able to serve a template. if i have time later, i can turn this into an answer – Derek O Sep 19 '22 at 17:00
  • 1
    @DerekO okay, thank you. I will check into your other answer – Jantoma21 Sep 19 '22 at 17:13

0 Answers0