5

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:

enter image description here

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

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

Thanks

3
  • Are you using CSS flex around the charts? Commented Sep 29, 2020 at 19:44
  • in a way. I'm using vuetify's grid. but its 3-4 level above the chart.
    – dor272
    Commented Sep 29, 2020 at 20:37
  • 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. now after resize it takes 100% like it should but on first render it overflows. I found this issue stackoverflow.com/questions/55326858/… but in my case there are no errors of failing to get the parent node.
    – dor272
    Commented Sep 30, 2020 at 7:22

8 Answers 8

16

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

1
  • 1
    Thank you so much. I don't know why it works, but it solved my issue! Commented Jul 21, 2021 at 11:38
3

I used the following option and it worked:

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

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.

1
  • 1
    Hi, can you show how to solved the problem? I'm using vuetify v-flex for the apexchart but facing the same problem.
    – luvwinnie
    Commented Jan 10, 2022 at 7:18
0

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.

0

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.

0

For React

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

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

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.

-1
chart: {
    width: '100%'
}

this might fix your issue

my issue resolved using this method ref

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.