title: Apex chart in vue 3 coming in zoom out mode or cropped from left side
body: <p>Please help, I am new in vue 3 and first time using Apex chart. As shown in image below Apex chart is opening in zoom out mode(left side is not coming properly). Every time I need to click on Reset or zoom in button to make it proper.</p>
  <p><a href="https://i.stack.imgur.com/rln40.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rln40.png" alt="enter image description here" /></a></p>
  <p>Once I click on Reset or Zoom in chart is coming properly as shown in image2
  <a href="https://i.stack.imgur.com/NJPNb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NJPNb.png" alt="enter image description here" /></a></p>
  <p>I have tried many changes in css but nothing worked. I tried to disable zoom in zoom out. I changed apexchart width too, nothing is working.
  Modal.vue file</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;modal-backdrop&quot;&gt;
      &lt;div class=&quot;modal&quot;&gt; 
        &lt;section class=&quot;modal-body&quot;&gt;
        
         &lt;slot name=&quot;body&quot;&gt; 
         &lt;apexchart width=&quot;1000&quot; type=&quot;line&quot; :options=&quot;options&quot; :series=&quot;series&quot; id=&quot;chart&quot;&gt;&lt;/apexchart&gt;
         &lt;/slot&gt;
         &lt;/section&gt;
  
         &lt;button
            type=&quot;button&quot;
            class=&quot;btn-close&quot;
            @click=&quot;close&quot;&gt; X  &lt;/button&gt;
           &lt;/div&gt;  
      &lt;/div&gt;      
    
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
  props: ['options','series'],
  methods: {
        close() {
          this.$emit('close');
        },
  
  }  
  
  }
  
  &lt;/script&gt;
  
  &lt;style &gt;
  
    .modal-backdrop {
      position: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.3);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    .modal {
      background: #FFFFFF;
      box-shadow: 2px 2px 20px 1px;
      overflow-x:hidden;
      display: flex;
      flex-direction:inherit;
      width:auto !important;
      height:auto !important;
      position:relative !important;
      
      
    }
   
    .modal-header,
    .modal-footer {
      padding: 15px;
      display: flex;
    }
  
    .modal-header {
      position: relative;
      border-bottom: 1px solid #eeeeee;
      color: #4AAE9B;
      justify-content: space-between;
    }
  
    .modal-footer {
      border-top: 1px solid #eeeeee;
      flex-direction: column;
    }
  
    .modal-body {
      position:relative;
      padding: 20px 10px;
      margin-left:20px;
    
    }
  
  </code></pre>
  <p>Code section where I imported modal.vue.</p>
  <pre><code>&lt;template&gt;
  &lt;/div&gt; &lt;!--main container closing--&gt;
    &lt;Modal :options=&quot;options&quot;  :series=&quot;series&quot; v-show=&quot;isModalVisible&quot;
     @close=&quot;closeModal&quot; &gt;&lt;/Modal&gt; 
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from 'axios';
  import Modal from &quot;@/components/Modal.vue&quot;;
  
  export default{
    components:{
     Modal
      
    },
  data(){
  return{
  
       isModalVisible: false,
       t:[],
      
      options: {
          chart: {
             id: 'vuechart-example',
             height: 350,
             type: &quot;line&quot;,
             zoom: {
            enabled: true,
            type: 'x',  
            autoScaleYaxis: false,  
            zoomedArea: {
              fill: {
                color: '#90CAF9',
                opacity: 0.2
              },
              stroke: {
                color: '#0D47A1',
                opacity: 0.4,
                width: 1
              }
            }
        },
        toolbar: {
              autoSelected: 'zoom'
            }          
             
          },
          xaxis: {
            categories: [],
            tickPlacement: 'on',
             title: {
                  text: ' '
                }, 
             },
           /* dataLabels: {
                enabled: true,
              },*/
              stroke: {
                curve: 'straight'
              },
              title: {
                text: ' ',
                align: 'center'
              },
              grid: {
                borderColor: '#e7e7e7',
                row: {
                  colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                  opacity: 0.2
                },
              },
              markers: {
                size: 1
              },
             
              yaxis: {
                title: {
                  text: ' '
                },
              },
              
             
            
          colors: [&quot;#0000d1&quot;,&quot;#ff2424&quot;, &quot;#a024ff&quot;,&quot;#ff94c9&quot;,&quot;#919191&quot;,&quot;#5252ff&quot;,&quot;#00adad&quot;,&quot;#651a1a&quot;,&quot;#52ff52&quot;,&quot;#2e0000&quot;,&quot;#c7a170&quot;,&quot;#ffb224&quot;]
        }
  </code></pre>