Search code examples
chartspowerbivisualizationpowerbi-desktopdeneb

show strokeWidth on bars using Deneb

I have a simple bar chart created using Deneb. When using thick strokeWidth, it appears that the sort order of the bars impacts how the stroke is shown (on top of surrounding bars or behind). Is there a way to show the entire stroke? Below is my code and results. [This is a slimmed down version of my actual work so please don't suggest using other visual types; I need to use something like Deneb for features I'm including that are not part of this example.]

{
  "data": {
    "values": [
      {"Yr": 2025, "BarName": "P101", "BarHt": 0.5, "stWidth": 5},
      {"Yr": 2025, "BarName": "P102", "BarHt": 0.6, "stWidth": 1},
      {"Yr": 2025, "BarName": "P103", "BarHt": 0.7, "stWidth": 5},
      {"Yr": 2026, "BarName": "P104", "BarHt": 0.8, "stWidth": 1},
      {"Yr": 2026, "BarName": "P105", "BarHt": 0.9, "stWidth": 5},
      {"Yr": 2026, "BarName": "P106", "BarHt": 0.8, "stWidth": 1}
    ]
  },
  "transform": [
    {
      "stack": "BarHt",
      "groupby": ["Yr"],
      "as": ["ymin", "ymax"]
    },
    {
      "calculate": "(datum.ymin + datum.ymax) / 2",
      "as": "ymid"
    }
  ],
  "encoding": {
    "x": {"field": "Yr"}
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "stroke": "black",
        "strokeWidth": {"expr": "datum['stWidth']"}
      },
      "encoding": {
        "y": {"field": "ymin", "type": "quantitative"},
        "y2": {"field": "ymax"}
      }
    },
    {
      "mark": {"type": "text"},
      "encoding": {
        "text": {"field": "BarName"},
        "y": {"field": "ymid", "type": "quantitative"}
      }
    }
  ]
}

bar chart

Solution

  • Draw your strokes in a separate mark. e.g.

    enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 400,
  "height": 300,
  "data": {
    "values": [
      {"Yr": 2025, "BarName": "P101", "BarHt": 0.5, "stWidth": 5},
      {"Yr": 2025, "BarName": "P102", "BarHt": 0.6, "stWidth": 1},
      {"Yr": 2025, "BarName": "P103", "BarHt": 0.7, "stWidth": 5},
      {"Yr": 2026, "BarName": "P104", "BarHt": 0.8, "stWidth": 1},
      {"Yr": 2026, "BarName": "P105", "BarHt": 0.9, "stWidth": 5},
      {"Yr": 2026, "BarName": "P106", "BarHt": 0.8, "stWidth": 1}
    ]
  },
  "transform": [
    {"stack": "BarHt", "groupby": ["Yr"], "as": ["ymin", "ymax"]},
    {"calculate": "(datum.ymin + datum.ymax) / 2", "as": "ymid"}
  ],
  "encoding": {"x": {"field": "Yr"}},
  "layer": [
    {
      "mark": {
        "type": "bar"
      },
      "encoding": {
        "y": {"field": "ymin", "type": "quantitative"},
        "y2": {"field": "ymax"}
      }
    },
    {
      "mark": {
        "type": "bar", "fill":"transparent",
        "stroke": "black",
        "strokeWidth": {"expr": "datum['stWidth']"}
      },
      "encoding": {
        "y": {"field": "ymin", "type": "quantitative"},
        "y2": {"field": "ymax"}
      }
    },
    {
      "mark": {"type": "text"},
      "encoding": {
        "text": {"field": "BarName"},
        "y": {"field": "ymid", "type": "quantitative"}
      }
    }
  ]
}