Search code examples
powerbifacetvega-litedeneb

Faceting a Layered Plot Vega-Lite Deneb


wonder if you could help me out on the below. I´m using Deneb to visualize small multiples in PBI and I´m not able to find out how to add text labels above/below the bar. Does anyone know the workaround by chance?

Here´s the code that I´m using so far:

{
  "data": {"values": [
{"Region":"A","Month":"1","Difference":"-0.01"},
{"Region":"A","Month":"2","Difference":"0"},
{"Region":"A","Month":"3","Difference":"-0.03"},
{"Region":"A","Month":"4","Difference":"-0.01"},
{"Region":"A","Month":"5","Difference":"-0.01"},
{"Region":"A","Month":"6","Difference":"0.05"},
{"Region":"A","Month":"7","Difference":"-0.05"},
{"Region":"A","Month":"8","Difference":"-0.03"},
{"Region":"A","Month":"9","Difference":"0.03"},
{"Region":"A","Month":"10","Difference":"-0.01"},
{"Region":"A","Month":"11","Difference":"-0.01"},
{"Region":"A","Month":"12","Difference":"0.03"},
{"Region":"B","Month":"1","Difference":"-0.02"},
{"Region":"B","Month":"2","Difference":"-0.02"},
{"Region":"B","Month":"3","Difference":"0.02"},
{"Region":"B","Month":"4","Difference":"0.03"},
{"Region":"B","Month":"5","Difference":"-0.05"},
{"Region":"B","Month":"6","Difference":"-0.02"},
{"Region":"B","Month":"7","Difference":"-0.01"},
{"Region":"B","Month":"8","Difference":"0.03"},
{"Region":"B","Month":"9","Difference":"-0.03"},
{"Region":"B","Month":"10","Difference":"-0.03"},
{"Region":"B","Month":"11","Difference":"0.01"},
{"Region":"B","Month":"12","Difference":"-0.02"},
{"Region":"C","Month":"1","Difference":"-0.05"},
{"Region":"C","Month":"2","Difference":"-0.04"},
{"Region":"C","Month":"3","Difference":"-0.03"},
{"Region":"C","Month":"4","Difference":"0"},
{"Region":"C","Month":"5","Difference":"0"},
{"Region":"C","Month":"6","Difference":"-0.02"},
{"Region":"C","Month":"7","Difference":"-0.05"},
{"Region":"C","Month":"8","Difference":"0.02"},
{"Region":"C","Month":"9","Difference":"0"},
{"Region":"C","Month":"10","Difference":"-0.03"},
{"Region":"C","Month":"11","Difference":"-0.03"},
{"Region":"C","Month":"12","Difference":"0.02"},
{"Region":"D","Month":"1","Difference":"0.05"},
{"Region":"D","Month":"2","Difference":"-0.02"},
{"Region":"D","Month":"3","Difference":"-0.05"},
{"Region":"D","Month":"4","Difference":"-0.05"},
{"Region":"D","Month":"5","Difference":"0"},
{"Region":"D","Month":"6","Difference":"-0.01"},
{"Region":"D","Month":"7","Difference":"0.02"},
{"Region":"D","Month":"8","Difference":"-0.01"},
{"Region":"D","Month":"9","Difference":"0"},
{"Region":"D","Month":"10","Difference":"-0.01"},
{"Region":"D","Month":"11","Difference":"0.01"},
{"Region":"D","Month":"12","Difference":"-0.03"}
]},

  "mark": {
    "type": "bar",
    "stroke": "black",
    "opacity": 1,
    "cornerRadius": 2,
    "tooltip":true
  },
  "width": 440,
  "height": 75,
  "cornerRadius": 2,
  "encoding": {
    "facet": {
      "field": "Region",
      "type": "ordinal",
      "title": null,
      "columns": 2
    },
    "x": {
      "field": "Month",
      "type": "ordinal",
      "axis": {"labelAngle": 0}
    },
    "y": {
      "field": "Difference",
      "type": "quantitative",
      "axis": {
        "format": "0%",
        "formatType": "pbiFormat"
      }
    },
    "color": {
      "condition": {
        "test": "datum['Difference']<0",
        "value": "#F78272"
      },
      "value": "#F2C80F"
    },
    "text": {
      "field": "Difference",
      "type": "quantitative"
    }
  }
}

Many thanks in advance!

*edit1: added desired output *edit2: added dataset into the code

enter image description here

Desired outcome: enter image description here


