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
}