apexchart width overflows or doesn't strech

Question

I'm using apexcharts with vue. I want the sparkline graph to take 100% of the width of it's parent.

So this is what I did:

<div>
  <apexchart
    :options="chartOptions"
    :series="series"
    height="150"
    style="width: 100%"
  />
</div>

I tried also to set the width as a prop of the component but it behaves the same.

Here are my chart options:

chartOptions: {
   chart: {
       type: 'area',
       sparkline: {
           enabled: true
       }
   },
   dataLabels: {
       enabled: false
   },
   stroke: {
       curve: 'straight',
       width: 3,
   },
   xaxis: {
       type: 'datetime',
   }
}

So nothing special here, it is copied from apex dashboard example, the only thing I've added is trying to set the width 100%.

It overflows it's parent (green) and the parent's container (yellow) as shown here:

But also when I resize the window(without refresh) it doesn't retain its size, it becomes smaller than the parent:

How can I make it fill the width of it's parent (green container) and keep it that way (responsive)?

Thanks

Answer 1

I figured out that the gap after resizing is due to missing data in the series and the fact that I have set a max attribute for the x axis.

So that solved issue #2.

Apparently the charts render before it should, so it doesn't get the right parent's width, a workaround that solved it for me was to not render the chart after the component is mounted.

Answer 2

For React

The following code should be given in the component in which the chart has been called.

  useEffect(() => {
    window.dispatchEvent(new Event('resize'))
  },[])

Answer 3

If your chart is rendering before the parent container because you have a style display:flex on parent container and you want to keep the display type flex then try following:

<div class="flex flex-col items-center justify-between">
    <div id="chart"></div>
</div>

...

<script type="text/javascript" defer>

    // Your chart options as you like it // 
    var options = [...];

    function renderchart() {
        var chart = new ApexCharts(document.querySelector("#chart"), options);
        chart.render();
    
        // This will trigger a resize event //
        window.dispatchEvent(new Event('resize'));
    }

...

// Put this somewhere in the code to call the render method //
renderchart();
</script>

This scaling can be visible when the chart loads but if that is not a problem then this should solve the issue of chart not taking full width available in parent container.

Answer 4

I had the same issue, I just removed display: flex on the container and that resolved the issue :)

Answer 5

you can do xaxis: { tickPlacement: "between", }, by defalut it is "On",

it just places you data in between so you can see a little space on left & right end of the x axis.

Answer 6

chart: {
    width: '100%'
}

this might fix your issue

my issue resolved using this method ref

Answer 7

If you're using flex on your container and you can't stop using it try using max-width: 100% !important; in this container - works for me.

Answer 8

I used the following option and it worked:

const chartOptions = {
    chart: {
      events: {
        mounted: (chart) => {
          chart.windowResizeHandler();
        }
      }
    }
  };