Chart.js设置图例位置为右侧不生效问题求助

问题原因 #

你使用的是Chart.js 3.x版本，该版本的配置结构相比2.x有不兼容的大改，原有图例配置不生效是因为配置路径错误。

修改要点 #

• 图例（legend）属于插件类配置，必须放在options.plugins层级下，不能直接挂载在options根节点下，你当前的写法是2.x版本的规范，在3.x中不会被识别。
• 你当前配置中的坐标轴（scales）写法也遵循2.x版本规范，3.x中不再使用xAxes/yAxes数组格式，改为直接声明x/y轴配置对象，建议同步修改避免后续出现其他异常。

修改后的配置示例 #

仅需要调整options部分的结构即可：

"options": {
    "scales": {
        "x": {
            "stacked": true,
            "ticks": {
                "beginAtZero": true,
                "maxRotation": 0,
                "minRotation": 0
            }
        },
        "y": {
            "stacked": true
        }
    },
    "responsive": true,
    "plugins": {
        "legend": {
            "display": true,
            "position": "right",
            "align": "start"
        }
    }
}

修改后重新运行即可看到图例正常显示在图表右侧顶部位置。

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