reactjschartsapexcharts

ApexCharts Remove extra bottom padding

I have the following bar chart configuration. 

const series = [
    {
      name: 'Net Profit',
      data: [18, 34, 55, 57, 80, 70],
    },
  ];
  const options = {
    chart: {
      type: 'bar',
      height: '50px',
      toolbar: {
        show: false,
      },
    },
    grid: {
      show: false,
      padding: {
        top: 0,
        bottom: 0,
      },
      xaxis: {
        lines: {
          show: false,
        },
      },
      yaxis: {
        lines: {
          show: false,
        },
      },
    },
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: '80%',
        barHeight: '100%',
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      show: false,
      width: 0,
      colors: ['transparent'],
    },
    fill: {
      opacity: 1,
      colors: [
        '#000000',
        '#B32824',
        '#1A73E8',
        '#B32824',
        '#1A73E8',
        '#B32824',
      ],
      type: 'solid',
    },
    tooltip: {
      enabled: false,
    },
    xaxis: {
      axisTicks: {
        show: false,
      },
      axisBorder: {
        show: false,
      },
      labels: {
        show: false,
      },
    },
    yaxis: {
      axisTicks: {
        show: false,
      },
      axisBorder: {
        show: false,
      },
      labels: {
        show: false,
      },
    },
  };

I am getting extra padding at the bottom as below. how can I remove that? enter image description here

Solution

  • If you don't want to show x-axis and y-axis in your chart, you can simply do

    const options = {
  chart: {
    type: 'bar',
    height: '250px',
    sparkline: {
      enabled: true
    }
  },
}

    The sparkline option will remove all paddings/margins around the chart.