我已经实现了react-chartjs2 https://www.npmjs.com/package/react-chartjs-2 在我的应用中我已经成功实现了它,但是在悬停图表时我需要更改工具提示的方向。目前看起来像这样
但是我希望我的工具提示看起来像这样
我该如何实现
我的图表和图表选项代码
const barChartOptions = {
tooltips: {
custom: function(tooltip) {
if (!tooltip) return;
// disable displaying the color box;
tooltip.displayColors = false;
},callbacks: {
// use label callback to return the desired label
label: function(tooltipItem,data) {
return tooltipItem.yLabel + " kWh";
},// remove title
title: function(tooltipItem,data) {
return;
}
}
},responsive: true,maintainAspectRatio: false,legend: {
display: false
},scales: {
xAxes: [
{
barPercentage: 1,barThickness: 10,gridLines: {
display: false,color: "rgba(0,0.1)"
}
}
],yAxes: [
{
gridLines: {
display: true,categorySpacing: 90,drawBorder: false,0.1)"
},ticks: {
beginAtZero: true,min: 0,max: 100,stepSize: 20,padding: 20
}
}
]
}
};
内部渲染
<Bar
data={data}
width={100}
height={400}
options={barChartOptions}
/>