Develop Reference

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/

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

Change X axis label on Drill Down using HighCharts

I want to change the label of x axis . Below is my code
var msMap = new Object();
msMap[7] = "Cross Border Error";
msMap[8] = "Domestic Error";
msMap[13] = "Delivery Error";
msMap[18] = "Personal Error";
msMap[6] = "Executive Error";
msMap[35] = "Legal Error";
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
drilldown: function(e) {
this.xAxis[0].setTitle({ text: 'ErrorID' });
},
drillup: function(e) {
this.xAxis[0].setTitle({ text: 'Mean Absolute Error (in days)' });
}
}
}, plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
title: {
text: 'Browser market shares. January, 2018'
},
subtitle: {
text: 'Click the columns to view versions. Source: statcounter.com'
},
xAxis: {
title: {
text: 'Mean Absolute Error (in days)'
},
type: 'category',
crosshair: true
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
tooltip: {
shared:true,
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [
{
name: "Browsers",
data: [
{
name: "4",
y: 15,
drilldown: "4"
},
{
name: "5",
y: 10,
drilldown: "5"
}
]
}
],
drilldown: {
series:[
{
name:"4",
id:"4",
pointWidth: 30,
data:[
[
18,
5
],
[
7,
8
],
[ 13,
2
] ,
[8,5]
]
},
{name:"5",
id:"5",
pointWidth: 20,
data:[
[6,5],
[35,5]
]
}
]
}
});
On Drill down instead of x-axis displaying value 7,8 etc. I want to display their string values ,specified in the map . I am not able to find link with which I can achieve this .
Here's my jsfiddle link
https://jsfiddle.net/ebkwnsz2/
So when I do drill down on let's say the bar with value as 4 ,the drill down shows 4 bars with values 7,8,13,18 . Instead of displaying the values I want to show their mapping as specified in msMap

I think that pasting the proper object reference as an x value for specific drilldown point is a solution which you are looking for.
Demo: https://jsfiddle.net/BlackLabel/5m8a3s2j/
{
name: "4",
id: "4",
pointWidth: 30,
data: [
[
msMap[18],
5
],
[
msMap[7],
8
],
[msMap[13],
2
],
[msMap[8], 5]
]
},
Is that what you had in mind?

Highcharts - How to plot a X axis line on my bell curve (Standard Deviation Curve)

I have one Highchart which is showing a Standard Deviation curve (Bell curve). I would like to plot a x axis vertical line when x=0.(see my current graph).
When I include the code to include the line the chart disappear, so I believe something I need to change, obviously :-).
Just as information the chart works perfectly without the "plotLines:" inside xAxis.
Could you help me with this?
See my Script
<script>
var data = <?php echo json_encode($data, JSON_NUMERIC_CHECK); ?>;
var pointsInInterval = 5;
Highcharts.chart('container', {
chart: {
margin: [50, 0, 50, 50],
events: {
load: function () {
Highcharts.each(this.series[0].data, function (point, i) {
var labels = ['4σ', '3σ', '2σ', 'σ', 'μ', 'σ', '2σ', '3σ', '4σ'];
if (i % pointsInInterval === 0) {
point.update({
color: 'red',
dataLabels: {
enabled: true,
format: labels[Math.floor(i / pointsInInterval)],
overflow: 'none',
crop: false,
y: -2,
style: {
fontSize: '13px'
}
}
});
}
});
}
}
},
title: {
text: null
},
legend: {
enabled: false
},
xAxis: [{
title: {
text: 'Data'
},
visible: false
}, {
title: {
text: 'Bell curve'
},
opposite: false,
visible: true
},
plotLines: [{
color: '#FF0000',
width: 2,
value: 0
}]
],
yAxis: [{
title: {
text: 'Data'
},
visible: false
}, {
title: {
text: 'Bell curve'
},
opposite: false,
visible: true
}],
series: [{
name: 'Bell curve asd',
type: 'bellcurve',
xAxis: 1,
yAxis: 1,
pointsInInterval: pointsInInterval,
intervals: 4,
baseSeries: 1,
zIndex: -1,
marker: {
enabled: true
}
}, {
name: 'Data',
type: 'scatter',
data: data,
visible: false,
marker: {
radius: 1.5
}
}],
exporting: {
allowHTML: true,
sourceWidth: 800,
sourceHeight: 600
}
});
</script>

Plot lines should be added as a property of an axis object:
xAxis: [{
title: {
text: 'Data'
},
visible: false
}, {
title: {
text: 'Bell curve'
},
opposite: false,
visible: true,
plotLines: [{
color: '#FF0000',
width: 2,
value: 0
}]
}
]
Live demo: http://jsfiddle.net/BlackLabel/4xcno5v9/
API Reference: https://api.highcharts.com/highcharts/xAxis.plotLines

