ChartJS水平柱状图设置tick.mirror后标签重复显示问题求助

你遇到的标签重复问题，根源是设置了yAxis.ticks.mirror: true——这个配置会让Y轴刻度标签同时显示在轴的两侧（外部左侧和柱子内部右侧），所以出现重复。

要实现标签仅显示在柱子内部，只需要调整以下配置：

• 移除mirror: true配置
• 为yAxis.ticks添加padding属性，设置为合适的负数，将标签从轴的外侧拉到柱子内部

修改后的scales配置如下：

scales: {
    yAxis: {
        ticks: {
            padding: -180 // 根据你的标签长度调整数值，确保标签完全处于柱子内部
        }
    }
}

完整的配置代码示例：

var chartElm = document.getElementById('chart-e117165e');
var chartObj = new Chart(chartElm, {
    type: 'bar',
    data: {
        labels: ["This is one reason","This is another reason","This will end the chat"],
        datasets: [{
            label: "Select",
            data: [299,296,296],
            backgroundColor: ["rgba(255, 99, 132, 0.5)","rgba(255, 159, 64, 0.5)","rgba(255, 159, 64, 0.5)"],
            borderWidth: 1
        }]
    },
    options: {
        indexAxis: 'y',
        responsive: true,
        maintainAspectRatio: true,
        title: {
            text: "Select",
            display: true,
        },
        scales: {
            yAxis: {
                ticks: {
                    padding: -180 // 调整这个值适配你的标签长度
                }
            }
        },
        events: [],
        legend: {
            display: true,
        },
        tooltips: {
            mode: ''
        },
        layout: {},
        animation: {}
    }
});

说明：padding的负数数值需要根据你的标签长度和柱子宽度调整，确保标签完全落在柱子内部，不会被截断或者超出柱子范围。

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