Highcharts horizontal bar chart
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function() {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
lineColor: 'green',
lineWidth: 2,
tickWidth: 0,
categories: ['US', 'APAC', 'EU', 'Africa', 'EMEA', 'LATAM'],
labels: {
useHTML: true,
x: -20
}
},
yAxis: {
gridLineWidth: 0,
min: 0,
title: {
text: 'category'
}
},
legend: {
reversed: true
},
plotOptions: {
bar: {
dataLabels: {
enabled: true,
formatter: function(e) {
return this.series.name
}
}
},
series: {
pointPadding: 0.3,
}
},
colors: ["red"],
gridLineColor: "red",
series: [{
name: 'abc',
data: [2309.65]
},
{
name: 'edg',
data: [56565]
},
{
name: 'dfsdf',
data: [3533]
},
{
name: 'yyyy',
data: [12423]
},
]
});
});