Apex charts
Charts should resize if i reduce div width
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div id="app">
<div id="container">
<vue-apex-charts
:options="chartOptions"
:series="series">
</vue-apex-charts>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>
JavaScript
new Vue({
el: "#app",
data() {
return {
series: [{
name: 'Likes',
data: [4, 3, 10, 9, 29, 19, 22, 9, 12, 7],
color: "#FFF" // serie color
}],
chartOptions: {
chart: {
height: 600,
type: 'bar',
foreColor: '#FFFFFF88',
fontFamily: 'Montserrat, sans-serif',
toolbar: {
show: false
},
},
plotOptions: {
bar: {
horizontal: true,
/* rangeBarOverlap: true, */
borderRadius: 2,
barHeight: '20',
},
},
stroke: {
width: 0,
curve: 'smooth'
},
fill: {
type: 'gradient',
colors:['#FFF'],
gradient: {
shade: 'dark',
shadeIntensity: 1,
type: 'vertical',
gradientToColors: [ '#000'],
opacityFrom: 1,
opacityTo: 1,
stops: [0, 100,100,100]
},
},
yaxis: {
min: 0,
max: 100,
lines: {
show: false,
},
},
xaxis: {
min: 0,
max: 500,
color:'#FFF',
lines: {
show: false,
},
},
},
}
},
components: {
VueApexCharts
}
})