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) 
        }]
      }
    ]
  };
}

Could you post more of your code? With most of it redacted it's hard to figure out if anything else is causing this. — Will Hawker, Jul 13 '17 at 09:42
It works for me. If you download highcharts package by npm default paths are different - https://jsfiddle.net/xtu0e60m/. How many times calls like HighchartsMore(React.Highcharts) are invoked? It should be done only once. — morganfree, Jul 13 '17 at 10:14
@morganfree I just call HighchartsMore(React.Highcharts) in constructor. so , it should once. — Giambi Huang, Jul 14 '17 at 05:23
It shoudn't be placed in the constructor if the component is created multiple times (it will wrap already wrapped file and cause the issue). It should be called once per app, e.g. when you bootstrap the app. — morganfree, Jul 14 '17 at 10:15

score 6 · Accepted Answer · answered Jul 14 '17 at 11:18

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.

Why ReactHighcharts SolidGauge's rounded is not working in react

1 Answers1