Я использую реактивную диаграмму js -2 для построения бара на месте. https://github.com/jerairrest/react-chartjs-2
Я выполнил домашнюю работу, нет надлежащей документации по объекту 'option'.
пожалуйста, обратитесь к этой песочнице для кода, который я написал. https://codesandbox.io/s/fast-mountain-3eh2c
import "./styles.css";
import { Bar } from "react-chartjs-2";
export default function App() {
const dataOnBar = [];
for (let i = 1; i <= 10; i++) {
dataOnBar.push(i);
}
console.log('dataonBar',dataOnBar)
const options = {
responsive: true,
tooltips: { enabled: false },
legend: {
display: false
},
scales: {
xAxes: [
{
display: false
}
],
yAxes: [
{
display: false,
ticks: {
min: 0
}
}
]
}
};
let barData = {
labels: dataOnBar.map((val, i) => i),
datasets: [
{
backgroundColor: "pink",
hoverBackgroundColor: "blue",
data: dataOnBar
}
]
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<Bar data={barData} options={options} />
</div>
);
}```