CanvasJS React Component allows you to customize and change the look and functionality of the graph. Below example shows one such customization where neck-width of funnel is customized. It also includes react source code that you can try running locally.
/* App.js */ import React, { Component } from 'react'; import CanvasJSReact from '@canvasjs/react-charts'; //var CanvasJSReact = require('@canvasjs/react-charts'); var CanvasJS = CanvasJSReact.CanvasJS; var CanvasJSChart = CanvasJSReact.CanvasJSChart; class App extends Component { render() { var dataPoint; var total; const options = { theme: "dark2", animationEnabled: true, title:{ text: "Recruitment Analysis - July 2016" }, data: [{ type: "funnel", indexLabel: "{label} - {y}", toolTipContent: "<b>{label}</b>: {y} <b>({percentage}%)</b>", neckWidth: 20, neckHeight: 0, valueRepresents: "area", dataPoints: [ { y: 265, label: "Applications" }, { y: 134, label: "Interviewed" }, { y: 48, label: "Assessment" }, { y: 26, label: "Hired" } ] }] } //calculate percentage dataPoint = options.data[0].dataPoints; total = dataPoint[0].y; for(var i = 0; i < dataPoint.length; i++) { if(i == 0) { options.data[0].dataPoints[i].percentage = 100; } else { options.data[0].dataPoints[i].percentage = ((dataPoint[i].y / total) * 100).toFixed(2); } } return ( <div> <CanvasJSChart options = {options} onRef={ref => this.chart = ref} /> {/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/} </div> ); } } export default App;
The above funnel chart is customized by setting it's neck height to zero. The other customizations available are neckWidth, fillOpacity etc.