Vega-lite: Cannot style subtitles via config

[mcnuttandrew]

As of this pr vega-lite supports multi-line subtitles. While this is great there doesn't appear to be a way to style the subtitles. For instance I'd expect the following chunk to produce a chart with red titles and subtitles

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data.",
  "title": {
    "text": ["hello", "world"],
    "subtitle": ["hello", "world"]
  },
  "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}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  },
  "config": {
    "title": {
      "color": "red"
    },
    "subtitle": {
      "color": "red"
    }
  }
}

Unfortunately it only produces a chart with red title and black subtitle

I've tried it out on the vega-editor (which is where that screenshot is from) and it seems to be a problem on the latest version of vega-lite. This issue also affects altair (see the downstream issue here), which confusingly has a number of subtitle styling properties listed, which appear not to do anything. I'm not sure if this is a feature request or a bug? I'm happy to try to help either way

[domoritz]

This is supposed to work.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data.",
  "title": {
    "text": ["hello", "world"],
    "subtitle": ["hello", "world"]
  },
  "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}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  },
  "config": {
    "title": {
      "color": "red",
      "subtitleColor": "red"
    }
  }
}

This works, though.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data.",
  "title": {
    "text": ["hello", "world"],
    "subtitle": ["hello", "world"],
    "color": "red",
    "subtitleColor": "red"
  },
  "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}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  }
}

I changed the issue to be about config.

[kanitw]

This is because Vega-Lite redirects title config to Vega's config.style["group-title"] to avoid conflicts between chart title and header title, both of which uses the title directive in Vega.

Since header titles never use subtitle, we should avoid redirecting config.title.subtitle*.

[kanitw]

will be fixed in https://github.com/vega/vega-lite/pull/5779