How to make ApexCharts.js take full width?

Web Development
1

I have a distributed columns chart. It’s working perfectly but the problem is it’s taking only 300px width. I want it to fit the parent size.

<div id="price-list" class="apex-charts" 
data-colors='["#777aca", "#5156be", "#564ab1", "#6f42c1", "#a8aada"]'
data-price='{{ json_encode(array_values($price_list)) }}'
data-labels='{{ json_encode(array_keys(($price_list)) }}'></div>

var colors = JSON.parse( $('#price-list').attr('data-colors') );
var options = {
    series: [{
        data: JSON.parse( $('#price-list').attr('data-price') ),
    }],
    chart: {
        height: 350,
        type: 'bar',
        events: {
            mounted: (chart) => {
              chart.windowResizeHandler();
            }
        }
    },
    colors: colors,
    plotOptions: {
        bar: {
            columnWidth: '60%',
            distributed: true,
        }
    },
    dataLabels: {
        enabled: false
    },
    legend: {
        show: false
    },
    xaxis: {
        categories: JSON.parse( $('#price-list').attr('data-labels') ),
        labels: {
            style: {
              colors: colors,
              fontSize: '12px'
            }
        }
    }
};

var chart = new ApexCharts(document.querySelector("#price-list"), options);
chart.render();
2

You can add 100% width to your chart like below.

chart: {
    width: '100%'
}

You can use both numbers or strings here.

3

Thank you for your quick reply but the width is still 300px.

4

You can try setting up the width from the parent or any other element with js.

chart: {
    width: $('#price-list').width()
}

Can you please confirm your element #price-list has a width set? If not then 100% width will not work.

5

Yes, adding width to the parent fix the problem. thanks again :slight_smile: