ApexCharts删除多余的底部填充

Question

我具有以下条形图配置。

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,
      },
    },
  };

我在底部获得了额外的填充，如下所示。我该如何删除？

Answer 1

如果您不想在图表中显示x轴和y轴，只需执行

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

迷你图选项将删除图表周围的所有填充/边距。