Why ReactHighcharts SolidGauge's rounded is not working in react

Question

I use react-highcharts to create a SolidGauge in my Dashboard Page.

and draw rounded edges.

So , I setting the plotOptions.rounded to true.

code:

import ReactHighcharts from 'react-highcharts';
import HighchartsMore from 'highcharts-more';
import SolidGauge from 'highcharts-solid-gauge';

HighchartsMore(ReactHighcharts.Highcharts);
SolidGauge(ReactHighcharts.Highcharts);

...
<ReactHighcharts config={ config }/>

config = {
  ...
  plotOptions: { 
    solidgauge: {
      dataLabels: {
        enabled: false
      },
      linecap: 'round',
      rounded: true,
      stickyTracking: false
    }
  }
}

It is working in official jsfiddle with same config setting.

but ReactHighcharts is not working.

Does anyone have a suggestion or can help ?

Thank you for any help you can provide.

07/14 update

code:

import React, { Component } from 'react';
import ReactHighcharts from 'react-highcharts';
import HighchartsMore from 'highcharts-more';
import SolidGauge from 'highcharts-solid-gauge';

class Demo extends Component {
  constructor (props) {
    super(props);
    HighchartsMore(ReactHighcharts.Highcharts);
    SolidGauge(ReactHighcharts.Highcharts);
  }
  render () {
    return (
      <ReactHighcharts config={
      multiChartsConfig(460,60,40,10,'Total','Sent')}></ReactHighcharts>
    );
  }
}

const multiChartsConfig = (value, open, click, placement, str1, str2) => {
  return {
    chart: {
        type: 'solidgauge',
        height: 180,
        width: 185,
        marginTop: 10,
        marginBottom: 0,
        style: { margin: 'auto' }
    },
    title: null,
    pane: {
        startAngle: 0,
        endAngle: 360,
        background: [
          {
            backgroundColor: '#D8D8D8',
            outerRadius: '110%',
            innerRadius: '100%',
            borderWidth: 0
          },{
            backgroundColor: '#D8D8D8',
            outerRadius: '93%',
            innerRadius: '83%',
            borderWidth: 0
          },{
            backgroundColor: '#D8D8D8',
            outerRadius: '76%',
            innerRadius: '66%',
            borderWidth: 0
          }
        ]
    },
    tooltip:     {
        enabled: false
    },
    // the value axis
    yAxis: {
      min: 0,
      max: 100,
      lineWidth: 0,
      tickPositions: []
    },
    plotOptions: {
      solidgauge: {
        borderWidth: '34px',
        dataLabels: {
          enabled: true,
          borderWidth: 0,
          y: -30,
          useHTML: true,
          formatter: () => {
            return (`
              <div style="text-align: center;font-size:15px;color: #777777;">
              <div style="color: #009fc5;font-size: 17px;">${value.toLocaleString()}</div><div>${str1}</div><div>${str2}</div>
              </div>
            `);
          }
        },
        linecap: 'round',
        rounded: true,
        stickyTracking: false
      }
    },
    credits:     {
        enabled: false
    },
    series: [
      {
        name: 'open',
        rounded: true,
        data: [{
          color: '#009fc5',
          radius: '110%',
          innerRadius: '100%',
          y: Math.round(open * 100) 
        }]
      },
      {
        name: 'click',
        data: [{
          color: 'green',
          radius: '93%',
          innerRadius: '83%',
          y: Math.round(click * 100) 
        }]
      },
      {
        name: 'placement',
        data: [{
          color: 'red',
          radius: '76%',
          innerRadius: '66%',
          y: Math.round(placement * 100) 
        }]
      }
    ]
  };
}

Answer 1

The problem is where you're getting the solid gauge extension from. The highcharts-solid-gauge package is massively out of date.

Use this instead

import SolidGauge from 'highcharts/modules/solid-gauge';

Version you're using (see https://npmcdn.com/highcharts-solid-gauge@latest) is v4.2.3

Where as the current version is v5.0.12 - https://code.highcharts.com/modules/solid-gauge.js

If you go to the official JSFiddle example you referenced, and change the solid-gauge script src to https://npmcdn.com/highcharts-solid-gauge@latest you'll see the same problem you're having.