HTML
CSS
JavaScript
HTML
<!DOCTYPE html>
<html lang="zh" >
<head>
<meta charset="UTF-8">
<title>Apexcharts - responsive</title>
</head>

<body>
<div id="responsive-chart"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/apexcharts/3.35.0/apexcharts.min.js"></script>
</body>
</html>
CSS

  

  

    
JavaScript

    
var options = {
    chart: {
        width: '100%',
        height: 380,
        type: 'bar',
    },
    plotOptions: {
        bar: {
            horizontal: true,
        }
    },
    dataLabels: {
        enabled: false
    },
    stroke: {
        width: 1,
        colors: ['#fff']
    },
    series: [{
        data: [44, 55, 41, 64, 22, 43, 21]
    },
    {
        data: [53, 32, 33, 52, 13, 44, 32]
    }],
    xaxis: {
        categories: ['Korea', 'Canada', 'Poland', 'Italy', 'France', 'Japan', 'China'],
    },
    legend: {
        position: 'right',
        verticalAlign: 'top',
        containerMargin: {
            left: 35,
            right: 60
        }
    },
    responsive: [{
        breakpoint: 1000,
        options: {
            plotOptions: {
                bar: {
                    horizontal: false
                }
            },
            legend: {
                position: 'bottom'
            }
        }
    }]
}
var chart = new ApexCharts(document.querySelector("#responsive-chart"), options);
chart.render();