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;`