Search code examples
powerbivega-litevegadeneb

Deneb plot (Vega-Lite) for Power BI: How to get a hierarchical display of labels on each axis?

I am using the Deneb custom visual in Power BI to construct a Gantt-style chart of tasks, broken down by project over time.

Eventually, my plan is to customize this for my purposes in ways that go beyond the capabilities of the Gantt charts currently offered in the Power BI visuals marketplace.

A very simplified mock dataset for this purpose looks like (pasted here):

enter image description here

With the following Vega-lite JSON, I can get to a decent starting point:

{
    "data": {"name": "dataset"},
    "layer": [
      {
        "title" : "Integrated Schedule",
        "mark": { 
          "type": "bar",
          "cornerRadius": 5
        },
        "encoding": {
          "x": {
            "field": "Start Date",
            "type": "temporal",
            "timeUnit": "year",
            "title" : "Year",
            "axis" : {"orient" : "top"}
          },
          "y": {
            "field": "Task ID",
            "type": "ordinal",
            "scale": { "paddingInner": 0.4, "paddingOuter": 0.4 },
            "sort": {
              "field": "Project" 
            },
            "title": null,
            "axis": {"labels": true}
          },
          "x2": {"field": "End Date"},
          "color": {
            "field": "Project"}
        }
      },
      {
    "mark": {
      "type": "text",
      "align": "left",
      "baseline": "middle",
      "fill": "white",
      "dx": 3
    },
    "encoding": {
      "text": {"field": "Task Name", "type": "ordinal"},
          "x": {
            "field": "Start Date",
            "type": "temporal",
            "timeUnit": "year",
            "title" : "Year"
          },
          "y": {
            "field": "Task ID",
            "type": "ordinal",
            "title": null,
            "axis": {"labels": true}
            
          }
    }}
    ]
  }

enter image description here

What I'd like to do next is show some additional labeling on both the X (time) axis and Y (project/task) axis. In addition to the calendar year, I'd like to show a breakdown by quarter of the year. An example of this axis would look like:

enter image description here

I'm not sure how to achieve this, could this be achieved using facets?

Similarly, on the left side of the plot with the Y-axis, since I am grouping the tasks by project, I would like to display the project name outset from the Task ID. This seems more directly achievable using facets, however Deneb will not parse any use of the "row" attribute when I attempt that.

Any ideas on how to approach this?

Solution

  • This is easy enough to do. See the example here for Conditional Axis Properties and Multi-Line Axis Label:

    https://vega.github.io/vega-lite/docs/axis.html