yValueFormatString – stackedBar100

• January 30, 2023 at 11:00 pm #42068
  
  ANDREW DANIELS

  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>
  );
  }

  January 31, 2023 at 6:45 pm #42086
  
  Adithya Menon

  @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