Highcharts Grouped stack x.axis name + category name

I am trying to get my highcharts graph to look like this or similar to this.
I have tried to use groupped category addon for highcharts, but it down not seem to work well with stack option.
sample in JSFiddle: http://jsfiddle.net/02ey1hbr/7/
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
labels: {
rotation: -0,
style: {
fontSize: '10px',
align: 'Right',
}
},
categories: [{
name: "Case A",
categories: ["Male", "Female"]
}, {
name: "Case B",
categories: ["Male", "Female"]
}]
},
yAxis: {
min: 0,
title: {
text: 'x-axis'
}
},
legend: {
reversed: true
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
series: [{
name: 'x',
data: [5,3,4,5],
stack: 'StackA'
}, {
name: 'y',
data: [3,5,4,5],
stack: 'StackA'
},{
name: 'x',
data: [5,3,4,5],
stack: 'StackB'
}, {
name: 'y',
data: [3,5,4,5],
stack: 'StackB'
}
]
});

To display bar the way you want, you need to get rid of the stack property from all series. Why do you want to preserve them? They are used for dividing series into groups. I also corrected position of labels using x property.
API Reference:
http://api.highcharts.com/highcharts/series%3Ccolumn%3E.stack
http://api.highcharts.com/highcharts/xAxis.labels.x
Example:
http://jsfiddle.net/sjtdgq9L/

Within my project, using stacks allows me to get better control over the 12 data sets in a series that is split into 2 stacks. Example in jsfiddle is a smaller version to get the proof of concept working and better interact with community. Stacks also make the code much easier to maintain.
Using: Proper x-axis for Highcharts stack group column as a reference, i was able to modify my example to: http://jsfiddle.net/02ey1hbr/11/ and achieve a working example with stacks. Its not perfect but really close to.
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: [{
categories: ["Case A", "Case B","Case C", "Case D"],
labels: {
rotation: -90,
x: -60,
style: {
fontSize: '10px',
align: 'Right',
}
},
tickWidth: 1,
tickLength: 60,
},
{
categories: ['Male', 'Female','Male', 'Female','Male', 'Female','Male', 'Female'],
opposite: false,
labels: {
rotation: 0,
x: 60,
style: {
fontSize: '10px',
align: 'Right',
}
},
tickWidth: 0,
}],
yAxis: {
min: 0,
title: {
text: 'x-axis'
}
},
legend: {
reversed: true
},
plotOptions: {
bar: {
stacking: 'normal'
}
},
series: [{
name: 'x',
data: [1,8,9,16],
stack: 'StackA'
}, {
name: 'y',
data: [1,7,10,15],
stack: 'StackA'
},{
name: 'x',
data: [3,6,11,14],
stack: 'StackB'
}, {
name: 'y',
data: [4,5,12,13],
stack: 'StackB'
},
{
name: '',
data: [0,0,0,0,0,0,0,0],
showInLegend: false,
stack: 'StackB',
xAxis: 1
}
]
});

Change your series to:-
series: [{
name: 'x',
data: [5,3,4,5]
}, {
name: 'y',
data: [3,5,4,5]
},{
name: 'x',
data: [5,3,4,5]
}, {
name: 'y',
data: [3,5,4,5]
}
]

Issue on Setting Two yAxis in Highcharts.js

Can you please take a look at this demo and let me know why I am not able to set the other side yAxis , as well?
$(function () {
$('#chart2').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'The Chart Title Goes Here!',
style: {
color: '#5882FA',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['Roads', 'Powerlines'],
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°C',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return this.x +
' is <b>'+ this.y +'</b>';
}
},
series: [{
data: [{
name: 'Roads',
y: 200
}, {
name: 'Powerlines',
color: '#FF00FF',
y: 50
}]
}]
});
});
I find some sample on the Highcharts API and I tried to follow them on my demo but they didn't work!
Highcharts : bar chart with multiple y axes

I have corrected the problem with your code: DEMO
You will have to pass series data for each y-axis individually:
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 1,
data: [49.9, 71.5],
tooltip: {
valueSuffix: ' mm'
}
}, {
name: 'Temperature',
type: 'column',
data: [7.0, 6.9],
tooltip: {
valueSuffix: ' °C'
}
}]

Well, I think you need to fix your series object. How about this:
series : [{
data : [{
name : 'Roads',
y : 200
}, {
name : 'Powerlines',
color : '#FF00FF',
y : 50
}
]
},
{
yAxis : 1,
data : [{
name : 'Roads',
y : 30
}, {
name : 'Powerlines',
color : '#FF00FF',
y : 10
}
]
}
]
Also you need to add yAxis : 1 as an id to axis (you can explicitly set the id of an axis to make sure)