Resize & text/Label for Vega Lite Bar Chart

Question

_Hi, I would like to adjust my chart with the following needs, and I don't know how to do it ?

• Auto adjust all the chart when I resize it,
• Add the values on top of each bar,
• Add a text under each title with a specific information : ex %variation (and a variance indicator)
• Align charts like underlined

Thanks in advance for your help !

   {
  "description": "Quatre graphiques identiques en grille.",
  "data": [
    {
      "name": "data_0",
      "values": [
        {"a": "1", "b": 28},
        {"a": "2", "b": 55},
        {"a": "3", "b": 43},
        {"a": "4", "b": 91},
        {"a": "5", "b": 81},
        {"a": "6", "b": 53},
        {"a": "7", "b": 19},
        {"a": "8", "b": 87},
        {"a": "9", "b": 52}
      ]
    },
    {
      "name": "data_1",
      "values": [
        {"a": "1", "b": 28},
        {"a": "2", "b": 55},
        {"a": "3", "b": 43},
        {"a": "4", "b": 91},
        {"a": "5", "b": 81},
        {"a": "6", "b": 53},
        {"a": "7", "b": 19},
        {"a": "8", "b": 87},
        {"a": "9", "b": 52}
      ]
    },
    {
      "name": "data_2",
      "values": [
        {"a": "1", "b": -3},
        {"a": "2", "b": -10},
        {"a": "3", "b": 43},
        {"a": "4", "b": 91},
        {"a": "5", "b": 81},
        {"a": "6", "b": 53},
        {"a": "7", "b": 19},
        {"a": "8", "b": -50},
        {"a": "9", "b": 52}
      ]
    },
    {
      "name": "data_3",
      "values": [
        {"a": "1", "b": -20},
        {"a": "2", "b": -5},
        {"a": "3", "b": -2},
        {"a": "4", "b": -20},
        {"a": "5", "b": -15},
        {"a": "6", "b": -30},
        {"a": "7", "b": -40},
        {"a": "8", "b": -35},
        {"a": "9", "b": -12}
      ]
    }
  ],
  "concat": [
    {
      "hconcat": [
        {
          "title": "Graphe 1.1",
          "mark": "bar",
          "encoding": {
            "x": {"field": "a", "type": "nominal"},
            "y": {"field": "b", "type": "quantitative"},
            "color": {"condition": {"test": "datum.b < 0", "value": "red"}, "value": "green"}
          }
        },
        {
          "title": "Graphe 1.2",
          "mark": "bar",
          "encoding": {
            "x": {"field": "a", "type": "nominal"},
            "y": {"field": "b", "type": "quantitative"},
            "color": {"condition": {"test": "datum.b < 0", "value": "red"}, "value": "green"}
          }
        }
      ]
    },
    {
      "hconcat": [
        {
          "title": "Graphe 2.1",
          "mark": "bar",
          "encoding": {
            "x": {"field": "a", "type": "nominal"},
            "y": {"field": "b", "type": "quantitative"},
            "color": {"condition": {"test": "datum.b < 0", "value": "red"}, "value": "green"}
          }
        },
        {
          "title": "Graphe 2.2",
          "mark": "bar",
          "encoding": {
            "x": {"field": "a", "type": "nominal"},
            "y": {"field": "b", "type": "quantitative"},
            "color": {"condition": {"test": "datum.b < 0", "value": "red"}, "value": "green"}
          }
        }
      ]
    }
  ]
}

Answer 1

As per comments, auto size doesn't currently work on VL concats or facets. To see the transpiled Vega, paste your code into the online editor and then either resize the section at the bottom or click the button highlighted in the screenshot below.