Highcharts chart with error bars using react-highcharts

Question

I'm trying to draw

a Highcharts graph
in a React app
with error bars

I can draw an ordinary chart easily enough using ReactHighcharts, and get it to update when my React state changes. However, adding error bars just doesn't seem to work at all.

A simple example of my code is shown below: I've based it on the main Highcharts errorbar example at: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/error-bar/

If I do not include the highcharts-more library, I get an error "The requested series type does not exist". But even when I do include the highcharts-more import, the error bars simply do not render. I get the chart shown without any error bars, as shown in the attached image.

import React, { Component } from 'react';

import ReactHighcharts from 'react-highcharts';

import HighchartsMore from 'highcharts-more'; // Without including these two lines, I get https://www.highcharts.com/errors/17
HighchartsMore(ReactHighcharts.Highcharts);   // "The requested series type does not exist"

const config = {
    title: {
        text: 'Temperature vs Rainfall'
    },
    xAxis: [{
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }],
    series: [{
        name: 'Rainfall',
        type: 'column',
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
        name: 'Rainfall error',
        type: 'errorbar',
        data: [[48, 51], [68, 73], [92, 110], [128, 136], [140, 150], [171, 179], [135, 143], [142, 149], [204, 220], [189, 199], [95, 110], [52, 56]]
    }]
};

class ErrorBarExample extends Component {
  render() {
    const chartData = config;
    return (
      <div>
        <ReactHighcharts config={chartData} />
      </div>
    );
  }
}

export default ErrorBarExample;

I feel like I've tried everything, I'd really appreciate any help anyone could offer.

Thanks,

Do you get any errors when you build a project? Default path for webpack for highcharts more would 'highcharts/highcharts-more'. I copy-pasted your code and it works fine - the error bar shows up. How do your render the app? How many times in your code HighchartsMore(React.Highcharts) line appears? — morganfree, Jun 14 '17 at 15:18
Hi @morganfree, that has fixed it! Thank you so much. Would you like to post as an answer, or shall I? — Gareth Williams, Jun 15 '17 at 15:51

score 1 · Accepted Answer · answered Jun 16 '17 at 09:22

1

Default path to highcharts-more module is highcharts/highcharts-more'. So the import should look like this:

import HighchartsMore from 'highcharts/highcharts-more'

answered Jun 16 '17 at 09:22

morganfree

12,254
1
14
21

Highcharts chart with error bars using react-highcharts

1 Answers1