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

How to render custom yAxis label on Highcharts Gantt with the 'custom' property?

I've got a Gantt chart:
And I want to use the series.gantt.custom object to set specific properties for each series on the yAxis.
From these properties I want to construct the yAxis labels.
My code:
Highcharts.ganttChart('container', {
yAxis: {
categories: ['1', '2'],
labels: {
formatter() {
return this.value
/* + this.chart.series[this.pos].custom.size */
},
}
},
series: [{
groupPadding: 1,
custom: {
size: "small",
},
type: 'line',
zoneAxis: 'x',
data: [{
y: 0,
x: Date.UTC(2022, 10, 18),
custom: {
label: 1,
}
}, {
y: 0,
x: Date.UTC(2022, 10, 25, 12),
custom: {
label: 2
}
}]
}, {
type: 'line',
zoneAxis: 'x',
custom: {
size: "large",
},
data: [{
y: 1,
x: Date.UTC(2022, 10, 18),
custom: {
label: 1
}
}, {
y: 1,
x: Date.UTC(2022, 10, 25, 12),
custom: {
label: 2
}
}]
}]
});
this.chart.series[this.pos].custom.size it's the bit that is not working.
The labels should be 1 small and 2 large.
A fiddle

You can reach this property through the series.options:
this.chart.series[this.pos].options.custom.size
Demo:
https://jsfiddle.net/BlackLabel/gLkn9uqf/

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]
}
]

spline is not plotting after drilldown - HighCharts

I am working with highCharts drilldown. My graph is plotting proper before drilldown. The column and spline is properly getting plot according to X-axis and Y-axis in graph but after drilldown the graph spline is not draw according to Y-axis. I want to plot spline as like before drilldown.
Here is my html
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Here is my js code.
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
zoomType: 'xy',
events: {
drilldown: function (e){
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'2015':{
name: '2015',
data: [
['Q4-2015',89]
]
},
'2016':{
name: '2016',
data: [
['Q2-2016',95],
['Q3-2016',99]
]
}
},
drilldownsLines = {
'2015':{
type: 'spline',
name: '2015',
data: [
['Q4-2015',11.45]
]
},
'2016':{
type: 'spline',
name: '2016',
data: [
['Q2-2016',11.2],
['Q3-2016',11.5]
]
}
},
series = drilldowns[e.point.name],
seriesLine = drilldownsLines[e.point.name];
chart.addSingleSeriesAsDrilldown(e.point, series);
chart.addSingleSeriesAsDrilldown(e.point, seriesLine);
chart.applyDrilldown();
}
}
}
},
title: {
text: 'Rental & Capital Value Trend'
},
xAxis: {
type: 'category',
},
yAxis: [{
min: 0,
title: {
text: 'Rental Value (INR/SF/Month)'
},
labels: {
format: '{value}'
}
}, {
min:0,
tickInterval:5,
title: {
text: 'Capital Value (INR/SF)'
},
labels: {
format: '{value} K'
},
opposite:true
}],
tooltip:{
formatter:function(){
var s='';
$.each(this.points, function () {
if(this.series.type == 'spline'){
s += '<br/>Capital Value : ' + this.y+ 'K';
}else{
s += '<br/> Rental Value : ' + this.y;
}
});
return s;
},
shared:true
},
legend: {
layout: 'horizontal',
align: 'left',
size: '12px',
x: 50,
verticalAlign: 'bottom',
y: 20,
floating: true
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: false
}
}
},
series: [{
name: 'Renatl Value (INR/SFT/Month)',
color: '#EE8908',
data: [
{
name: '2015',
y: 89,
drilldown: true
}, {
name: '2016',
y: 90,
drilldown: true
}
]
},{
name:'Capital Value (INR/SF)',
color:'#F8BB6C',
type:'spline',
yAxis:1,
data:[
{
name:'2015',
y:11.45
},{
name:'2016',
y:15.22
}
],
tooltip: {
valueSuffix: 'K'
}
}
],
drilldown: {
/*activeAxisLabelStyle: {
textDecoration: 'none'
},*/
series: []
}
});
});

On drilldown events you are creating new spline series and you don't specify y axis for them - by default they will be scaled with the use of the first y axis.
Specify a correct yAxis (should be 1 in your example) for the series and the spline will be drawn as you expect.
drilldownsLines = {
'2015':{
type: 'spline',
name: '2015',
data: [
['Q4-2015',11.45]
],
yAxis: 1
},
'2016':{
type: 'spline',
name: '2016',
yAxis: 1,
data: [
['Q2-2016',11.2],
['Q3-2016',11.5]
]
}
},
example: https://jsfiddle.net/2pd1natw/

Distance between x-axis labels and the chart in Highcharts

I'm trying to create a distance between the x-axis labels and the chart in Highcharts. I tried using "distance" and "padding" but none worked.
chart: {
type: 'column'
},
title: {
text: 'Data input as column arrays'
},
data: {
columns: [
[null, 'Apples', 'Pears', 'Oranges'], // categories
['Blue', 1, 4, 3], // first series
['Black', 5, 4, 2] // second series
]
},
xAxis: {
categories: [
'First Category',
'Second Category',
'Third Category',
],
labels: {
style: {
fontFamily: 'openSans',
fontSize: '16px',
color: '#000000',
},
}
}
Here is jsfiddle: http://jsfiddle.net/aaq4zww5/2/
Thanks!

Option1: use the offset in the xAxis:
xAxis: {
...
offset: 10,
},
Option2: use y under xAxis->labels:
labels: {
...
y: 25,
},
Check jsfiddle.