Home Forums Chart Support yValueFormatString – stackedBar100

yValueFormatString – stackedBar100

Viewing 2 posts - 1 through 2 (of 2 total)
  • #42068

    Hi,

    I have an issue where an API returns percentages for the stacked bar chart to work with to 2 decimal places. However, using the formatter yValueFormatString: “#,###’%'” this formats as a whole number. The issue is that the chart then is showing the wrong percentages with some columns adding up to more than 100 and others less. The figures are correct if 2 decimal places were to be used.

    How can I use yValueFormatString to format to 2 decimal places?

    /* App.js */
    import React, { useEffect, useState } from “react”;
    import CanvasJSReact from “canvasjs.react.js”;
    import getReportSummary from “../libs/getSummary”;
    var CanvasJSChart = CanvasJSReact.CanvasJSChart;

    export default function SummaryReport() {
    const [options, setOptions] = useState({});
    const [response, setResponse] = useState({});

    // const containerProps = {
    // height: “calc(100vh – 150px)”
    // };

    useEffect(() => {
    async function getData() {
    debugger;
    const data = await getReportSummary(0);
    debugger;
    setResponse(data);
    console.log(response);

    debugger;

    const options = {
    title: {
    text: “Players In Switchlist”
    },
    toolTip: {
    shared: true
    },
    legend: {
    verticalAlign: “top”
    },
    axisY: {
    suffix: “%”,
    // interval: 10
    },
    data: [{
    type: “stackedBar100”,
    color: “#9bbb59”,
    name: data.Data.Data[0].Name,
    showInLegend: true,
    indexLabel: “{y}”,
    indexLabelFontColor: “white”,
    yValueFormatString: “#,###’%'”,
    dataPoints: data.Data.Data[0].DataPoints
    },{
    type: “stackedBar100”,
    color: “#E9967A”,
    name: data.Data.Data[1].Name,
    showInLegend: true,
    indexLabel: “{y}”,
    indexLabelFontColor: “white”,
    yValueFormatString: “#,###’%'”,
    dataPoints: data.Data.Data[1].DataPoints
    },
    {
    type: “stackedBar100”,
    color: “#FFBF00”,
    name: data.Data.Data[2].Name,
    showInLegend: true,
    indexLabel: “{y}”,
    indexLabelFontColor: “white”,
    yValueFormatString: “#,###’%'”,
    dataPoints: data.Data.Data[2].DataPoints
    },
    {
    type: “stackedBar100”,
    color: “#6495ED”,
    name: data.Data.Data[3].Name,
    showInLegend: true,
    indexLabel: “{y}”,
    indexLabelFontColor: “white”,
    yValueFormatString: “#,###’%'”,
    dataPoints: data.Data.Data[3].DataPoints
    },
    {
    type: “stackedBar100”,
    color: “#9FE2BF”,
    name: data.Data.Data[4].Name,
    showInLegend: true,
    indexLabel: “{y}”,
    indexLabelFontColor: “white”,
    yValueFormatString: “#,###’%'”,
    dataPoints: data.Data.Data[4].DataPoints
    },
    {
    type: “stackedBar100”,
    color: “#E7E97A”,
    name: data.Data.Data[5].Name,
    showInLegend: true,
    indexLabel: “{y}”,
    indexLabelFontColor: “white”,
    yValueFormatString: “#,###’%'”,
    dataPoints: data.Data.Data[5].DataPoints
    }]
    };

    setOptions(options);
    }
    getData();
    }, []);

    return (
    <div>
    <CanvasJSChart options={options} />
    {/*You can get reference to the chart instance as shown above using onRef. This allows you to access all chart properties and methods*/}
    </div>
    );
    }

    #42086

    @sharp-gaming,

    To format the y-values to 2 decimal places, you can set the yValueFormatString property to #,##0.00%. For more information on the supported formats, kindly refer to this documentation page.


    Adithya Menon
    Team CanvasJS

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

You must be logged in to reply to this topic.