d3-funnel | JavaScript library for rendering funnel charts | Chart library

import React , {useRef , useEffect} from 'react';
import D3Funnel from 'd3-funnel';

function RecruitmentFunnel() {

    useEffect(() => {
        

    var data = [
        ['Applicants', 267 , '#1e4684', '#1e4684'],
        ['Interviews', 134,  '#1e4684'],
        ['Assessments', 48,  '#1e4684'],
        ['Hired',26,  '#1e4684']
    ];

    var options = {
        width : 200,
        height : 400,
        bottomWidth : 1/2,
        bottomPinch : 0,      // How many sections to pinch
        isCurved : true,     // Whether the funnel is curved
        curveHeight : 10,     // The curvature amount
        fillType : "gradient",   // Either "solid" or "gradient"
        isInverted : false,   // Whether the funnel is inverted
        hoverEffects : true,  // Whether the funnel has effects on hover
        fontSize : '18px'
    };

    var funnel = new D3Funnel( data, options );
    funnel.draw ( "#funnel" );
    
    },[])

    return ;
}

export default RecruitmentFunnel;