score:2
in react, you want to change the view every time the props or state change. if you're using a dom manipulation library, such as chart.js, this is where the react lifecycle methods come in handy.
https://facebook.github.io/react/docs/component-specs.html
you can use componentwillupdate
or componentdidupdate
(depending on what suits) to compare the next state to the previous state.
componentwillupdate(nextprops, nextstate) {
/* optionally include logic comparing nextprops or nextstate
* to this.props or this.state
*/
this.linechart.clear();
}
just make sure that it's props/state changes that drive the changes in the chart.
i don't know much about this apparent chart.js bug. but if you do need to re-render the canvas element each time, i would suggest placing a key
attribute on the canvas element.
<canvas key={this.uniquekey()} id="linechart" width="688" height="286"></canvas>
quite what this.uniquekey()
produces hard to say. but it needs to be different every time the props or state change. and only resort this if simpler methods like chart#clear()
(or possibly chart#destroy()
) fail.
score:0
try this -
var linechart = react.createclass({
render: function() {
return (
<div id="lineholder" classname="graphholder">
<h2 classname="sectionheader">earnings per day</h2>
<canvas ref="linechart" key={this.state.canvasupdatetoggle} width="688" height="286"></canvas>
</div>
);
},
ctx: {},
linechart: {},
getinitialstate:function(){
return {canvasupdatetoggle:"0"};
},
componentdidmount: function() {
this.drawchart();
},
componentdidupdate: function() {
this.drawchart();
},
componentwillreceiveprops:function(){
var canvasupdatetoggle = this.state.canvasupdatetoggle == 0? 1: 0;
this.setstate({"canvasupdatetoggle":canvasupdatetoggle});
},
drawchart: function() {
var linedata = {
labels: this.props.dates,
datasets: [{
label: "earnings",
fillcolor: "rgba(151,187,205,0.2)",
strokecolor: "rgba(151,187,205,1)",
pointcolor: "rgba(151,187,205,1)",
pointstrokecolor: "#fff",
pointhighlightfill: "#fff",
pointhighlightstroke: "rgba(151,187,205,1)",
data: this.props.earnings,
}]
}
this.ctx = this.refs.linechart.getcontext("2d");
this.linechart = new chart(this.ctx).line(linedata);
}
});
Source: stackoverflow.com
Related Query
- Deleting and recreating an element with React
- React chart : prevent chart's canvas scaling with height and width
- Graph streaming real-time data with react and chartjs
- Styling background (fill) with ChartJs and React
- Trying to export chart with Chartjs and React but getting erorr
- Streaming Real-time data with react and chartjs-plugin-streaming paused
- Getting TypeError: (intermediate value).Bar is not a function with react and chart.js
- load a graph with chart.js and react
- React and chart.js with json
- Testing Chart.js Plugin with React and Jest/Enzyme
- Charts.js Formatting Y Axis with both Currency and Thousands Separator
- Draw a Chart.js with ajax data and responsive. A few problems and questions
- react-chartjs-2 with chartJs 3: Error "arc" is not a registered element
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Chart.js 2.0 Formatting Y Axis with Currency and Thousands Separator
- Using Charts.js with react
- Chart.js Doughnut with rounded edges and text centered
- Styling Bars and Lines with Chart.js
- Chart.js Mixed Bar and Line chart with different scales
- Problem for display a chart with Chart.js and Angular
- Style X and Y Axis (tick mark) with Chart.js?
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Usage of ChartJS v3 with TypeScript and Webpack
- Chart.js with React
- Create a rounded bar graph with Angular and chartJS
- how to get React chartjs to resize back down with window
- Chart.js with dual axis on bar and line graph
- Displaying mixed types of legends (bar and lines) with Chartjs
- Data with pair X and Y values
- Can we draw a Line Chart with both solid and dotted line in it?
More Query from same tag
- how to show X and Y labels on points in Chart js 2 Line Chart
- Expression in data attribute for angular chart.js
- TypeScript issue with custom plugin and afterDraw callback Chart.js and react-chartjs-2
- React + ChartJS V3: Annoations don't work
- Gradient line chart with ChartJS
- chartjs output data in month week and day
- Chart.js v3.2 Change Radar background shape from Polygonal-Triangle to Circular
- How to change fonts and axis labels for Chart.js image rendering with QuickChart?
- how to display text information on hover in chart js?
- Type can not be assigned in react-chartjs-2
- specify bar width for a single bar
- why isnt vue-chartjs receiving data from api?
- first and last value is not displaying in chart.js used with django
- Chart.js Graph Overrunning Container
- ReferenceError: Chart is not defined - chartjs
- Render pie chart datasets out of 100% -- Chart.JS
- Chart.js - Hover labels to display data for all data points on x-axis
- Is it possible to change pointStyle for elements of a ChartJS bubble chart per dataset?
- How to filter react-chartjs-2
- ChartJS with dates on the X axis not displaying any graph
- Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused. chat.JS
- How can I load multiple Chartjs charts with different data on the same page?
- plugins.legend.align are incompatible types typescript chartjs
- How to convert a bar legend to line legend in chart.js 2.7.2?
- web page doesn't display chart or any error
- Chart point hover error
- Chart.js Doughnut with rounded edges and text centered
- How do I make the y-axis intersect the x-axis at 0 in chart.js
- How to make label always visible on DoughnutChart.js
- Chartjs tooltip anchor point position on bar charts