Develop Reference

How to put data in one column

I'm using Highcharts.js plugin and everything it's fine, but what I want to show is for example this data:
1, 5, 10, 20
The problem here is that every value it's displayed in one column and what I want is to display all the values in one column, so my question is what can I do to show my chart like I want? Here is my current code:
$(document).ready(function() {
$('#xd').click(function() {
draw();
});
});
function draw() {
var myArray = [];
myArray = [1, 5, 10, 11, 8];
$('#grafic').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Sampled Parts'
},
xAxis: {
categories: ['Data'],
labels: {
rotation: -33,
}
},
yAxis: {
allowDecimals: true,
min: 0,
title: {
text: 'Resultados'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
legend: {
reversed: true
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'My Data',
data: myArray
}]
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="grafic">
</div>
<button id="xd">Click</button>
If you see my code I have 5 columns and what I want is to have all the values in only one column but to be honest I don't have any idea of what can I do.
Codepen code

If you want to stack the values, then you need to create multiple series (each with only one value in it, I guess). Change it from this:
var myArray = [];
myArray = [1, 5, 10, 11, 8];
to this:
series: [{
name: 'mydata',
data: [1]
}, {
name: 'mydata2',
data: [5]
}, {
name: 'mydata3',
data: [10]
}, {
name: 'mydata4',
data: [11]
}, {
name: 'mydata5',
data: [8]
}]
See running sample below:
$(document).ready(function() {
$('#xd').click(function() {
draw();
});
});
function draw() {
$('#grafic').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Sampled Parts'
},
xAxis: {
categories: ['Data'],
labels: {
rotation: -33,
}
},
yAxis: {
allowDecimals: true,
min: 0,
title: {
text: 'Resultados'
}
},
tooltip: {
formatter: function() {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
legend: {
reversed: true
},
plotOptions: {
column: {
stacking: 'normal'
}
},
// var myArray = [];
// myArray = [1, 5, 10, 11, 8];
series: [{
name: 'mydata',
data: [1]
}, {
name: 'mydata2',
data: [5]
}, {
name: 'mydata3',
data: [10]
}, {
name: 'mydata4',
data: [11]
}, {
name: 'mydata5',
data: [8]
}]
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="grafic">
</div>
<button id="xd">Click</button>

Highcharts grouped bar charts with multiple axes

I was unsatisfied with the answer here:
Multiple y-axes for column graph categories in highcharts
I understand that you can create multiple y-axes can select them using yAxis:0,1,2 etc. for each series. Is it possible to do this for groups of bar graphs?
In the following example, I want 3 groups (Count A, Count B, Percent) each with 4 people (John, Joe, Jane, Janet). How do I do that in addition to having the count groups on one axes and the percent group on the other?
$('#container').highcharts({
chart: { type: 'column' },
xAxis: { categories: ['Count A', 'Count B', 'Percent']},
yAxis: [{ title: { text: 'Count' } }, { title: { text: 'Percent' }, opposite: true }],
series: [{
name: 'John',
data: [5, 3, 0.4],
}, {
name: 'Joe',
data: [3, 4, 0.6],
}, {
name: 'Jane',
data: [2, 5, 0.7],
}, {
name: 'Janet',
data: [3, 0, 0.8],
}]
});

So here's my solution to your problem.
I hope this is what you are looking for and I hope you find this helpful.
When you want to put the data into three categories with two different yAxis' you'd have to split it up in series like this. The percent is linked to the series with the values.
If you want it back to a column chart, just change the chart type to column.
http://jsfiddle.net/henrikskar/j1o450z5/
series: [{
name: 'John',
id: 's1',
data: [5, 3],
},{
//Links to id s1
linkedTo: 's1',
name: 'John',
data: [
//Puts 0.4 percent to the third category which is in the second array position
//of the categories
[2, 0.4]
],
//Assigns the percent to the second yAxis
yAxis: 1,
color: Highcharts.getOptions().colors[0]
},

Yes, this is absolutely possible, and you were on the right track with your research of multiple y-axes.
Below is a code snippet based on Highcharts' demo of stacked and grouped columns. I added a second y-axis and copied some of the demo data to assign to that axis.
Per your requirements, you'll find two sets, or stacks, of data assigned to the first/default y-axis, and a third set assigned to the second/opposite y-axis.
$(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'
}
},{
allowDecimals: false,
min: 0, max: 100,
title: {
text: 'Percentage of fruits'
},
opposite: true
}],
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: 'number'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'number'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'number2'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'number2'
},{
name: 'John',
data: [45, 30, 25, 70, 5],
stack: 'percentage',
yAxis: 1
}, {
name: 'Joe',
data: [25, 15, 40, 5, 5],
stack: 'percentage',
yAxis: 1
}, {
name: 'Jane',
data: [10, 50, 30, 5, 10],
stack: 'percentage',
yAxis: 1
}, {
name: 'Janet',
data: [20, 5, 5, 20, 80],
stack: 'percentage',
yAxis: 1
}]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 600px; height: 250px; margin: 0 auto"></div>
One piece of advice: as with line charts on different axes, you need to be clear in your documentation, color choices, or chart labels so that users know which values correspond to which axis. This is particularly needed for columns, as users will naturally compare the heights of each column to its neighbor.
I hope this is helpful for you.

High chart with diffrent series data

I want to create a chart with different series data. I have a poll with several question and every question has different options.
I tried to use this code :
$(function () {
$('#c_chart').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: [
'Question 1',
'Question 2',
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: [['Option1', 'Option2']],
data: [49.9, 56]
}, {
name: 'Option3',
data: [83.6]
}
]
});});
How can I create this chart like following image:
Chart

my english is basic but, i try to splain rigth?
try to look this links, im not very sure if you need to move something in plotOptions:{} or chart:{}
the other options not draw the chart. i found this links, i'll hope help you
http://www.highcharts.com/docs/chart-design-and-style/design-and-style
http://api.highcharts.com/highcharts#plotOptions.bar.dataLabels
grettins, from mexico :)

$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Questions Answers'
},
xAxis: {
categories: ['Question1', 'Question2', 'Question3', 'Question4', 'Question5']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Option Ticked'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>';
}
},
plotOptions: {
column: {
stacking: false
}
},
series: [{
name: 'Option1',
data: [5, 3, 4, 7, 2]
}, {
name: 'Option2',
data: [3, 4, 4, 2, 5]
}, {
name: 'Option3',
data: [2, 5, 6, 2, 1]
}, {
name: 'Option4',
data: [3, 0, 4, 4, 3]
}]
});
});

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.