Develop Reference

Total value contains part of current value in highcharts

how can I do something with my columns value in highcharts? I have two values: "total" and "current". Total is always bigger becouse it contains current value. I write some example in js Fiddle:
link to example
series: [{
name: 'John Total',
data: [8, 9, 4, 7, 6],
stack: 'male'
}, {
name: 'John Current',
data: [3, 4, 3, 2, 5],
stack: 'male'
}, {
name: 'Jane Total',
data: [8, 5, 9, 8, 9],
stack: 'female'
}, {
name: 'Jane Current',
data: [1, 0, 4, 4, 3],
stack: 'female'
}]
I want to dislplay chart where total value is a maxiumm value of column and current column as a part of total column. In my example in first column of "John Total" should be 8 and have part of "John Current" which is 3. In my code example values is summed and finish value is 11. How can I fix that and got columns like in picture?
This series have maxium values:
series: [{
name: 'John Total',
data: [8, 9, 4, 7, 6],
},
And this series have results as a part of total. How many points John get from Total:
{
name: 'John Current',
data: [3, 4, 3, 2, 5],
stack: 'male'
},
So first column should have max value 8 and include 3 like in picture. Blue column on picture should have 8 becouse we have this in first array and black column should to have 3. How can I acheive this when I have got Maxium value and part of this value In one column?

As per your comment
How can I acheive this when I have got Maxium value and part of this value In one column?
In this case you cannot use
stacking: 'normal'
You have to use overlapping column charts
plotOptions: {
column: {
grouping: false,
groupPadding: 0.4 //added padding to give some spacing between column
},
},
And series with
series:[{y: 8,x: 0.20 }, {y: 5,x: 1.20}, { y: 9,x: 2.20}, {y: 8,x: 3.20 }, {y: 9,x: 4.20}, ]},...];
here x value represents the position of the column(if you don't define x in series, column will overlap each other)
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
plotOptions: {
column: {
grouping: false,
groupPadding: 0.4
},
},
series: [{
name: 'Jane Total',
data: [{
y: 8,
x: 0.20
}, {
y: 5,
x: 1.20
}, {
y: 9,
x: 2.20
}, {
y: 8,
x: 3.20
}, {
y: 9,
x: 4.20
}, ]
}, {
name: 'Jane Current',
data: [{
y: 1,
x: 0.20
}, {
y: 0,
x: 1.20
}, {
y: 4,
x: 2.20
}, {
y: 4,
x: 3.20
}, {
y: 3,
x: 4.20
}, ]
}, {
name: 'John Total',
data: [8, 9, 4, 7, 6],
}, {
name: 'John Current',
data: [3, 4, 3, 2, 5],
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Update as per OP
I want to deliver array with values under variable to data: and I want fill only Y axis without writing {y:array1}, {y:array2} for every value in array
For this you can use array map function to update array of object
$scoe=new Object();
$scoe.johnTotal = [7,8,9];
$scoe.janeTotal = [7,8,9];
$scoe.janeTotal=$scoe.janeTotal.map((el,i)=>{
el={y:el,x: i+0.20};
return el;
})
$scoe.johnCurrent = [2,5,6];
$scoe.janeCurrent = [3,4,6];
$scoe.janeCurrent=$scoe.janeCurrent.map((el,i)=>{
el={y:el,x: i+0.20};
return el;
})
Updated fiddle demo

highchart 3d column - show "beta axis title" and "beta axis label"

English is not my native language.If you don't understand my question,please tell me.
I want to show the "beta axis title" and "beta axis label" in highchart. What I want is as follows:
However, what I got is here:
I googled.I didn't find any solution to my problem.
my javascript code is as follows.
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
margin: 75,
options3d: {
enabled: true,
alpha: 15,
beta: 50,
depth: 110
}
},
title: {
text: null
},
xAxis:{
title: {
text: "构建日期"
},
categories: ["2010-10-17","2010-10-18","2010-10-19","2010-10-20","2010-10-21","2010-10-22"],
},
yAxis: {
title: {
text: "内存(MB)"
}
},
plotOptions: {
column: {
depth: 40,
stacking: true,
grouping: false,
groupZPadding: 10
}
},
series: [{
name: 'HUAWEI',
data: [1, 2, 4, 3, 2, 4],
stack: 0
}, {
name: 'XIAOMI',
data: [5, 6, 3, 4, 1, 2],
stack: 1
}, {
name: 'oppo',
data: [7, 9, 8, 7, 5, 8],
stack: 2
}]
});
});

