Chart Data not visible until screen size is changed in React

[Mahdi]

async componentDidMount() {
await this.getClubsSales();
}
async getClubsSales() {
let totalSales = 1;
let totalProducts = 0;
let clubDataOption = [];
const response = await axios({
method: ‘GET’,
url: configData.server_URI + ‘/getProductsSales’,
});
if (response.data) {
response.data.forEach((sale) => {
totalSales += Number(sale.sales);
});
totalProducts = response.data.length;
}
const clubs = await axios({
method: ‘GET’,
url: configData.server_URI + ‘/getClubs’,
});
if (clubs.data) {
clubs.data.forEach(async (club) => {
let clubSales = 1;
const clubProduct = await axios({
method: ‘GET’,
url: configData.server_URI + ‘/getProductsByclubName’,
params: {
clubName: club.clubName,
},
});
if (clubProduct.data) {
clubProduct.data.forEach(async (product) => {
clubSales += Number(product.sales);
});
}
clubDataOption.push({ y: parseFloat(clubSales / totalSales).toFixed(2), label: club.clubName.toUpperCase() });
});
}
console.log(clubDataOption);
const options = {
animationEnabled: true,
exportEnabled: true,
theme: ‘light1’, // “light1”, “dark1”, “dark2”
title: {
text: ‘Clubs Sales’,
},
data: [
{
type: ‘pie’,
indexLabel: ‘{label}: {y}%’,
startAngle: -90,
dataPoints: clubDataOption,
},
],
};
console.log(options.data[0].dataPoints);
this.setState({
clubsGraph: options,
totalProducts: totalProducts,
});
}

render{
return(
<div className=”graphDetails”>
<CanvasJSChart options={this.state.clubsGraph} />
</div>
);
}

******************
log

clubDataOption array :
[
{
“y”: “0.33”,
“label”: “ARSENAL”
},
{
“y”: “0.67”,
“label”: “BARCELONA”
},
{
“y”: “0.33”,
“label”: “REALMADRID”
},
{
“y”: “0.33”,
“label”: “MANCHESTERCITY”
},
{
“y”: “0.67”,
“label”: “LIVERPOOL”
}
]

[
{
“y”: “0.33”,
“label”: “ARSENAL”
},
{
“y”: “0.67”,
“label”: “BARCELONA”
},
{
“y”: “0.33”,
“label”: “REALMADRID”
},
{
“y”: “0.33”,
“label”: “MANCHESTERCITY”
},
{
“y”: “0.67”,
“label”: “LIVERPOOL”
}
]

Note we can to see in the logs that the data is fetched right .

[Mahdi]

the blow images can help

before screen size changes :

after scree size changed :

thanks ,
Mahdi

[Adithya Menon]

Mahdi,

The datapoint y-value can only accept numeric values as of now. Passing the y as numerical values should work fine in your case.

If you are still facing any issue, can you kindly create a sample project reproducing the issue you are facing and share it with us over Google-Drive or Onedrive along with sample data so that we can look into your code, run it locally at our end to understand the scenario better and help you out?

—
Adithya Menon
Team CanvasJS