How do I format currency in Vega-Lite?

Question

I'm trying to format values as currency in the Vega-Lite editor. I'm attempting to copy the docs but I'm getting a weird error. The Y axis is a numerical value. Passing in a formatting string gives "value expected".

Here's the json:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Protocol Chart",
  "width": 500,
  "height": 225,
  "data": {
        "values": [
        {
            "asset": "eth",
            "time": "2021-06-15T00:00:00Z",
            "ReferenceRateUSD": "2577.04473863238"
        },
        {
            "asset": "eth",
            "time": "2021-06-16T00:00:00Z",
            "ReferenceRateUSD": "2552.74103641146"
        },
        {
            "asset": "eth",
            "time": "2021-06-17T00:00:00Z",
            "ReferenceRateUSD": "2360.99938690824"
        }
    ]
  },
  "config": {
        "view": {
            "stroke": "transparent"
        }
  },
  "mark": "line",
    "encoding": {
        "x": {
            "axis": {
                "domainColor": "#DDD",
                "grid": false, 
                "labelColor": "#AEAEAE", 
                "ticks": false, 
                "labelPadding": 10
            }, 
            "field": "time", 
            "type": "temporal", 
            "title": ""
        },
        "y": {
            "axis": {
                "labelOffset": 2,
                "domainColor": "white",
                "labelColor": "#AEAEAE", 
                "ticks": false, 
                "labelPadding": 10,
                "format": '$.2f'
            }, 
            "field": "ReferenceRateUSD", 
            "type": "quantitative", 
            "title": "", 
            "scale": {
                "zero": false
            }
        },
        "color": {
            "field": "doesntmatter", 
            "type": "nominal", 
            "legend": null,
            "scale": {
                "range": ["#91DB97"]
            }
        }
  }
}

What am I missing here? How do I get it to accept my formatting string?

user_2937831 · Answer

"$.2f" looks like a the correct d3-format string for currency, but note that this is only valid if the associated formatType is "number" (see axis label docs).

Since you did not include a full reproducible example of the problem you're seeing, I can only venture a guess that your data type is not numeric, and this is why the formatting is failing. If that's not the case, I'd suggest editing your question to provide a complete example of the error you're seeing.

Edit: your full example appears to work correctly with the current version of vega/vega-lite (view in editor):

Perhaps you need to update your vega/vega-lite libraries?

How do I format currency in Vega-Lite?

1 Answers