如何在vue-chartJS中将图例(legend)位置调整至图表底部

按照你使用的版本选择对应配置即可：

• 若使用 Vue-Chart.js v4/v5 版本（配套 Chart.js v3/v4 核心库）
  在图表的options配置中添加以下规则：

const options = {
  plugins: {
    legend: {
      position: 'bottom'
    }
  }
}

组件调用时直接绑定配置即可：

<BarChart :data="data" :options="options" />

• 若使用 Vue-Chart.js v3 及更早版本（配套 Chart.js v2 核心库）
  直接在options下配置legend字段：

const options = {
  legend: {
    position: 'bottom'
  }
}

如果配置后不生效，优先核对当前安装的版本和配置层级是否匹配即可。

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