Is there a way to format the number on a legend scale (Fusion Charts Map)

129 views Asked by At

I have a Fusion Map with some really large values; my map shows summary of deposits data for different states, e.g. 'new york' has a value of almost $3 Trillion USD.

On the legend scale (or legend range), I have it set from $0 to $3 Trillion. However, it's not formatting the value how I need it to; basiucally, I've been asked to have it formatted as $3,000B (right now it's formatted as $3,000,0000M).

Is there a way to format the legend range on a Fusion Chart? I added my chart configs and image, for reference. Also, I checked this link for more information (https://www.fusioncharts.com/dev/map-guide/colouring-based-on-data-range)

enter image description here

  const colorrange = {
    minvalue: 0,
    startlabel: "Low",
    endlabel: "High",
    code: "#FFFFA2",
    gradient: "1",
    color: [
      {
        maxvalue: 1000000000000,
        code: "#ED4630",
        displayValue: "Median",
      },
      {
        maxvalue: 3000000000000,
        code: "#B2D1FD",
      },
    ],
  };

  const usaMapChartProps = {
    id: "usa-map-container",
    type: "maps/usa",
    width: "700",
    height: "550",
    dataFormat: "JSON",
    dataSource: {
      chart: {
        caption: "Concentration of Deposits",
        subcaption: "Rollover a state for more information",
        entityfillhovercolor: "#EEEEEE",
        showlabels: "1",
        borderthickness: "0.4",
        theme: "fusion",
        basefontcolor: "#013a5d",
        entitytooltext: "<b>$lname</b>",
      },
      colorrange: colorrange,
      data: mapData,
    },
}


2

There are 2 answers

0
cluis92 On

For anyone interested in my findings, this documentation led to my answer https://www.fusioncharts.com/dev/chart-guide/chart-configurations/number-format

0
Aman Saraswat On

You have to explicitly modify the number scaling to add billions. The attributes numberScaleValue and numberScaleUnit are responsible for the numer formatting on the scale.

 {
  "chart": {
    "numberScaleValue": "1000,1000,1000",
    "numberScaleUnit": "K,M,B"
  }
}

To know more about this feature please refer - https://www.fusioncharts.com/dev/chart-guide/chart-configurations/number-format#add-billions-to-default-scaling

Here is a demo - https://jsfiddle.net/yg7avpsn/