<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Stacked Bar Chart with Negative Values</title> <link href="../../assets/styles.css" rel="stylesheet" /> <style> #chart { max-width: 650px; margin: 35px auto; } </style> </head> <body> <div id="chart"> <apexchart type=bar height=440 :options="chartOptions" :series="series" /> </div> <!-- Below element is just for displaying source code. it is not required. DO NOT USE --> <div id="html"> <div id="chart"> <apexchart type=bar height=350 :options="chartOptions" :series="series" /> </div> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script> <script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script> <script> new Vue({ el: '#chart', components: { apexchart: VueApexCharts, }, data: { series: [{ name: 'Males', data: [0.4, 0.65, 0.76, 0.88, 1.5, 2.1, 2.9, 3.8, 3.9, 4.2, 4, 4.3, 4.1, 4.2, 4.5, 3.9, 3.5, 3 ] }, { name: 'Females', data: [-0.8, -1.05, -1.06, -1.18, -1.4, -2.2, -2.85, -3.7, -3.96, -4.22, -4.3, -4.4, -4.1, -4, -4.1, -3.4, -3.1, -2.8 ] } ], chartOptions: { chart: { stacked: true }, colors: ['#008FFB', '#FF4560'], plotOptions: { bar: { horizontal: true, barHeight: '80%', }, }, dataLabels: { enabled: false }, stroke: { width: 1, colors: ["#fff"] }, grid: { xaxis: { showLines: false } }, yaxis: { min: -5, max: 5, title: { // text: 'Age', }, }, tooltip: { shared: false, x: { formatter: function (val) { return val } }, y: { formatter: function (val) { return Math.abs(val) + "%" } } }, title: { text: 'Mauritius population pyramid 2011' }, xaxis: { categories: ['85+', '80-84', '75-79', '70-74', '65-69', '60-64', '55-59', '50-54', '45-49', '40-44', '35-39', '30-34', '25-29', '20-24', '15-19', '10-14', '5-9', '0-4' ], title: { text: 'Percent' }, labels: { formatter: function (val) { return Math.abs(Math.round(val)) + "%" } } }, } } }) </script> </body> </html>