1

I've created a simple stacked bar chart in Deneb where the user can highlight in place: x-axis is group, highlight is tiers. I've also created a tooltip that should show the name for each bar and should match the label on the bar. What's strange is that the tooltip shows in reverse order: pointing to A shows D, F shows E, etc. (See this pbix file.) I've attempted to insert sorting to the bars; that didn't work. My preference is to have the bars remain as they are and the tooltips show to match; however, it would be ok (less desirable) to reverse the order of the bars. How can I get the tooltip to match the label?

Davide Bacci
  • 16,647
  • 3
  • 10
  • 36
Pat
  • 125
  • 9

1 Answers1

0

This cleaned up spec works.

Don't forget to accept the answer if this solves your problem.

enter image description here

{
  "data": {"name": "dataset"},
  "transform": [
    {
      "stack": "test2",
      "as": ["a", "b"],
      "groupby": ["group"]
    }
  ],
  "layer": [
    {
      "mark": {
        "type": "bar",
        "stroke": "black",
        "strokeWidth": 1,
        "opacity": 0.3
      },
      "encoding": {
        "color": {
          "field": "group",
          "type": "nominal",
          "scale": {
            "domain": [
              "Low",
              "Med",
              "High"
            ],
            "range": [
              "#e15759",
              "#ffff00",
              "#59a14f"
            ]
          },
          "legend": null
        }
      }
    },
    {
      "mark": {
        "type": "bar",
        "stroke": "black",
        "strokeWidth": 1,
        "tooltip": true
      },
      "encoding": {
        "color": {
          "field": "group",
          "type": "nominal",
          "scale": {
            "domain": [
              "Low",
              "Med",
              "High"
            ],
            "range": [
              "#e15759",
              "#ffff00",
              "#59a14f"
            ]
          },
          "legend": null
        },
        "opacity": {
          "condition": {
            "test": "datum['test2__highlight']!=null",
            "value": 1
          },
          "value": 0
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "color": "black",
        "dy": -90
      },
      "encoding": {
        "text": {"field": "name"}
      }
    }
  ],
  "encoding": {
    "y": {
      "field": "a",
      "type": "quantitative",
      "axis": {
        "title": "Number of Projects",
        "tickMinStep": 1
      }
    },
    "y2": {"field": "b"},
    "x": {
      "field": "group",
      "type": "nominal",
      "axis": {
        "title": null,
        "labelAngle": 0
      }
    }
  }
}
Davide Bacci
  • 16,647
  • 3
  • 10
  • 36
  • Thanks, David! You're super helpful and I'm learning a lot from you. – Pat Jun 23 '22 at 20:14
  • Update: my preference was to have the names remain in the same order (alphabetical from top) which this solution did not preserve. I've since figured that out (capturing for others or myself as a reference later): add sort to the transform like this "sort": [{"field": "name", "order": "descending"}]. The best part is that the sort can even be on another field entirely; it doesn't need to be on whatever the bar text is. – Pat Jun 30 '22 at 12:50