Develop Reference

Set equal height for funnel highcharts

I'm new to HighCharts. I have created a funnel with the below script
Highcharts.chart('container', {
chart: {
type: 'funnel'
},
title: {
text: 'Sales funnel'
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '<b>{point.name}</b> ({point.y:,.0f})',
softConnector: true,
inside: true,
},
neckHeight: "0%",
neckWidth: "80%",
width: '15%',
reversed: true,
}
},
legend: {
enabled: false
},
series: [{
name: 'Unique users',
data: [
['Website visits', 15654],
['Downloads', 4064],
['Requested price list', 1987],
['Invoice sent', 976],
['Finalized', 846]
]
}]
});
jsfiddle: https://jsfiddle.net/kiranuk/bavLxzrp/
How can I set equal heights for all the sections?.
Thanks for the help.

A height of a section is calculated based on data. If you want to have equal sections, you can provide mocked equal data and show the real data in a tooltip and data-labels. For example:
plotOptions: {
series: {
dataLabels: {
format: '<b>{point.name}</b> ({point.realY:,.0f})',
...
},
...
}
},
tooltip: {
formatter: function() {
return this.series.name + '<br><span style="color:' + this.color + '">●</span> ' + this.point.name + ': <b>' + this.point.realY + '</b>';
}
},
series: [{
name: 'Unique users',
keys: ['name', 'y', 'realY'],
data: [
['Website visits', 1, 15654],
['Downloads', 1, 4064],
['Requested price list', 1, 1987],
['Invoice sent', 1, 976],
['Finalized', 1, 846]
]
}]
Live demo: https://jsfiddle.net/BlackLabel/e4b5o16d/
API Reference: https://api.highcharts.com/highcharts/series.funnel.data

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

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

Can this bar chart style from Excel be recreated with Highcharts?

I'd like to have the lines linking each data block, like the attached screenshot from Excel. Even better would be if the line could change color based on it's angle. I can't seem to find anything in the documentation to create this style chart. Any ideas?
JSFiddle - Same Bar Chart (without connectors)
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Row1', 'Row2']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'Data1',
data: [9, 4]
}, {
name: 'Data2',
data: [12, 6]
}, {
name: 'Data3',
data: [15, 7]
}, {
name: 'Data4',
data: [16, 8]
}, {
name: 'Data5',
data: [19, 7]
}]
});
});

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'
}]
});
});