how to fix HighCharts bell curve not plotting the data properly?

Question

My problem is with the bell curves; bell curves when plotted are supposed to show the distribution of data, so for eg if I had 5 data points: [20, 5, 10, 5, 5] the 5s here will all go to the left of the bell curve, to represent the lower quartile, the 20 will go to the right to represent the higher quartile and the 10 will hover around the middle to represent the mean.

The highChart bell curve doesn't do this. Although it represents the upper, lower quartiles and mean properly, when it comes time to actually plot the data point, each data point is plotted vertically, so the 5s will be plotted low on the bell curve(not left), the 10 will go in the middle (vertically) and the 20s will go high also vertically.

You can look at the code below to see what I mean:

 var data = [20, 20, 20, 20, 10, 300 ]; Highcharts.chart('container', { title: { text: 'Your score' }, xAxis: [{ title: { text: 'Data' }, alignTicks: false }, { title: { text: "score" }, alignTicks: false, opposite: true }], yAxis: [{ title: { text: 'Data' } }, { title: { text: 'Bell curvex' }, 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: 2.5, symbol: "circle", fillColor: "black" } }] } )

 #container { height: 400px; }.highcharts-figure, .highcharts-data-table table { min-width: 310px; max-width: 800px; margin: 1em auto; }

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> <script src="https://code.highcharts.com/modules/accessibility.js"></script> <figure class="highcharts-figure"> <div id="container"></div> <p class="highcharts-description"> Chart showing the use of a bell curve computed automatically from a dataset. The source dataset is visualized as a scatter plot. </p> </figure>

Answer 1

I am not sure what exactly you need to accomplish but I believe you need to express your data as a 2D array (ie an array of arrays)

I have created this 2D array with the same data values as the originals (but I am not sure this will answer your question (since it does not state the desired output clearly).

If you want the scatter plot (dots) to fall within the bell curve, you will need to do a count of each value (ie there are 3 fives, 1 ten, 1 twenty) and plot those instead.

Hopefully, this demo below will help you take a step in the right direction.

 var data = [ [20, 20], [5, 5], [10, 10], [5, 5], [5, 5] ]; Highcharts.chart('container', { title: { text: 'Your score' }, xAxis: [{ title: { text: 'Data' }, alignTicks: false }, { title: { text: "score" }, alignTicks: false, opposite: true }], yAxis: [{ title: { text: 'Data' } }, { title: { text: 'Bell curvex' }, 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: 2.5, symbol: "circle", fillColor: "black" } }] })

 #container { height: 400px; }.highcharts-figure, .highcharts-data-table table { min-width: 310px; max-width: 800px; margin: 1em auto; }

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> <script src="https://code.highcharts.com/modules/accessibility.js"></script> <figure class="highcharts-figure"> <div id="container"></div> <p class="highcharts-description"> Chart showing the use of a bell curve computed automatically from a dataset. The source dataset is visualized as a scatter plot. </p> </figure>