$(function () {
var makeSeriesConfig = function (values) {
var max_value = null;
values.forEach(function (v) {
if (!max_value || max_value < v.value) {
max_value = v.value;
}
});
var padding = {
name: 'padding',
dataLabels: {
enabled: false
},
data: [] //[0, {y: 20, color: 'white'}, {y: 30, color: 'white'}, {y: 40, color: 'white'}, {y: 50, color: 'white'}]
};
var centralPiece = {
name: 'Value',
data: [],
dataLabels: {
enabled: true,
}
}
values.forEach(function (v) {
var w = (max_value - v.value) / 2;
padding.data.push({
y: w,
color: 'white'
});
centralPiece.data.push({
y: v.value,
name: v.name
});
});
return [padding, centralPiece, padding]
};
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Pseudo-funnel chart'
},
xAxis: {
categories: ['Step 1', 'Step 2', 'Step 3', 'Step 4', 'Step 5']
},
yAxis: {
gridLineWidth: 0,
min: 0,
title: {
text: 'Tutorial funnel'
},
labels: {
enabled: false
}
},
legend: {
enabled: false,
backgroundColor: '#FFFFFF',
reversed: true
},
tooltip: {
formatter: function () {
if (this.series.name.indexOf('padding') != -1) {
return false;
} else {
return "Value: " + this.y;
}
}
},
plotOptions: {
series: {
color: '#FF9900',
stacking: 'percent',
shadow: false
},
bar: {
groupPadding: 0
}
},
series: makeSeriesConfig([
{name: 'Step 1', value: 300},
{name: 'Step 2', value: 240},
{name: 'Step 3', value: 70},
{name: 'Step 4', value: 40},
{name: 'Step 5', value: 10}
])
});
});
});
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>