score:1
Accepted answer
it doesn't work because there are no further state updates after you assign the ref to the canvas
; that means no more re-renderings (calls to render method) so you never get to execute this.chart()
. instead of calling that last method in render, add it to the setstate
callback in fakeapicall
:
this.setstate({
data: [1,2,3],
labels: ['a', 'b', 'c']
}, () => this.chart());
the callback will be executed once setstate
is completed and the component is re-rendered. you can read more about state callbacks here.
Source: stackoverflow.com
Related Query
- Accessing conditionally rendered canvas element in React for plotting
- How to clear/destroy Chart.js canvas when the chart is represented as a react JSX element
- React render function preventing creating new canvas element on each time invoked - Charts.js
- Resize chart.js canvas for printing
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- (Vue, ChartJS) Create gradient background for chart from child component canvas context
- Deleting and recreating an element with React
- react-chart-js-2 in combination with TypeScript for LineCharts: Uncaught Error: "point" is not a registered element
- React chart : prevent chart's canvas scaling with height and width
- Cannot create chart on react element
- Chart.js - PieChart defined background color for specific dataset element
- Execute script after loading server side rendered React component
- Change locale for Chart.js in React
- Reusable react component with Canvas doesn't render canvas with its props
- How to set X coordinate for each bar with react chart js 2?
- How to write better code in es6 for formatting an object with array values
- React with chart js, labelling problems in multiple datasets for doughnut chart
- convert csv to json for javascript plotting library chartjs in Python or PHP
- <Canvas is already in use. Chart with ID '18' must be destroyed before the canvas can be reused> in react
- Resize Chart Independently From Legend in ChartJS for Canvas Download
- Problem with script src for Chart.js. The CDN for Chart.js funtions fine, so my code is ok. Somehow I'm not linking the file correctly
- Cannot read property 'length' of undefined for ChartJS when I use it inside React
- HorizontalBar chart is displayed below canvas when I set height with style attribute for chart div (Chart.js 2.9.4)
- native element not defined when ngSwitch condition in canvas element
- How to print a chart rendered by code
- JSX element type 'Line' is not a constructor function for JSX elements
- dynamically add canvas for chart.js
- Html canvas element resets width and height to zero after drag/drop
- attempting to change height and width of canvas for chart
- React Chart.js onClick for custom legends
More Query from same tag
- how to Highlight clicked Doughnut section or portion in chart.js?
- ng2-charts doughnut chart with different data per series
- Replace a Canvas Pie Chart Onclick
- Two chartjs charts on page throwing data undefined error
- Chartjs isn't rendering bar chart, even though chart variable shows correctly when console logged
- Module not found: Can't resolve 'chart.js/auto
- Chart.js Timeseries chart - formatting and missing data values
- How to make Chart.js with dynamic months on x-axis
- Same bar different color / One bar with many colors
- How to set Json data to chart.js bar
- Different gridline steps on chart js line chart
- Django and Chart.js: Line-Chart with multiple Datasets
- Inner Radius is not changed in Chart.js (Doughnut Chart)
- How to display data labels outside in pie chart with lines in ionic
- ChartJS Update specific bar's background colour
- ChartJs + ie11 doesn't work
- Given point in tooltiptext
- Point unselection in ChartJS
- react-chartjs integration error. Cannot read property 'xLabels' of undefined
- Add Labels to Chart.js Bar Chart
- Remove Decimal values in Yaxis Linechart -Primefaces
- Highlight background on a single hour with chart.js and annotations
- Hide x-axis labels but show tooltips in chart.js
- Displaying JSON data in Chartjs
- Chart.js how to highlight a part of a label
- How to pass a variable to the dataset for a graph in chart.js?
- React-chart does not render the legend for PIE chart
- Chart.js in a Vue page throws error: do not mutate vuex store state outside mutation handlers
- Adding item to TooltipItems[] in ChartJS doesn't update labelColors
- Can't get bar chart colors in Chart js working in React Js