Freeform properties config options require "value" property

[marcprux]

If I want to set a property on an axis or legend that is not part of the vega-lite spec such as "fontSize", you need to use vega's property format with a value object. E.g.:

      "axis": { "properties": { "title": { "fontSize": { "value": 30 } } } }

Many vega-lite users likely do not understand vega's schema nuances, so it would make more sense to just allow literal values, such as:

      "axis": { "properties": { "title": { "fontSize": 30 } } }

Full example:

{
  "mark": "bar",
  "data": {
    "values": [
      {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
      {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
      {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
    ]
  },
  "encoding": {
    "y": {"field": "a", "type": "ordinal"},
    "x": {"field": "b", "type": "quantitative"}
  },
  "config": {
      "axis": {
        "properties": {
           "title": {
            "font": { "value": "Courier" },
             "fontSize": {"value": 30}
          },
          "labels": {
            "font": { "value": "Menlo" },
            "fontSize": { "value": 15 }
          }
        }
      }
  }
}

[kanitw]

I agree with you. You're welcome to submit a pull request to fix this after we finish merging #1290 and #1302.

[domoritz]

Yes, this is something we definitely want in Vega-Lite!

[kanitw]

@mprudhom FYI, we have merged those two PRs. Feel free to take a stab.

I would add a common wrapValue method in common.ts for wrapping props[group] in L108 in axis.ts and same for legend.ts.

[kanitw]

Thinking about it more, I start doubting if always wrapping things with value is a good idea.

For example, our beautiful figure for Voyager 2 paper leverage production rules in Axis's encode block:

{
  "width": 360,
  "height": 65,
  "padding": 5,
  "autosize": "fit",

  "config": {
    "axis": {
      "tickColor": "#ccc"
    },
    "legend": {
      "offset": 5.5,
      "entryPadding": 4,
      "labelOffset": 3,
      "symbolSize": 35
    }
  },

  "data": [
    {
      "name": "ci",
      "values": [
        {
          "measure": "Open-Ended Exploration",
          "mean": 2.1875,
          "lo": 1.665,
          "hi": 2.710,
          "study": "PoleStar vs Voyager 2"
        },{
          "measure": "Focused Question Answering",
          "mean": -0.0625,
          "lo": -0.474,
          "hi": 0.349,
          "study": "PoleStar vs Voyager 2"
        },{
          "measure": "Open-Ended Exploration",
          "mean": 1.813,
          "lo": 1.255,
          "hi": 2.370,
          "study": "PoleStar vs Voyager"
        },{
          "measure": "Focused Question Answering",
          "mean": -1.688,
          "lo": -2.325,
          "hi": -1.050,
          "study": "PoleStar vs Voyager"
        }
      ]
    }
  ],

  "scales": [
    {
      "name": "xscale",
      "domain": [-3, 3],
      "range": "width", "round": true
    },
    {
      "name": "yscale",
      "type": "band",
      "padding": 0,
      "domain": {"data": "ci", "field": "study"},
      "range": [0, {"signal": "height"}], "round": true
    },
    {
      "name": "fillscale",
      "type": "ordinal",
      "domain": {"data": "ci", "field": "measure"},
      "range": ["white", "black"]
    }
  ],

  "axes": [
    {
      "orient": "left", "scale": "yscale",
      "domain": false, "tickSize": 0, "offset": 4
    },
    {
      "orient": "bottom", "scale": "xscale", "grid": true,
      "title": "",
      "tickCount": 7,
      "encode": {
        "grid": {
          "update": {
            "strokeDash": {"value": [3, 3]},
            "stroke": [
              {"test": "datum.value === 0", "value": "#666"},
              {"value": "#CCC"}
            ]
          }
        },
        "ticks": {
          "update": {
            "stroke": [
              {"test": "datum.value === 0", "value": "#666"},
              {"value": "#CCC"}
            ]
          }
        }
      }
    },
    {
      "orient": "top", "scale": "xscale", "domain": false, "grid": false,
      "title": "Mean of Subject Ratings (95% CIs)", "tick": false, "label":false,
      "offset": 3
    }
  ],

  "marks": [
    {
      "type": "rect",
      "from": {"data": "ci"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "lo"},
          "x2": {"scale": "xscale", "field": "hi"},
          "y": {"scale": "yscale", "field": "study", "band": 0.5, "offset": -0.5},
          "height": {"value": 1},
          "fill": {"value": "#000"}
        }
      }
    },
    {
      "type": "symbol",
      "from": {"data": "ci"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "mean"},
          "y": {"scale": "yscale", "field": "study", "band": 0.5},
          "size": {"value": 25},
          "fill": {"scale": "fillscale", "field": "measure"},
          "stroke": {"value": "black"}
        }
      }
    }
  ]
}

[kanitw]

I don't think we should wrap value if we wanna keep it (let's decide about that in https://github.com/vega/vega-lite/issues/1874)