Skip to content
Advertisement

Creating bell curve chart with xData in Highchart

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

User contributions licensed under: CC BY-SA
10 People found this is helpful
Advertisement