Support for Gauge charts

[juwilliams]

Thanks for the work on this, super useful library.

Quick question however, is there support for highcharts-more? I can't seem to get any of the charts provided there working with this.

[whawker]

Glad you like it! How are you importing highcharts-more into your code?

It should be something like

import Highcharts from 'highcharts';
require('highcharts/highcharts-more')(Highcharts);

[juwilliams]

Yeah that was my approach. Apologies, should have clarified in my initial question that I'm receiving an error that the type of series is unsupported (solidgauge)

Highcharts error #17: www.highcharts.com/errors/17

This is with Chart prop type = solidgauge and Series type = solidgauge.

[whawker]

Ah you also need the solid-gauge module for that series, see here.

So... (I think)

import Highcharts from 'highcharts';
require('highcharts/highcharts-more')(Highcharts);
require('highcharts/modules/solid-gauge')(Highcharts);

[juwilliams]

Running into an issue with the hard coded values for expected chart and series types.

proxyConsole.js:56 Warning: Failed prop type: Invalid prop type of value solidgauge supplied to Chart, expected one of ["area","arearange","areaspline","areasplinerange","bar","boxplot","bubble","candlestick","column","columnrange","errorbar","flags","funnel","line","ohlc","pie","polygon","pyramid","scatter","spline","treemap","waterfall"].

proxyConsole.js:56 Warning: Failed prop type: Invalid prop type of value solidgauge supplied to Series, expected one of ["area","arearange","areaspline","areasplinerange","bar","boxplot","bubble","candlestick","column","columnrange","errorbar","flags","funnel","line","ohlc","pie","polygon","pyramid","scatter","spline","treemap","waterfall"].

[whawker]

Ah, I haven't added support for gauges yet, but maybe that prop type validation is too restrictive. Does it work despite the warning?

[juwilliams]

It doesn't. Seems like it fails to generate the yAxis.

highcharts.js:10 Uncaught Error: Highcharts error #18: www.highcharts.com/errors/18

[whawker]

Would you be able to paste the code you're seeing this error with?

I was hoping it would work similar to the Funnel example, which has no axes. https://whawker.github.io/react-jsx-highcharts/examples/Funnel/index.html

[whawker]

P.s. just pushed a commit which removes the prop type validation for series type

[juwilliams]

Thanks for the update. I'm not seeing the errors anymore though it still is not rendering the gauge. In all examples I've seen of the solid-gauge it utilizes a pane object to set up the tracks for the gauge. Are props passed down through the HighchartsChart component?

`import React from 'react';

import Highcharts from 'highcharts';

import {
HighchartsChart,
Chart,
Legend,
Title,
XAxis,
YAxis,
Tooltip,
PlotLine,
Series
} from 'react-jsx-highcharts';

require('highcharts/highcharts-more')(Highcharts);
require('highcharts/modules/solid-gauge')(Highcharts);

const CubeChart = props => {
const { config, yAxis } = props;

const plotOptions = {
	solidgauge: {
		dataLabels: {
			enabled: false
		},
		linecap: 'round',
		rounded: true
	}
};

const data = [
	{
		color: Highcharts.getOptions().colors[0],
		radius: '112%',
		innerRadius: '88%',
		y: 80
	}
];

return (
	<HighchartsChart plotOptions={plotOptions}>
		<Chart
			type="solidgauge"
			backgroundColor={config.chart && config.chart.backgroundColor}
		/>
		<YAxis min="0" max="100" lineWidth="0" tickPositions={[]}>
			<Series
				id="gauge-test"
				name="gauge-test"
				data={data}
				type="solidgauge"
			/>
		</YAxis>
	</HighchartsChart>
);

};

export default CubeChart;`

[whawker]

So this isn't your code, but it's an example of a Gauge chart, it's a little hacky though as I've never really tried to properly support it. It might give you something to work from though?

A few notes

• <XAxis > seems to be required for gauges
• Chart type (for gauges) needs to be provided on chart initialisation (see <HighchartsChart chart={{ type: 'solidgauge' }} rather than on <Chart /> component)
• P.s. Remember to give your <YAxis /> an id prop and pass integers as prop={1} rather than as strings prop="1"

import React, { Component } from 'react';
import Highcharts from 'highcharts';
import {
  HighchartsChart, Series, XAxis, YAxis
} from 'react-jsx-highcharts';

require('highcharts/highcharts-more')(Highcharts);
require('highcharts/modules/solid-gauge')(Highcharts);

class GaugeChart extends Component {

  render() {
    const plotOptions = {
      solidgauge: {
        dataLabels: {
          y: 5,
          borderWidth: 0,
          useHTML: true
        }
      }
    };

    const paneOptions = {
      center: ['50%', '85%'],
      size: '140%',
      startAngle: -90,
      endAngle: 90,
      background: {
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
        innerRadius: '60%',
        outerRadius: '100%',
        shape: 'arc'
      }
    };

    return (
      <div className="app">
        <HighchartsChart chart={{ type: 'solidgauge' }} plotOptions={plotOptions} pane={paneOptions}>
          <XAxis />

          <YAxis
            id="myAxis"
            min={0}
            max={200}
            lineWidth={0}
            minorTickInterval={null}
            tickAmount={2}
            labels={{ y: 16 }}>

            <Series
              id="gauge-test"
              name="gauge-test"
              data={[80]}
              type="solidgauge" />
          </YAxis>
        </HighchartsChart>
      </div>
    );
  }
}

export default GaugeChart;

[juwilliams]

Sweet, this works. Thanks for providing the example!