chart.js如何删除边框

2lpgd968  于 2023-10-18  发布在  Chart.js
关注(0)|答案(1)|浏览(175)

我正在尝试删除图表中的边框:

你看不到它,但也有x轴的边界。
我试过:
scaleLineColor:“rgba(0,0,0,0)”和
drawBorder:false,
但是黑框还在,你能帮我吗?我用的是chart.js 4.3.0

const AreaChart = () => {
  const chartContainer = useRef(null);
  const data = [1,2,3];

  useEffect(() => {
    if (chartContainer.current) {
      const ctx = chartContainer.current.getContext("2d");

      const labels = ["Today","Day 2"];

      const myChart = new Chart(ctx, {
        type: "line",
        data: {
          labels: labels,
          datasets: [
            {
              label: "Data",
              data: data,
              fill: true,
            },
          ],
        },
        scaleLineColor: "rgba(0,0,0,0)",
        options: {
          scales: {
            x: {
              grid: {
                drawBorder: false,
                display: false,
                color: "rgba(255, 255, 255, 0.1)",
              },
            },
            y: {
              grid: {
                drawBorder: false,
                display: false,
                color: "rgba(255, 255, 255, 0.1)",
              },
            },
          },
        },
      });

    }
  }, []);

  return (
    <div style={{ width: "100%", margin: "0 auto" }}>
      <canvas ref={chartContainer} />
    </div>
  );
};

export default AreaChart;
jjjwad0x

jjjwad0x1#

你需要使用边界:{display:false}对于每个轴:

...
   scales: {
          x: {
            border: {
              display: false,
            },
            grid: {
              display: false,
              color: "rgba(255, 255, 255, 0.1)",
            },
          },
          y: {
            border: {
              display: false,
            },
            grid: {
              display: false,
              color: "rgba(255, 255, 255, 0.1)",
            },
          },
        },

相关问题