Series props not working

[ptchiangchloe]

Hi,

I'm new to highcharts and your library so I found it's really hard to understand what's going on. There are a lot of Highcharts api I tried to use in the react component, however, nothing is working. Please let me how to work with Highchart Api, thanks! For example, I want to add tooltip to the series, but it doesn't work, I want to change the series' color into red, it doesn't work either.

import React, { Component } from 'react';
import Highcharts from 'highcharts';
import {
  HighchartsChart, Series, XAxis, YAxis, Title
} 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: 1,
                    useHTML: true,
                    backgroundColor: 'lightblue',
                    color: 'navy'
                },
                lineWidth: 20,
                allowPointSelect: true,
                visible: false
            },
            series: {
                lineWidth: 20
            }
        }

        const YAxisTitleOption = {
            text: "Speedometer",
            useHTML:true,
            margin:100,
            x: 0,
            y: -60
        }

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

        const toolTip = {valueSuffix: ' km/h'}

    return (
        <div className="app">
            <HighchartsChart chart={{ type: 'solidgauge' }} plotOptions={plotOptions} pane={paneOptions} width={300}>
                <Title>LIVE TRAFFIC SPEED</Title>
                <XAxis />
                <YAxis
                id="myAxis"
                title={YAxisTitleOption}
                min={0}
                max={180}
                lineWidth={0}
                minorTickInterval={null}
                tickAmount={6}
                labels={{ y: 16 }}>
                    <Series
                    color="red"
                    dashStyle="Dash"
                    id="gauge-test"
                    name='Speed'
                    data={[90]}
                    lineWidth={20}
                    type="solidgauge"
                    linkedTo="www.facebook.com"
                    tooltip={toolTip} />
                </YAxis>
            </HighchartsChart>
        </div>
    );
    }
}

export default GaugeChart;

[whawker]

Hi @ptchiangchloe, assuming you're using React JSX Highcharts version 2, you'll need to use the withHighcharts wrapper.

When you export the GuageChart use;

export default withHighcharts(GaugeChart, Highcharts);

Example here

[ptchiangchloe]

Hi @whawker,

Thanks for the answer. I'm kind confusing how you integrate different highcharts API in your component since I'm still new to Highcharts, is any docs you could provide? I mean like https://api.highcharts.com/highcharts/series.solidgauge.color. Why you put this property in the data props instead put as in the Series component props?

Thanks,

Han

[whawker]

There is some documentation in the wiki, and perhaps the examples may help too. Although it's worth noting Gauges aren't properly support yet (see issue #18)

If you look at the Highcharts gauge examples, the color property is part of the data property, don't know why, just one of those Highcharts oddities I guess.

[whawker]

@ptchiangchloe is there anything further I can do to help here? I'm not sure what more can be done until we add proper support for Gauge charts (#18)

[whawker]

Closing due to inactivity