Fixing the issue with graphs when response is 0

Question

I am passing the data from API to my graph component.

 <div className="col-lg-sm-md-xs-9" style={styles.graphs}>
                        {this.renderGraphComponent(this.state.graphType, { graphData: n.question_options, responseData: n.total_no_of_question_response})}
                    </div>

I am mapping the response in my graph component and displaying the data.

const data=props.graphData.map((data)=>{
  return {name:data.label,uv:((data.no_of_response)/(props.responseData)*100),response:data.no_of_response}
});
  
const CustomizedAxisTick =(props)=>{
  const {x, y, payload} = props;
   return (
    <Text x={x} y={y} width={75} fontSize={12} textAnchor="middle" verticalAnchor="start">{ ((payload.value).length > 30) ? (((payload.value).substring(0,30-3)) + '...') : 
      payload.value }  
    </Text>
      )
};

App is crashing if all the responses are 0. How to fix this.

Answer 1

const data=props.graphData.map((data)=>{
  let graphkey=((data.no_of_response)/(props.responseData)*100)
  **return {name:data.label,**uv:+graphkey** || 0,response:data.no_of_response}**
});
  

Checking for NAN condition solved the issue.