Всплывающие подсказки работали раньше, и теперь, когда я возвращаюсь к этой функции, всплывающие подсказки больше не отображаются / работают. Я попытался изменить исходную карту в веб-пакете, z-index диаграммы и закомментировать различные части параметров всплывающей подсказки, но безрезультатно. Любая помощь будет принята с благодарностью!
BurndownGraph.jsx
import React, { Component } from 'react';
import Chart from 'chart.js';
import { formatDollarsToK } from '../../../utils/formatter';
class BurndownGraph extends Component {
constructor (props) {
super(props);
this.chartRef = React.createRef();
this.state = {
data: [],
labels: []
};
}
componentDidMount() {
const myChartRef = this.chartRef.current.getContext("2d");
new Chart(myChartRef, {
type: "line",
data: {
// TODO Bring in data from backend endpoint
labels: ["Jan '20", "Jan '21", "Nov '22", "Jan '23", "Jan '24"],
datasets: [
{
label: "With Contribution",
data: [35000, 30000, 20000, 0, 0],
backgroundColor: "#326295",
pointRadius: 5,
pointBackgroundColor: 'white',
pointBorderColor: '#326295'
},
{
label: "Without Contribution",
data: [35000, 32500, 30000, 20000, 0],
pointRadius: 5,
pointBackgroundColor: 'white'
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
callback: formatDollarsToK,
stepSize: 10000,
},
scaleLabel: {
display: true,
labelString: 'Remaining Balance',
fontColor: '#00263e',
fontSize: 18,
fontFamily: 'CircularStd-Medium',
},
},
],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Length of Loan',
fontColor: '#00263e',
fontSize: 18,
fontFamily: 'CircularStd-Medium'
},
gridLines: {
color: 'transparent'
}
}]
},
legend: {
position: 'bottom',
labels: {
fontColor: '#00263e',
fontSize: 18,
fontFamily: 'CircularStd-Medium',
boxRadius: '25%'
}
},
tooltips: {
titleFontFamily: 'CircularStd-Medium',
bodyFontFamily: 'CircularStd-Medium',
enabled: true,
callbacks: {
labelColor: function(tooltipItem, chart) {
if (tooltipItem.datasetIndex === 0) {
return {
backgroundColor: '#326295'
};
} else {
return {
backgroundColor: 'rgba(0, 0, 0, 0.1)'
};
}
}
}
}
}
});
}
render() {
return (
<div className='chart'>
<canvas
id="myChart"
ref={this.chartRef}
/>
</div>
)
}
};