Stacked bar and line chart? (Charticulator)

[Robert_BI]

PBI has a built-in “line and stacked column” visual, but I’d like to flip the axes. I don't think that can be done with the properties available. I’ve seen some custom visuals for purchase but I thought this one must be relatively easy to do myself. I’ve tried Charticulator and looked through some documentation and videos, but I can’t quite figure out if I’m doing things correctly.

I’ve created one plot segment for the bars and one for the line. When I add multiple marks to the bar glyph and try to add a legend, the x-axis gets “weird”. I ended up having to manually fiddle with the scale “Range End” property to get it looking half right but I don’t understand what the values do, as they don't seem to match the axis. I’m not sure if this manual step is necessary or if I’m just doing it wrong. The legend seems to work fine with a single mark/value on the glyph, so I feel like I might not be understanding the right way to draw the marks. I also need to understand how to align the axis for the bars and the axis for the line.

I tried a data guide for the bars, as that seemed like a good way to anchor multiple marks, but it was also hard to get right or in the right value order. I’m not sure if a guide is meant for stacked bars or not.

I have an example here (link expires after a week) of what it would look like in standard line and column, and my best attempt at line and bar. This is with two bar values, but ideally I’d be able to have three or more.

https://we.tl/t-sPEib1hEAd

Could anyone offer Charticulator insight, or is there a better way to do this? I’ve briefly looked at the Deneb JSON visual as an alternative (haven’t built anything yet), but I do like Charticulator’s GUI style. (I’ve seen it was recently converted to a community project, though, which is a bit worrying.) Thanks for any help.

[Robert_BI]

Appreciate it, that looks pretty good. I'll play around with it and see where I get.

Still interested if anyone has Charticulator experience to offer!

[giammariam]

If you're open to using Deneb, below is a vega-lite spec that is pretty close to what you're after. You'll probably need to apply some tweaks once you put it up against real data. Let me know if you want any help getting it working.

Link to spec in vega-lite editor (you may have to manually re-apply the powerbi theme under the CONFIG tab)

spec and screenshot:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 710,
  "height": 426,
  "encoding": {
    "y": {"field": "Category", "axis": {"labelAngle": 0}},
    "color": {
      "field": "Type",
      "scale": {"domain": ["Value1", "Value2", "Target Value"]},
      "legend": {"orient": "top", "title": null}
    }
  },
  "layer": [
    {
      "mark": "bar",
      "transform": [
        {"filter": "datum['Type'] === 'Value1' || datum['Type'] === 'Value2'"}
      ],
      "encoding": {
        "x": {
          "aggregate": "sum",
          "field": "Value",
          "title": "Sum of Value1 and Value2"
        }
      }
    },
    {
      "mark": "line",
      "transform": [{"filter": "datum['Type'] === 'Target Value'"}],
      "encoding": {"x": {"aggregate": "sum", "field": "Value"}}
    },
    {
      "mark": "point",
      "encoding": {"x": {"aggregate": "sum", "field": "Target Value"}}
    },
        {
      "mark": {"type": "point", "shape": "M 2.563 0 L 22.437 0 C 23.853 0 25 1.791 25 4 L 25 11.041 C 25 13.25 23.853 15.041 22.437 15.041 L 2.563 15.041 C 1.147 15.041 0 13.25 0 11.041 L 0 4 C 0 1.791 1.147 0 2.563 0 Z", "fill": "gainsboro", "size": 4},
      "encoding": {
        "x": {"aggregate": "sum", "field": "Target Value"},
        "xOffset": {"value": 13},
        "yOffset": {"value": 11}
      }
    },
    {
      "mark": "text",
      "encoding": {
        "text": {"field": "Target Value"},
        "x": {"aggregate": "sum", "field": "Target Value"},
        "xOffset": {"value": 25}
      }
    }
  ],
  "transform": [
    {"fold": ["Value1", "Value2", "Target Value"], "as": ["Type", "Value"]}
  ],
  "data": {
    "values": [
      {"Category": "A", "Value1": "20", "Value2": "10", "Target Value": "25"},
      {"Category": "B", "Value1": "40", "Value2": "30", "Target Value": "35"},
      {"Category": "C", "Value1": "35", "Value2": "35", "Target Value": "30"},
      {"Category": "D", "Value1": "15", "Value2": "5", "Target Value": "20"},
      {"Category": "E", "Value1": "20", "Value2": "20", "Target Value": "25"},
      {"Category": "F", "Value1": "15", "Value2": "5", "Target Value": "25"},
      {"Category": "G", "Value1": "15", "Value2": "15", "Target Value": "20"},
      {"Category": "H", "Value1": "25", "Value2": "25", "Target Value": "25"},
      {"Category": "I", "Value1": "5", "Value2": "5", "Target Value": "30"},
      {"Category": "J", "Value1": "10", "Value2": "10", "Target Value": "35"}
    ]
  }
}