[Vuejs]-Is there a way to add white space before and after x-axis in an apex chart?

by

0👍

you can add padding to the sides using grid option


import ApexCharts from 'apexcharts'


var options = {
  chart: {
    type: 'line'
  },
  series: [{
    name: 'sales',
    data: [30,40,35,50,49,60,70,91,125]
  }],
  xaxis: {
    categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999],
    
  },
  grid: {
    show: true,
    borderColor: '#90A4AE',
    strokeDashArray: 0,
    position: 'back',
    xaxis: {
        lines: {
            show: false
        }
    },   
    yaxis: {
        lines: {
            show: false
        }
    },  
    row: {
        colors: undefined,
        opacity: 0.5
    },  
    column: {
        colors: undefined,
        opacity: 0.5
    },  
    padding: {
        top: 0,
        right: 50,
        bottom: 0,
        left: 50
    },  
}
}

var chart = new ApexCharts(document.querySelector("#app"), options);

chart.render()

Leave a comment