CODEWITHSUNDEEP
javascriptvega
rohan
rohan

Reputation: 13

how do i get the rupee symbol on the Y axis of the vega charts, i m getting the doller($) symbol through format but not getting rupee symbol

how do i get the rupee symbol on the Y axis of the vega charts, i m getting the doller($) symbol through format but not getting rupee symbol
  "axes": [
    {
      "orient": "bottom",
      "scale": "x",
      "labelAngle": -90,
      "labelPadding": 29,
      "format": "Q%q %Y",
      "ticks": true,
      "tickCount": "month",
      "labelFontSize": 11
    },
    {"orient": "left", "scale": "y", "tickCount": 5,"format": "$,f"}
  ],

"format": "$,f"

how do i get the rupee symbol on the Y axis of the vega charts, i m getting the doller($) symbol through format but not getting rupee symbol

Upvotes: 1

Views: 198

Answers (3)

Roy Ing
Roy Ing

Reputation: 797

One way to format numbers in lakh format including the Rupee symbol is to define a custom Vega expression function in javascript using either Intl.NumberFormat or Number.toLocaleString.

For example:

 vega.expressionFunction("formatLakh", (num) => new Intl.NumberFormat('en-IN', {style: "currency", currency: "INR", maximumFractionDigits: 2}).format(num));

or

vega.expressionFunction("formatLakh", (num) => Number(num).toLocaleString('en-IN', {style: "currency", currency: "INR", maximumFractionDigits: 2}));

In Vega, call this function within Vega expression, e.g.

{"signal": "'Category ' + formatLakh(12345678.9555)"}

and the (rounded) number will be displayed as: ₹1,23,45,678.96

Upvotes: 0

Roy Ing
Roy Ing

Reputation: 797

You can create custom label strings for Vega axis labels, see: https://vega.github.io/vega/docs/axes/

The Indian Rupee Sign is represented by the Unicode Character U+20B9, or "\\u20B9" within Vega spec.

Here is an example of the Vega bar chart with Rupee symbol on Y-axis labels.

View in Vega online editor

enter image description here

"axes": [
    { "orient": "bottom", "scale": "xscale" },

    { "orient": "left", 
      "scale": "yscale",
      "encode": {
        "labels": {
          "update": {
            "text": {"signal": "'\\u20B9 ' + format(datum.value, '.2f')"},
            "fill": {"value": "steelblue"},
            "angle": {"value": 0},
            "fontSize": {"value": 12},
            "align": {"value": "right"},
            "baseline": {"value": "middle"},
            "dx": {"value": -5}
          }
        }
      }
    }

  ],

Upvotes: 1

davidebacci
davidebacci

Reputation: 30304

You need to provide a locale configuration to the locale object. You can read how here: https://vega.github.io/vega/docs/api/locale/

Upvotes: 0

Related Questions