score:5
Accepted answer
you have to control your state like below:
var app = react.createclass({
getinitialstate: function(){
return {
names: [],
isloaded: false
}
},
componentdidmount: function() {
$.get(url, function (data) {
this.setstate({
names: data,
isloaded: true
})
}.bind(this));
},
render: function() {
return(
<div>
{this.state.isloaded ? <graph names={this.state.names}/> : <div>still loading... </div> }
</div>
)
}
});
so once you get all your data you can render your chart otherwise show the loading screen. take a look at this link probably it will be helpfull for you. hope it makes sense for you.
Source: stackoverflow.com
Related Query
- React render Chart.js based on api response
- React - render Chart.js chart based on user selection, after Ajax returns JSON
- Display chart data based on API call
- React Chart.js Match API data to what Title is displaying, then update chart on data/Title change
- React js with react-chart js, does not render doughnut chart
- Can't get bar chart colors in Chart js working in React Js
- Chart js - Get bar width after render
- Drawing line chart in chart.js with json response
- React ChartJS 2 : Get data on clicking the chart
- How to dynamically set ChartJs line chart width based on dataset size?
- chart.js bar chart color change based on value
- Time Series Line chart js in react not working
- Using data from API with Chart JS
- Dynamically created Chart.js chart overpopulating time based x-axis?
- Stacked bar chart starting from 0 - ChartJS React
- React chart : prevent chart's canvas scaling with height and width
- Creating dynamic object to reorganize API response using Typescript
- react chart js skip zero value month
- Bar Chart of ChartJS does not Render
- Creating Chart.js using API data in react
- How to use segment property to color line / border color based on value in chart js?
- I am using chartjs node canvas to render a chart however the graph options are being ignored
- Cannot create chart on react element
- How to make aspecific API call from within a Line Chart class in ReactJS using react-chartjs-2?
- React chartjs-2 - Increase spacing between legend and chart
- Line Chart Js x-axis values all 0 on React
- change stroke line color in chart according to datasets in react native
- React component wont re-render ChartJS chart with redux props
- Chart doesn't render in angular 2 app
- How to sort XY line chart tooltip items based on value and add thousands separators?
More Query from same tag
- Chart js 2.8 - How to make bars grow at the same speed?
- Parse a JSON object to ChartJS
- Take image of a chart.js from canvas and display it as an image
- Chart.js scatter charts: Is there a way to indicate that datapoints of two data sets are on top of each other?
- How to disable scientific notations in logarithmic chart type
- Polar Area Chart
- Array value is not being passed to the plugin
- Unable to resolve path to module 'chartjs-plugin-stacked100'
- Formatting Data With Charts.JS
- Chartjs 2 scaling lots of data points
- How Can customize chartjs doughnut chart border and tooltip
- how to create a bar chart with php data variables
- ChartJS 3 get height of stacked vertical bar
- If a radar chart values are full it occupies half the space (Chart.js)
- ng2-charts tooltip and legend stopped working
- Where are the default colors for charts in Chart.js defined?
- How to prevent tick labels from "jumping" when drawn with ChartJS BeforeDraw
- Chartjs line chart gets all scrambled up when an x value coincides with a label
- char.js overlapping bar columns when using type: 'time'
- How do we can use chart.js in angular JS?
- using react-chartjs-2 , How can I save my chart as png using a download button
- Getting clicked object from each section of a single stack bar as my stack bar has multiple sections Chart.js
- How to noshown the scale while all datasets is hidden (chartjs)?
- Chartjs Customize Scale Numbers
- Vue-chartjs with axios for stacked bar chart
- How to implement dynamic data on chartjs?
- How to add text inside scatter plot using Chart.js?
- Can I use a custom data format when using Vue + Chartjs
- Chart.js and react-chartjs-2 property translate is missing type
- Chart JS 2.x: How to show a tooltip in a timeline chart?