Use Chartjs with reactjs

Question

I want to use ReadtFauxDom with chartJS, but the chartJS doesn't render anything(FauxDom is empty), I think this pb is due to the fact that ReactFauxDOM.element('canvas').getContext('2d') doesn't existe What do you think ? (if that true, how can i create a dom and use it to generates my charts)

here the code:

var Chart = require('chart.js'); class BarReact extends React.Component { constructor() { super() } componentWillMount() { var ctx = new ReactFauxDOM.Element('canvas'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } }); this.setState({ chart: ctx }) } render() { return ( {this.state.chart.toReact()} ) } }

NB: I'm using "chart.js": "^2.5.0", "react-faux-dom": "^3.0.1"

Alex S · Accepted Answer · 2018-10-30 08:36:43Z

Also You can use React.createRef() from React16

class Chart extends Component { constructor(props) { super(props); this.chartRef = React.createRef(); } componentDidMount() { const ctx = this.chartRef.current.getContext('2d'); new ChartJS(ctx, options); // eslint-disable-line no-new } render() { return ( <canvas ref={this.chartRef} /> </div> ); } }

I think this is the right answer and I've upvoted but I use new Chart(this.chartRef.current, options) - I don't know what ChartJS is and I've not needed .getContext('2d'). This helped me because I forgot .current so thanks

Quince · Accepted Answer · 2017-04-16 16:55:48Z

Not sure if this is helpful (not used react-faux-dom) but I do the following; render a canvas element using react then when the component mounts use that moment to create the graph

import React from 'react'; import Chart from 'chart.js'; import ReactDOM from 'react-dom'; class ChartComponent extends React.Component { componentDidMount() { this.initializeChart(this.props.config); } initializeChart(options) { let el = ReactDOM.findDOMNode(this.refs.chart); let ctx = el.getContext("2d"); let chart = new Chart(ctx, options); } render() { return (<canvas ref="chart" height="400px" />); } } export default ChartComponent;

Geet Kalani · Accepted Answer · 2020-05-08 05:02:59Z

import React,{Component} from 'react'; import Chart from "chart.js";   class GraphChart extends Component { constructor(props) { super(props); this.myRef = React.createRef();  }  componentDidMount() { const ctx = this.ctx; new Chart(ctx, { type: "bar", data: { labels: ["Red", "Blue", "Yellow"], datasets: [ { label: "# of Likes", data: [12, 19, 3], backgroundColor: [ "rgba(255, 99, 132, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(255, 206, 86, 0.2)" ] }, { label: "# of Likes", data: [-12, -19, -3], backgroundColor: [ "rgba(255, 99, 132, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(255, 206, 86, 0.2)" ] } ] } }); } render() { return ( <div> <canvas width='800' height='300' ref={ctx => (this.ctx = ctx)}/> </div> ) } } export default GraphChart;

Collectives™ on Stack Overflow

Use Chartjs with reactjs

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related