我想更改标签在React图表中的位置和样式

Question

我正在使用react-chartjs-2。我想在图形下方显示标签的位置。此外，标签的形状目前是正方形，但我想将其更改为圆形。我指定了选项和位置：底部，但标签的位置没有改变。

import "./styles.css";
import React from "react";
import { Bar } from "react-chartjs-2";
const data = [
{
label: "a",
data: [56, 23, 55, 56, 57]
},
{
label: "b",
data: [22, 17, 32, 47, 62]
},
{
label: "c",
data: [46, 73, 25, 76, 27]
}
];
const App = () => {
const CHART_COLORS = ["#e35b2c", "#e77235", "#eb8a40"];
const list = data.map((d, index) => {
return {
label: d.label,
backgroundColor: CHART_COLORS[index],
data: d.data,
stack: 1
};
});
const options = {
legend: {
position: "bottom"
}
};
return (
<>
<div className="App">
<Bar
data={{
labels: ["block1", "block2", "block3"],
datasets: list
}}
width={100}
height={50}
options={options}
/>
</div>
</>
);
};
export default App;

Answer 1

图例选项在最新版本的chartjs中更改为，

Namespace: options.plugins.legend

plugins: {
legend: {
position: "bottom",
labels: {
usePointStyle: true //for style circle
}
}
}
};

你可以在这里查看工作演示，https://codesandbox.io/s/react-chartjs-legend-option-prbgb

参考：https://www.chartjs.org/docs/latest/configuration/legend.html