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,
