$(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>