I'm facing a situation here, including React use coupled with the additionnal plugin from the chart.js library : chartjs-plugin-waterfall.
I have to develop a personalised dashboard for my client, and until now I've been able to implement every type of charts needed with the library chartjs and its react components : react-chartjs-2.
But I'm now struggling for hours with the last one I have to implement -and which is not available as a "react-chart component"- : the Waterfall chart. For this I decided to add chartjs-plugin-waterfall and to implement it as a new Chart (here a code sample) :
const WaterFallType = () => {
let chart = false
useEffect(() => {
if(chart instanceof Chart) {
chart.destroy();
}
let ctx = document.getElementById("myChart").getContext('2d')
chart = new Chart(ctx, {
type: "bar",
plugins: [waterFallPlugin],
data :{
datasets: [
{
label: 'Closing Costs',
data: [50],
backgroundColor: '#e8cdd7',
stack: 'stack 1',
},
{
label: 'Purchase Price',
data: [700],
backgroundColor: '#d29baf',
stack: 'stack 1',
},
{
data: [200],
waterfall: {
dummyStack: true,
},
stack: 'stack 2',
},
{
label: 'Opening Loan Balance',
data: [550],
backgroundColor: '#bb6987',
stack: 'stack 2',
},
{
label: 'Initial Cash Investment',
data: [200],
backgroundColor: '#a53860',
stack: 'stack 3',
},
],
},
options: {
plugins: {
waterFallPlugin: {
stepLines: {
enabled: true,
startColorStop: 0,
endColorStop: 0.6,
startColor: 'rgba(0, 0, 0, 0.55)',
endColor: 'rgba(0, 0, 0, 0)',
diagonalStepLines: true,
},
},
},
}
})
}, [chart])
return <div>
<canvas id="myChart" width="400px" height="400px"></canvas>
</div>
}
export default WaterFallType
Unfortunatly This code does not render the component, instead it throws me several errors :
First one : "Uncaught Error: Canvas is already in use. Chart with ID '2' must be destroyed before the canvas can be reused."
Second one : "Uncaught TypeError: Cannot set properties of undefined (setting 'filter')"
Could anyone help me with this battle? Thank you very much for your help.
Benjamin
