-
Rushikesh Padsala authored27ca663e
<!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</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=350 :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: 'Marine Sprite', data: [44, 55, 41, 37, 22, 43, 21] }, { name: 'Striking Calf', data: [53, 32, 33, 52, 13, 43, 32] }, { name: 'Tank Picture', data: [12, 17, 11, 9, 15, 11, 20] }, { name: 'Bucket Slope', data: [9, 7, 5, 8, 6, 9, 4] }, { name: 'Reborn Kid', data: [25, 12, 19, 32, 25, 24, 10] }], chartOptions: { chart: { stacked: true, }, plotOptions: { bar: { horizontal: true, }, }, stroke: {
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
width: 1,
colors: ['#fff']
},
title: {
text: 'Fiction Books Sales'
},
xaxis: {
categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
labels: {
formatter: function (val) {
return val + "K"
}
}
},
yaxis: {
title: {
text: undefined
},
},
tooltip: {
y: {
formatter: function (val) {
return val + "K"
}
}
},
fill: {
opacity: 1
},
legend: {
position: 'top',
horizontalAlign: 'left',
offsetX: 40
}
}
}
})
</script>
</body>
</html>