Chart.js左侧边框不显示及方块全边装饰需求咨询

当前用Chart.js生成的横向堆叠条形图中，方块的上、右、下边缘可见，但左侧完全隐藏，需要为每个方块的四边添加装饰性边框，实现全边装饰效果。

解决思路及代码修改 #

要让每个条形的四边都显示边框，需调整以下核心配置：

• 为所有数据集统一设置borderWidth和borderColor，确保每个条形都有边框样式
• 关闭Chart.js默认的borderSkipped属性（默认横向条形图会跳过左侧边框），设置为false即可渲染四边边框
• 保持y轴堆叠配置，确保条形正确排列

修改后的完整代码如下：

"use client";
import { useRef, useEffect } from "react";
import { Chart } from "chart.js/auto";

export function IndiceIniquidade() {
  const chartRef = useRef(null);

  useEffect(() => {
    if (chartRef.current) {
      if (chartRef.current.chart) {
        chartRef.current.chart.destroy();
      }

      const context = chartRef.current.getContext("2d");

      const newChart = new Chart(context, {
        type: "bar",
        data: {
          labels: [""],
          datasets: [
            {
              label: "Bom",
              data: [{ x: [0, 20], y: "" }],
              backgroundColor: ["rgba(219, 96, 116, 1)"],
              borderColor: ["rgba(0, 0, 0, 1)"],
              borderWidth: 2,
              borderSkipped: false
            },
            {
              label: "Ruim",
              data: [{ x: [20, 40], y: 0 }],
              backgroundColor: ["rgba(236, 141, 84, 1)"],
              borderColor: ["rgba(0, 0, 0, 1)"],
              borderWidth: 2,
              borderSkipped: false
            },
            {
              label: "Loading",
              data: [{ x: [40, 60], y: "" }],
              backgroundColor: ["rgba(254, 227, 119, 1)"],
              borderColor: ["rgba(0, 0, 0, 1)"],
              borderWidth: 2,
              borderSkipped: false
            },
            {
              label: "Loading2",
              data: [{ x: [60, 80], y: "" }],
              backgroundColor: ["rgba(197, 202, 108, 1)"],
              borderColor: ["rgba(0, 0, 0, 1)"],
              borderWidth: 2,
              borderSkipped: false
            },
            {
              label: "Loading3",
              data: [{ x: [80, 100], y: "" }],
              backgroundColor: ["rgba(142, 171, 103, 1)"],
              borderColor: ["rgba(0, 0, 0, 1)"],
              borderWidth: 2,
              borderSkipped: false
            },
          ],
        },
        options: {
          indexAxis: "y",
          aspectRatio: 3,
          scales: {
            y: {
              beginAtZero: true,
              stacked: true,
              display: false
            },
            x: {
              display: false,
            },
          },
          plugins: {
            legend: {
              display: false,
            },
          },
          layout: {
            padding: 0
          },
          responsive: true,
        },
      });

      chartRef.current.chart = newChart;
    }
  }, []);

  return (
    <div style={{ height: "50px" }}>
      <canvas ref={chartRef} />
    </div>
  );
}

关键修改说明 #

1. borderSkipped: false：这是核心设置，Chart.js默认对横向条形图跳过左侧边框（borderSkipped: 'left'），设置为false后会强制渲染四个方向的边框
2. 统一边框样式：为所有数据集添加borderWidth和borderColor，你可以根据需求自定义边框的颜色和宽度
3. 隐藏y轴刻度：添加y: { display: false }，避免刻度元素干扰边框显示，让整体视觉更整洁

内容的提问来源于stack exchange，提问作者Mikael C. Barros