Open phhoffmann opened 4 years ago
Figure it out?
unfortunatelly, no. the team decided to use amcharts instead
Any update on this please?
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}
/>
)
}
}
`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;`
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 :)