score:0
you should just wait until countries is filled before trying to render anything. you can for example render barchart component only if countries array has at least one element :
[...]
{this.state.countries.length > 0 && <barchart
start={true}
data = {this.state.countries}
len = {this.state.countries[object.keys(this.state.countries)[0]].length}
keys = {object.keys(this.state.countries)}
timeout={400}
delay={100}
colors = {object.keys(this.state.countries).reduce((res, item) => ({
...res,
...{ [item]: randomcolor() }
}), {})}
labels = {object.keys(this.state.countries).reduce((res, item, idx) => {
return{
...res,
...{[item]: (
<div style={{textalign:"center",}}>
<div>{item}</div>
</div>
)}
}}, {})}
timeline = {array(20).fill(0).map((itm, idx) => idx + 1)}
timelinestyle={{
textalign: "center",
fontsize: "50px",
color: "rgb(148, 148, 148)",
marginbottom: "100px"
}}
textboxstyle={{
textalign: "right",
color: "rgb(133, 131, 131)",
fontsize: "30px",
}}
barstyle={{
height: "60px",
margintop: "10px",
borderradius: "10px",
}}
width={[15, 75, 10]}
maxitems = {this.state.countries.length}
/>}
{this.state.countries.length === 0 && <span>loading...</span>}
[...]
note the conditional rendering syntax.
score:1
i found an issue on your code like in len
property of the barchart
that gets the error cannot read property 'length' of undefined. after i used null checking with question mark, i am not getting any error but printing 1 to 20. i am not sure it helps you or not. may be after changing that, you will get it solved.
len={this.state.countries[object.keys(this.state.countries)[0]].length}
replaced by
len={this.state.countries[object.keys(this.state.countries)[0]]?.length}
Source: stackoverflow.com
Related Query
- Plot bar graph in reactjs
- Destroy chart.js bar graph to redraw other graph in same <canvas>
- Chart.js - Plot line graph with X , Y coordinates
- Chart.js Bar graph with percentage values
- plot a bar chart.js time series
- line graph spot in the top middle of the bar graph
- Chart.js Bar graph will not start at zero as minimum value
- Updating chart.js bar graph in real time
- Create a rounded bar graph with Angular and chartJS
- Gradient color for each bar in a bar graph using ChartJS
- Last value not showing in bar graph of charts.js-library
- Chart.js with dual axis on bar and line graph
- Chart.js - Plot line graph with X , Y coordinates and connected by line
- How to make customized stepSize for each horizontal bar in Chart.js graph
- Vertical spacing in horizontal ChartJS Bar Graph
- Chart.js Ionic 2 Angular2: Background color of bar graph not changing
- how to change color of bar if its goes above avg score in mixed graph chart.js
- How to Create Chart.JS Bar Graph with Min, Max & Average
- How to access or get value of specific graph on chart plot by click event?
- Chart js space above bar graph
- Calling data from search bar to chart.js graph in Angular
- Some bars of the bar graph are disappearing from Chart.js
- How do you plot scatter graph with chart.js
- How to set the chartjs bar graph scale to the highest value in the result data
- Display Bar chart values in the graph - ChartJS
- How to create a bar and a line in a same graph using chart.js in React?
- Issue with chartjs linear gradient for the mixed bar chart in ReactJS is not calculated for each individual Bars
- I want to change color of individual bar of bar graph
- Sorting the Bars in Chart.JS Bar Graph
- How to add horizontal scroll to a bar graph in chartjs?
More Query from same tag
- Angular chart.js chart scale
- Chart JS prepend labels to x-axis with addData
- Chartjs v2 xAxes label overlap with scaleLabel
- Chart.JS customization - how to debug?
- HTML Input Form to a Javascript Variable
- How to add border in chartjs?
- Using map reduce in javascript
- ChartJS - Customize Ticks/Labels on Y Axis
- Chart.js doesn't show anything
- Getting "TypeError: document.getElementById(...) is null" when using react.js with chart.js
- Inserting and Fetching values from mongodb using nodejs and chartjs
- Chart.js zoom plugin: Unexpected identifier error in console
- how labels in chartjs can make data invisible
- How can I automatically wrap tooltip text content to multiple lines?
- chartjs Adding percentages to Pie Chart Legend
- How to make `fillColor` as gradient in chart.js?
- Bars centered between the grid lines with the label below the grid lines (chart.js)
- Chart Js flickering or switching as i move mouse on canvas
- Android: WebView with JavaScript for Chart.js not working properly
- How to decrease bottom width of triangle using line chart in chartJs?
- how to integrate the Material UI slider with chart js
- 2 Line Chart with different labels | Chart.js
- How to change colors in react charts
- Switch chart.js data with button click
- Unable to Construct Stacked Vue-ChartJS Line Plot
- Draw chart.js with data from server
- How to save in chart original ID of element in array that is used to build chart data labels?
- ChartDataLabels is globally active for some reason
- How to load page containing Chart.js using jQuery
- Chart.js showing old chart on hover