Home Forums Chart Support Chart Data not visible until screen size is changed in React

Chart Data not visible until screen size is changed in React

Viewing 3 posts - 1 through 3 (of 3 total)
  • #43169

    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 .

    #43171

    the blow images can help

    before screen size changes :

    https://imgur.com/a/R8DXWaI

    after scree size changed :

    https://imgur.com/a/Uan16Y1

    thanks ,
    Mahdi

    #43200

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.