JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
$(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) {
...