【问题标题】:how to hide x axis bar on apex chart?如何隐藏顶点图表上的x轴条?
【发布时间】:2026-02-24 08:00:01
【问题描述】:

我使用 react-apexcharts 来制作下面的图表,我需要显示图表的最小视图,因此我隐藏了 x、y 轴、图例、网格和所有内容,但是这个底部的酒吧没有隐藏。我在文档中找不到正确的选项!有什么办法可以隐藏吗?

这是我得到的当前输出!

const ProductivityGraph = () => {
  const series = [{
    name: 'Series A',
    data: [23, 24, 25, 15, 25, 28, 38, 46],
  },
  {
    name: 'Series B',
    data: [20, 29, 37, 36, 44, 45, 50, 58],
  },
  ];
  const options:any = {
    chart: {
      toolbar: { // Hamburger menu at top
        show: false,
      },
      height: 350,
      type: 'line',
      zoom: {
        enabled: false,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: 'smooth',
      width: 2,
    },
    title: {
      text: undefined,
      align: 'left',
    },
    grid: {
      show: false,
    },
    legend: {
      show: false,
    },
    xaxis: {
      show: false,
      labels: {
        show: false,
      },
      
    },
    yaxis: {
      show: false,
      labels: {
        show: false,
      },
      axisBorder: {
        show: false,
      },
      axisTicks: {
        show: false,
      },
      crosshairs: {
        show: false,
      },
      tooltip: {
        enabled: false,
      },
     
    },
  };
  return (
    <div>
      <ReactApexChart options={options} series={series} type="line" width={250} />
    </div>
  );
};

【问题讨论】:

    标签: reactjs charts apexcharts


    【解决方案1】:

    在您的选项中,将xaxis 替换为以下一个

    xaxis: {
      show: false,
      labels: {
        show: false
      },
      axisBorder: {
        show: false
      },
      axisTicks: {
        show: false
      }
    },
    

    【讨论】:

    • 乐于助人:)
    最近更新 更多