Cannot read property 'lineWidth' of undefined , chat type is columnrange highcharts - reactjs

Question

i am getting Cannot read property 'lineWidth' of undefined, when using columnrange chart highcharts, this chart i am trying in reactJS
Below is the sample code
import React from 'react';
import Highcharts from 'highcharts';
import ReactHighcharts from 'react-highcharts';
// import ReactHighstock from 'react-highstock';
import HighchartsMore from 'highcharts-more';
import HighchartsExporting from 'highcharts-exporting';
export default class MainChartRange extends React.Component {
componentWillMount(){
this.setState({
type:"column"
})
}
componentDidMount(){
setTimeout(function(e){
HighchartsMore(ReactHighcharts.Highcharts);
HighchartsExporting(ReactHighcharts.Highcharts);
},5000);
}
render() {
HighchartsMore(ReactHighcharts.Highcharts);
HighchartsExporting(ReactHighcharts.Highcharts);
var config = {
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: null
},
subTitle: {
text: null
},
legend: {
enabled: false,
},
plotOptions: {
series: {
pointWidth: 30
}
},
plotOptions: {
series: {
pointWidth: 30
}
},
xAxis: {
categories: ['Woring time'],
title: {
text: null
},
gridLineWidth: 0
},
yAxis: {
type: 'datetime'
},
series: [{
data: [
[1,1483337940000,1483337950000],
[1,1483337970000,1483337990000],
[0,1483338000000,1483338010000],
[0,1483338030000,1483338070000]
]
}]
}
return (
<div className="graph-container">
<ReactHighcharts config={ config } style={{"min-width": "310px", "height": "400px", "margin": "0 auto"}}>
</ReactHighcharts>
</div>
)
}
}
this sample code working for the other chart types but it is giving an error for "columnrange"
highcharts.js:299 -> Uncaught TypeError: Cannot read property 'lineWidth' of undefined
Please help me find some work around for the "columnrange"

Answer 1

I was getting the same error and was able to solve it by explicitly providing 'marker' configuration with labelWidth value in plotOptions object of my chart config.
Following is a sample chart config that I have tested both in my application using react-highcharts as well as using locally running instance of react-highcharts demo:
chart: {
type: 'columnrange',
inverted: true,
height: 300,
width: 400
},
xAxis: {
visible: false
},
yAxis: {
title: {
text: null
},
plotLines: [{
color: '#303030',
width: 2,
value: 67,
zIndex: 5
}, {
color: '#303030',
width: 2,
value: 77.5,
zIndex: 5
}]
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter() {
return `${this.y}°F`;
}
},
marker: {
enabled: false,
lineWidth: 0
},
states: {
hover: {
enabled: false
}
}
}
},
legend: {
enabled: false
},
series: [{
type: 'columnrange',
color: '#4AA013',
data: [
[70, 75]
]
}]
Note: I did not have to make any code changes to highcharts or modify its implementation like previous answer (which did not work for me when tested using react-highcharts).

Answer 2

here is workaround that is got above columnrange to work
in render function add the below code
Highcharts.seriesTypes.line.prototype.pointAttribs = function (point, state) {
var seriesMarkerOptions = this.options.marker,
seriesStateOptions,
pointOptions = point && point.options,
pointMarkerOptions = (pointOptions && pointOptions.marker) || {},
pointStateOptions,
strokeWidth = 1,
color = this.color,
pointColorOption = pointOptions && pointOptions.color,
pointColor = point && point.color,
zoneColor,
fill,
stroke,
zone;
if (point && this.zones.length) {
zone = point.getZone();
if (zone && zone.color) {
zoneColor = zone.color;
}
}
color = pointColorOption || zoneColor || pointColor || color;
fill = pointMarkerOptions.fillColor || point.color || color ;
stroke = pointMarkerOptions.lineColor || point.color || color;
/*// Handle hover and select states
if (state) {
seriesStateOptions = seriesMarkerOptions.states[state];
pointStateOptions = (pointMarkerOptions.states && pointMarkerOptions.states[state]) || {};
strokeWidth = pointStateOptions.lineWidth || seriesStateOptions.lineWidth || strokeWidth + seriesStateOptions.lineWidthPlus;
fill = pointStateOptions.fillColor || seriesStateOptions.fillColor || fill;
stroke = pointStateOptions.lineColor || seriesStateOptions.lineColor || stroke;
}*/
return {
'stroke': stroke,
'stroke-width': strokeWidth,
'fill': fill
};
};
HighchartsMore(ReactHighcharts.Highcharts);
HighchartsExporting(ReactHighcharts.Highcharts);