Solution

  • How's this?

    enter image description here

    {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "data": {
        "values": [
          {"Region": "A", "Month": "1", "Difference": "-0.01"},
          {"Region": "A", "Month": "2", "Difference": "0"},
          {"Region": "A", "Month": "3", "Difference": "-0.03"},
          {"Region": "A", "Month": "4", "Difference": "-0.01"},
          {"Region": "A", "Month": "5", "Difference": "-0.01"},
          {"Region": "A", "Month": "6", "Difference": "0.05"},
          {"Region": "A", "Month": "7", "Difference": "-0.05"},
          {"Region": "A", "Month": "8", "Difference": "-0.03"},
          {"Region": "A", "Month": "9", "Difference": "0.03"},
          {"Region": "A", "Month": "10", "Difference": "-0.01"},
          {"Region": "A", "Month": "11", "Difference": "-0.01"},
          {"Region": "A", "Month": "12", "Difference": "0.03"},
          {"Region": "B", "Month": "1", "Difference": "-0.02"},
          {"Region": "B", "Month": "2", "Difference": "-0.02"},
          {"Region": "B", "Month": "3", "Difference": "0.02"},
          {"Region": "B", "Month": "4", "Difference": "0.03"},
          {"Region": "B", "Month": "5", "Difference": "-0.05"},
          {"Region": "B", "Month": "6", "Difference": "-0.02"},
          {"Region": "B", "Month": "7", "Difference": "-0.01"},
          {"Region": "B", "Month": "8", "Difference": "0.03"},
          {"Region": "B", "Month": "9", "Difference": "-0.03"},
          {"Region": "B", "Month": "10", "Difference": "-0.03"},
          {"Region": "B", "Month": "11", "Difference": "0.01"},
          {"Region": "B", "Month": "12", "Difference": "-0.02"},
          {"Region": "C", "Month": "1", "Difference": "-0.05"},
          {"Region": "C", "Month": "2", "Difference": "-0.04"},
          {"Region": "C", "Month": "3", "Difference": "-0.03"},
          {"Region": "C", "Month": "4", "Difference": "0"},
          {"Region": "C", "Month": "5", "Difference": "0"},
          {"Region": "C", "Month": "6", "Difference": "-0.02"},
          {"Region": "C", "Month": "7", "Difference": "-0.05"},
          {"Region": "C", "Month": "8", "Difference": "0.02"},
          {"Region": "C", "Month": "9", "Difference": "0"},
          {"Region": "C", "Month": "10", "Difference": "-0.03"},
          {"Region": "C", "Month": "11", "Difference": "-0.03"},
          {"Region": "C", "Month": "12", "Difference": "0.02"},
          {"Region": "D", "Month": "1", "Difference": "0.05"},
          {"Region": "D", "Month": "2", "Difference": "-0.02"},
          {"Region": "D", "Month": "3", "Difference": "-0.05"},
          {"Region": "D", "Month": "4", "Difference": "-0.05"},
          {"Region": "D", "Month": "5", "Difference": "0"},
          {"Region": "D", "Month": "6", "Difference": "-0.01"},
          {"Region": "D", "Month": "7", "Difference": "0.02"},
          {"Region": "D", "Month": "8", "Difference": "-0.01"},
          {"Region": "D", "Month": "9", "Difference": "0"},
          {"Region": "D", "Month": "10", "Difference": "-0.01"},
          {"Region": "D", "Month": "11", "Difference": "0.01"},
          {"Region": "D", "Month": "12", "Difference": "-0.03"}
        ]
      },
      "spec": {
        "width": 440,
        "height": 75,
        "encoding": {
          "x": {"field": "Month", "type": "ordinal", "axis": {"labelAngle": 0}},
          "y": {
            "field": "Difference",
            "type": "quantitative",
            "axis": {"format": "0%", "formatType": "pbiFormat"}
          },
          "color": {
            "condition": {"test": "datum['Difference']<0", "value": "#F78272"},
            "value": "#F2C80F"
          }
        },
        "layer": [
          {
            "mark": {
              "type": "bar",
              "stroke": "black",
              "opacity": 1,
              "cornerRadius": 2,
              "tooltip": true
            }
          },
           {
          "mark": {
            "type": "text",
            
            "dy": {"expr": "datum.Difference < 0 ? 10 : -10"}
          },
          "encoding": {"text": {"field": "Difference", "type": "quantitative"}}
        }
        ]
      },
      "facet": {"field": "Region", "type": "ordinal", "title": null},
      "columns": 2
    }