How to make ApexCharts.js take full width?

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) => {
    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);

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

chart: {
    width: '100%'

You can use both numbers or strings here.

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

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.

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