React JS：修复Apex Chart在容器内的宽度填充问题

我想让Apex Chart填满容器的全部宽度（对应图中绿色标记区域），目前能看到下方的月份标签宽度比图表本身宽，不知道Apex Chart有没有配置属性可以解决这个问题。

我的图表组件代码 #

import React from "react";
import Chart from "react-apexcharts";

const BasicArea = ({ height = 350 }) => {
  const [isDark] = useDarkMode();
  const series = [
    { name: "Debit", data: [90, 70, 85, 60, 80, 70, 90, 75, 60, 80] },
    {
      name: "Credit",
      data: [60, 80, 70, 90, 75, 60, 80, 90, 70, 85],
    },
  ];

  const options = {
    chart: {
      toolbar: {
        show: false,
      },
    },
    dataLabels: {
      enabled: false,
    },
    legend: {
      show: true,
      position: "top",
      horizontalAlign: "right",
      fontSize: "12px",
      fontFamily: "Inter",
      offsetY: -0, // adjust this value
      markers: {
        width: 8,
        height: 8,
        offsetY: -1,
        offsetX: -5,
        radius: 12,
      },
      labels: {
        colors: isDark ? "#CBD5E1" : "#475569",
      },
      itemMargin: {
        horizontal: 18,
        vertical: 0,
      },
    },

    stroke: {
      curve: "smooth",
      width: 4,
    },
    colors: ["#4669FA", "#EC4899"], // set the colors for each series
    tooltip: {
      theme: "dark",
      shared: true, // enable shared tooltips to show data for both series
    },
    grid: {
      show: false,
      borderColor: isDark ? "#334155" : "#e2e8f0",
      strokeDashArray: 10,
      position: "back",
    },
    fill: {
      type: "gradient",
      gradient: {
        shadeIntensity: 1,
        opacityFrom: 0.4,
        opacityTo: 0.5,
        stops: [50, 100, 0],
      },
    },
    yaxis: {
      labels: {
        show: false,
        style: {
          colors: isDark ? "#CBD5E1" : "#475569",
          fontFamily: "Inter",
        },
      },
    },
    xaxis: {
      categories: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec",
      ],
      labels: {
        style: {
          colors: isDark ? "#CBD5E1" : "#475569",
          fontFamily: "Inter",
        },
      },
      axisBorder: {
        show: false,
      },
      axisTicks: {
        show: false,
      },
    },
    padding: {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
    },
  };

  return (
    <div>
      <Chart options={options} series={series} type="area" height={height} />
    </div>
  );
};

export default BasicArea;

父组件代码 #

<div className="lg:col-span-7 xl:col-span-8 2xl:col-span-8 col-span-12">
          <div className="space-y-5 bank-table">
            <Card
              title="Transactions Trend"
              headerslot={<SelectMonth />}
              bodyClass="p-0"
            >
              <BasicArea height={height} />
              
              <div className=" w-4/5 flex justify-center items-center mx-auto">
                <Modal
                  title="Scrollable Content Modal"
                  label="See detailed report"
                  labelClass="btn-outline-primary block-btn mt-6 w-1/2"
                  uncontrol
                  scrollContent
                >
                  <TransactionsTable />
                </Modal>
              </div>
            </Card>
          </div>
        </div>

解决方案 #

要让图表填满容器宽度，可通过以下配置调整：

• 强制图表占满父容器宽度
  在chart配置中添加width: '100%'：

chart: {
  toolbar: {
    show: false,
  },
  width: '100%'
},

• 移除x轴左右默认间距
  在xaxis配置里添加offset: 0和rangePadding: 0，消除x轴两侧的留白：

xaxis: {
  // 保留原有配置
  offset: 0,
  rangePadding: 0
},

• 确保父容器无额外内边距
  给图表外层的div加上w-full类（适配Tailwind CSS），同时确认Card的bodyClass="p-0"确实移除了内边距：

return (
  <div className="w-full">
    <Chart options={options} series={series} type="area" height={height} />
  </div>
);

• 微调legend避免挤压
  如果右侧legend占用空间，可调整offsetX减少其右侧占位：

legend: {
  // 保留原有配置
  offsetX: -10
},

组合以上配置后，图表就能完全填满容器的绿色标记区域，月份标签宽度也会和图表保持一致。

内容的提问来源于stack exchange，提问作者Steven