You need to set the zAxis categories to have the labels, and the zAxis title to have the title. It is important to note that to show the labels, you need to define a min and max. This is a minimal example that will show it all (on top of eachother):
zAxis: {
title: {
text: 'TITLE HERE',
},
min: 0,
max: 2,
categories: ["HUAWEI", "XIAOMI", "oppo"]
}
Working example: http://jsfiddle.net/ewolden/0uc1g8b5/3/
There is a lot of options for tweaking the look of this, you should have a look at the API on zAxis labels/titles.
API on zAxis.titles: https://api.highcharts.com/highcharts/zAxis.title
For example you can rotate and have it look like this:
Working example: http://jsfiddle.net/ewolden/0uc1g8b5/5/
Or you can use skew3d and have it look like this:
Working example: http://jsfiddle.net/ewolden/0uc1g8b5/6/
It depends a lot on what you want to write as the title and labels. You will just have to experiment.

Highcharts: Add dots to series and style between empty data points

there is two things I'd like to do with this chart http://jsfiddle.net/4vyaaLjL/
$('#container').highcharts({
chart: {
type: 'area',
},
title: {
text: 'Fruit consumption *'
},
xAxis: {
categories: ['Apples', 'Pears', 'Oranges', 'Bananas', 'Grapes', 'Plums', 'Strawberries', 'Raspberries']
},
yAxis: {
title: {
text: 'Y-Axis'
},
labels: {
formatter: function () {
return this.value;
}
}
},
series: [{
name: 'John',
data: [0, 1, 4, 4, 5, 2, 3, 7]
}, {
name: 'Jane',
data: [1, 0, 3, null, 3, 1, 2, 1]
}]
});
I'd like to style the 'null' data point with dashes.
Have some styled dots in place of the squares in the image.
Thanks

There is an option connectNulls, but you can not style with a different dash-style. So how about using series.zones? Unfortunately, you need to calculate in advance, where should be zones according to the null data-points. Another solution for this is to simple create separate series with just two points and line between them. You can connect two series using series.linkedTo option.
See this question.
And demo with 4.2.x version: http://jsfiddle.net/Yrygy/504/

Show total for whole group in Highcharts 'stacked & grouped column' layout

Here is the basic demo for Highcharts Stacked & Grouped column layout. The tooltip shows the total for the stack using this call...
this.point.stackTotal
...however, there are 2 stacks in the group. How do I display the total for all stacks in the group. Something like...
this.point.groupTotal
...would be ideal, but that doesn't work

You can do this by adding an extra parameter to your tooltip function: shared:true and adding some extra code to sum up all the values within a grouped stack
Look at this example: JSFIDDLE
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function() {
var s = '<b>'+ this.x +'</b>',
sum = 0;
$.each(this.points, function(i, point) {
s += '<br/>'+ point.series.name +': '+
point.y;
sum += point.y;
});
s += '<br/>Sum: '+sum
return s;
},
shared: true
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});
});

Highchart Js Column Chart Stacked and Grouping

I using column stacked and grouped chart for comparing.
Check this example code : #fiddle http://jsfiddle.net/wvT85/
I am trying to compare two male stacks
I want the grouped chart have same colors for the item and no repeated legends.
i.e where ever john is used it should have same color and legand should have only one john not two.
Can any one help me on this code.
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'John',
data: [2, 5, 6, 2, 1],
stack: 'male2'
}, {
name: 'Joe',
data: [3, 0, 4, 4, 3],
stack: 'male2'
}]
});
});
});

Use LinkedTo...
http://api.highcharts.com/highcharts#plotOptions.series.linkedTo
The demo of it is below:
linkedTo: ':previous',
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/arearange-line/
That way the legend is still functional, and you don't need to set the colors the same.

I ran into the same problem recently. So what I did is, combine two of the answers above to solve the problem.
http://jsfiddle.net/sanshila/2g79dhds/1/
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male',
color: '#6666FF',
events: {
legendItemClick: function (event) {
this.visible ? this.chart.get('johnId').hide() : this.chart.get('johnId').show();
}
}
}, {
name: 'John',
id: 'johnId',
color: '#6666FF',
showInLegend: false,
data: [2, 5, 6, 2, 1],
stack: 'male2'
}]

You can manually define the series colors and hide the 2nd set in the legend to do what you want, but this doesn't really link the data. It won't hide both johns if you click in the legend for instance. This type of associating 2 points in different series isn't supported as far as I know. I would say that I think you might want to rethink how you're representing your data, I still don't understand what you're trying to accomplish.
series: [{
name: 'John',
color:'blue',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'John',
color:'blue',
showInLegend:false,
data: [2, 5, 6, 2, 1],
stack: 'male2'
}]
});
http://jsfiddle.net/wvT85/2/

I think this is what you want: http://jsfiddle.net/b3AF9/21/
As Ben said, manually set the color for the stacks. Then give ids to the second stack and add
event: {
legendItemClick: function(event){
this.visible?
this.chart.get('Joe2').hide() :
this.chart.get('Joe2').show();
}
}
to series in the first stack.