Custom formatting for Axis Ticks

500 views
Skip to first unread message

Cody Robinson

unread,
Apr 7, 2017, 8:02:03 PM4/7/17
to vega-js
I'm using https://vega.github.io/vega-editor/?mode=vega as an example here. What I need to do is custom format what the axis labels values are to show something like 10pp (pp standing for percentage points). Is there a possible way of doing this within Vega?

Thanks!

Roy I

unread,
Apr 8, 2017, 8:36:23 AM4/8/17
to vega-js

Cody Robinson

unread,
Apr 14, 2017, 1:14:27 PM4/14/17
to vega-js
Thanks Roy, but I'd really rather not have to per define all the ticks like that as I am quite often updating the data on the visual at runtime meaning that I have to maintain more data sets. I was hoping that Vega would provide a tempting system similar to how d3 offers formatting functions

function(d) { return "$" + d3.format(",.2f")(d); }

If none existing in the current library I may look at modifying it to support this workflow.

Roy I

unread,
Apr 14, 2017, 6:21:46 PM4/14/17
to vega-js
Vega 2.6 can have axis tick labels formatted using d3.js v3 functions.  See "Custom Axis Styles":

Vega 2.6 spec (from example above)
----------------
...
"axes": [
   {
     "type": "x",
     "scale": "x",
     "title": "X-Axis",
     "properties": {
       "ticks": {
         "stroke": {"value": "steelblue"}
       },
       "majorTicks": {
         "strokeWidth": {"value": 2}
       },
       "labels": {
         "text": {"template": "{{ datum.data | number: '+,' }}" },
         "fill": {"value": "steelblue"},
         "angle": {"value": 50},
         "fontSize": {"value": 14},
         "align": {"value": "left"},
         "baseline": {"value": "middle"},
         "dx": {"value": 3}
       },
       "title": {
         "fontSize": {"value": 16}
       },
...

Here is an example of a modified version of example "driving":


Vega 3.0 beta can do the same using d3.js v4 but the syntax is a bit different.






On Friday, April 7, 2017 at 8:02:03 PM UTC-4, Cody Robinson wrote:

Cody Robinson

unread,
Apr 14, 2017, 7:31:30 PM4/14/17
to vega-js
Exactly what I was looking for, I didn't quite understand the example they gave in Custom Axis Styles but your example makes it much clear!

Thanks Roy!

Roy I

unread,
Apr 14, 2017, 8:49:14 PM4/14/17
to vega-js
Here is an example for Vega 3:

Vega 3.0.0 beta28 spec (example "budget-forecasts")
---------------------------------------------------
...
  "axes": [
...
    {
      "orient": "right", "scale": "y",
      "grid": true, "domain": false,
      "values": [0, -0.5, -1, -1.5],
      "tickSize": 0,
      "encode": {
        "grid": {
          "enter": {
            "stroke": {"value": "white"},
            "strokeOpacity": {"value": 0.75}
          }
        },
        "labels": {
          "enter": {
            "text": {"signal": "format(datum.value, '$.1f') + ' trillion'"}
          }
        }
      }
    }
  ],
...




On Friday, April 7, 2017 at 8:02:03 PM UTC-4, Cody Robinson wrote:
Reply all
Reply to author
Forward
0 new messages