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