How to make it work on ReactJS ?

[phhoffmann]

Hey guys

I'm trying to use ChartFunnel on a project using ReactJS. I've tried using some things that i saw in this issue but unfortunatelly didn't have much success.
The console doesn't show any errors, but the chart doesn't render.
Does anyone achieved something with React and ChartFunnel ?

Thanks for the help :)

[dcworldwide]

Figure it out?

[phhoffmann]

unfortunatelly, no. the team decided to use amcharts instead

[SirPhemmiey]

Any update on this please?

[JekRock]

I've made the example from here work by just importing the charts.funnel.js
The component example that makes the same chart as in the readme in a React component

import React, { Component } from "react";
import Chart from 'chart.js';
import * as funnel from 'chartjs-funnel'

export default class FunnelChart extends Component{
    chartRef = React.createRef();
    
    componentDidMount() {
        const myChartRef = this.chartRef.current.getContext("2d");
        
        new Chart(myChartRef, {
            type: 'funnel',
    data: {
        datasets: [{
            data: [30, 60, 90],
            backgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ]
        }],
        labels: [
            "Red",
            "Blue",
            "Yellow"
        ]	
    },
            options: {
                //Customize chart options
            }
        });
    }
    render() {
        return (
                <canvas
                    id="myChart"
                    ref={this.chartRef}
                />
        )
    }
}

[mirajhad]

Instead of importing from chart.js use chartjs-funnel/dist/chart.funnel.bundled

`import React from 'react';
import Chart from 'chartjs-funnel/dist/chart.funnel.bundled';

var config = {
type: 'funnel',
sort:'asc',
data: {
datasets: [{
data: [100, 80, 75, 50, 40, 30],
backgroundColor: [
"#E33716",
"#F7940D",
"#029DE3",
"#339037",
"#204CB7"
],
hoverBackgroundColor: [
"#E33716",
"#F7940D",
"#029DE3",
"#339037",
"#204CB7"
]
}],
labels: [
"100%",
"80%",
"75%",
"50%",
"40%",
"30%"
]
},
options: {
sort: 'desc',
}
}

class FunnelChart extends React.Component {
constructor(props) {
super(props);
this.chartRef = React.createRef();
}

componentDidMount(){
    this.myChart = new Chart(this.chartRef.current, config);
}

render() {
    return(
    <>
    <canvas ref={this.chartRef}/>
    </>
    );
}

}
export default FunnelChart;`