apex charts spacing

by Craig Haywood

HTML

<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div class="container">
      <vue-apex-charts
        type="area"
        :options="chartOptions"
        :series="series">
      </vue-apex-charts>
    </div>bbb
  </div>
  <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>

CSS

.container {
  background-color: #eee;
  width: 25%;
}

JavaScript

new Vue({
	el: "#app",
  data() {
  	return {
		        chartOptions: {
		        	grid: {
		        		show: false,
                padding: {
                	left: 0,
                  right: 0
                }
               },
						 
		        	
		        	chart: {
		        		toolbar: {
		        			show: false,
                  padding: {
                	left: 110,
                  bottom: 110
                }
		        		},
                sparkline: {
                	enabled: true
                }
		        	},
					dataLabels: {
						enabled: false
					},
					stroke: {
						curve: 'smooth'
					},
					xaxis: {
          				type: 'numeric',
					        lines: {
					            show: false,
					        },
                  axisBorder: {
                    show: false,
                  },
                
			             labels: {
	            			show: false,
	            		},
		          	},
					yaxis: [{
				        y: 0,
				        offsetX: 0,
				        offsetY: 0,
				        padding: {
						    left: 0,
						    right: 0
						},
			      	}],
					tooltip: {
						x: {
							show: false,
							format: 'dd/MM/yy HH:mm'
						},
					},
		    },  
				series: [{
          name: 'series1',
          data: [31, 40, 28, 51, 42, 109, 100]
        }],
    }
  },
  components: {
  	VueApexCharts
  }
})