I’m creating a chart with Highchart library and I have a set of data like this: [x,y], with x: value and y: occurrence. I tried to use this to present normal distribution line but it uses yData to calculate instead of xData. Does anyone have any ideas to solve this?
var data = [[1,5], [2,4], [2.9, 3], [3.3,1], [4.5, 19], [4.7, 25], [4.9, 15],
[5.4, 10], [5.6, 11], [6.2, 2]];
Highcharts.chart('container', {
title: {
text: 'Bell curve'
},
xAxis: [{
title: {
text: 'Data'
},
alignTicks: false
}, {
title: {
text: 'Bell curve'
},
alignTicks: false,
opposite: true
}],
yAxis: [{
title: { text: 'Occurence' }
}, {
title: { text: 'Bell curve' },
opposite: true
}],
series: [{
name: 'Bell curve',
type: 'bellcurve',
xAxis: 1,
yAxis: 1,
baseSeries: 1,
zIndex: -1
}, {
name: 'Data',
type: 'scatter',
data: data,
accessibility: {
exposeAsGroupOnly: true
},
marker: {
radius: 3
}
}]
});
jsfiddle link: https://jsfiddle.net/Lvehqmaz/1/
Advertisement
Answer
You can add a mocked series and hide it, as you suggested. Example: https://jsfiddle.net/BlackLabel/1ykt65av/
Or modify the way of calculating data. Source code: https://code.highcharts.com/modules/histogram-bellcurve.src.js
(function(H) {
H.wrap(H.seriesTypes.bellcurve.prototype, 'setMean', function(proceed) {
this.mean = H.correctFloat(
H.seriesTypes.bellcurve.mean(this.baseSeries.xData)
);
});
H.wrap(H.seriesTypes.bellcurve.prototype, 'setStandardDeviation', function(proceed) {
this.standardDeviation = H.correctFloat(
H.seriesTypes.bellcurve.standardDeviation(this.baseSeries.xData, this.mean)
);
});
}(Highcharts));
Live demo: https://jsfiddle.net/BlackLabel/7cryn8vd/
API Reference: https://api.highcharts.com/highcharts/series.bellcurve.showInLegend
Docs: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts