CODEWITHSUNDEEP
vega-litevega
BIProfileStackOverflow
BIProfileStackOverflow

Reputation: 11

Vega-lite display data label in grouped bar chart with multiple measures

I am trying to customize below chart to add data lablel in bars. Can you please help?

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "url": "data/movies.json"
  },
  "repeat": {"layer": ["Worldwide Gross", "US Gross"]},
  "spec": {
    "mark": "bar",
    "encoding": {
      "x": {
        "field": "Major Genre",
        "type": "nominal"
      },
      "y": {
        "aggregate": "sum",
        "field": {"repeat": "layer"},
        "type": "quantitative",
        "title": "Total Gross"
      },
      "color": {"datum": {"repeat": "layer"}, "title": "Gross",
      "scale": {"range": ["#2a9d8f", "#e76f51"]}},
      "xOffset": {"datum": {"repeat": "layer"}}
    }
  },
  "config": {
    "mark": {"invalid": null}
  }
}

Visualization

Link: https://vega.github.io/editor/#/examples/vega-lite/bar_grouped_repeated

I need to display data label to this grouped bar chart.

Upvotes: 1

Views: 301

Answers (1)

davidebacci
davidebacci

Reputation: 30174

Add labels as follows:

enter image description here

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"category": "A", "group": "x", "value": 0.1},
      {"category": "A", "group": "y", "value": 0.6},
      {"category": "A", "group": "z", "value": 0.9},
      {"category": "B", "group": "x", "value": 0.7},
      {"category": "B", "group": "y", "value": 0.2},
      {"category": "B", "group": "z", "value": 1.1},
      {"category": "C", "group": "x", "value": 0.6},
      {"category": "C", "group": "y", "value": 0.1},
      {"category": "C", "group": "z", "value": 0.2}
    ]
  },
  "encoding": {
    "x": {"field": "category"},
    "y": {"field": "value", "type": "quantitative"},
    "xOffset": {"field": "group"},
    "color": {"field": "group"}
  },
  "layer": [
    {"mark": "bar"},
    {
      "mark": {"type": "text", "dy": -5},
      "encoding": {"text": {"field": "value"}}
    }
  ]
}

Upvotes: 0

Related Questions