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

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

Answer 2

我面临着同样的问题，在阅读文档后我发现你应该设置parentHeightOffsetas的值0，像这样

var opt1 = {
    chart: {
      type: 'line',
      height: 200,
      ...
      parentHeightOffset: 0,
      ...
    },
    ...
};