JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
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: {
stacking: 'percent',
shadow: false
},
bar: {
groupPadding: 0
}
},
series: [{
name: 'right padding',
data: [0, {y: 20, color: 'white'}, {y: 30, color: 'white'}, {y: 40, color: 'white'}, {y: 50, color: 'white'}]
}, {
name: 'Value',
data: [100, 60, 40, 25, 10]
}, {
name: 'left padding',
data: [0, {y: 20, color: 'white'}, {y: 30, color: 'white'}, {y: 40, color: 'white'}, {y: 50, color: 'white'}]
}]
});
});
});