Side by Side Bar Chart

We are attempting to build a Bar Chart with Bars ‘Side by Side’ instead of stacked. We have Created 2 separate PLot Layers, but whenever they share Y Axis values, they automatically Stack. (2nd Screen Shot)

We attempted to manually control the X Axis, and this does show them seperate (but now overlapping instead of side by side). (3rd Screen Shot)

We need the Grey and Red Bars SIDE BY SIDE for each Y Axis ‘DC Name’.

Thank You in Advance,
Forrest

image

image

image

Hi @fhill,

If the Y axis is the same (your metric), use only one layer and split the colors using the segment option:

image

If you choose grouped you should see one bar per segment:

image

Just to be clear, your data should have a column that splits the rows between the two groups:

2 Likes

This is a known issue with the XY chart that we are tracking internally. One option is use a single layer that segments the series, and then you can choose your Segment Display.

Screenshot 2024-10-17 at 3.37.10 PM

There is also a bug where this segment display actually applies across all layers, so you could potentially add a Segment By property, set your segment display, then remove that property and have the segment display applied across layers.

If that doesn’t work the recommended solution would be to create this chart using the Vega Chart widget. Here is an example I have built out that I think has the side-by-side bars you are looking for:

Here is the spec I used for this chart (excluding the input data). I was able to write this spec mostly using AIP Assist prompts for the structure, with a couple manual edits to get the labels I wanted:

Workshop Vega Spec
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "name": "vega_data"
  },
  "title": {
    "text": "2020 to 2024 Market Cap Comparison",
    "dy": -20,
    "fontSize": 18
  },
  "facet": {
    "row": {
      "field": "name",
      "type": "nominal",
      "title": null,
      "sort": {
        "field": "marketCap",
        "order": "descending"
      }
    }
  },
  "transform": [
    {
      "calculate": "datum.marketCap / 1e12",
      "as": "marketCapInTrillions"
    },
    {
      "calculate": "datum.marketCap2020EOY / 1e12",
      "as": "marketCap2020InTrillions"
    }
  ],
  "spec": {
    "width": 400,
    "layer": [
      {
        "mark": {
          "type": "bar",
          "yOffset": -10,
          "tooltip": true
        },
        "encoding": {
          "x": {
            "field": "marketCap",
            "type": "quantitative",
            "title": "",
            "axis": {
              "labels": false,
              "ticks": false,
              "grid": false,
              "domain": false
            }
          },
          "y": {
            "type": "nominal",
            "title": "",
            "axis": {
              "labels": false,
              "ticks": false,
              "grid": false,
              "domain": false
            }
          },
          "color": {
            "value": "#215DB0"
          },
          "tooltip": [
            {
              "field": "marketCapInTrillions",
              "type": "quantitative",
              "title": "Market Cap (Trillions)"
            }
          ]
        }
      },
      {
        "mark": {
          "type": "bar",
          "yOffset": 10,
          "tooltip": true
        },
        "encoding": {
          "x": {
            "field": "marketCap2020EOY",
            "type": "quantitative",
            "axis": {
              "labels": false,
              "ticks": false,
              "grid": false,
              "domain": false
            }
          },
          "y": {
            "type": "nominal",
            "title": "",
            "axis": {
              "labels": false,
              "ticks": false,
              "grid": false,
              "domain": false
            }
          },
          "color": {
            "value": "#FBB360"
          },
          "tooltip": [
            {
              "field": "marketCap2020InTrillions",
              "type": "quantitative",
              "title": "2020 Market Cap (Trillions)"
            }
          ]
        }
      },
      {
        "transform": [
          {
            "calculate": "-300000000000",
            "as": "xAxis"
          }
        ],
        "mark": {
          "type": "image",
          "width": 25,
          "height": 25,
          "tooltip": null
        },
        "encoding": {
          "x": {
            "field": "xAxis",
            "type": "quantitative",
            "title": "",
            "axis": {
              "labels": false,
              "ticks": false,
              "grid": false,
              "domain": false
            }
          },
          "y": {
            "type": "nominal",
            "title": "",
            "axis": {
              "labels": false,
              "ticks": false,
              "grid": false,
              "domain": false
            }
          },
          "url": {
            "field": "logoUrl",
            "type": "nominal"
          }
        }
      },
      {
        "mark": {
          "type": "text",
          "align": "left",
          "dx": 40,
          "fontSize": 16
        },
        "encoding": {
          "x": {
            "field": "marketCap",
            "type": "quantitative",
            "aggregate": "max",
            "axis": {
              "labels": false,
              "ticks": false,
              "grid": false,
              "domain": false
            }
          },
          "y": {
            "type": "nominal",
            "title": "",
            "axis": {
              "labels": false,
              "ticks": false,
              "grid": false,
              "domain": false
            }
          },
          "text": {
            "field": "percentageChange",
            "type": "quantitative",
            "format": ".1%"
          },
          "color": {
            "condition": {
              "test": "datum.percentageChange < 0",
              "value": "#CD4246"
            },
            "value": "#238551"
          }
        },
        "transform": [
          {
            "calculate": "datum.marketCap / datum.marketCap2020EOY - 1",
            "as": "percentageChange"
          }
        ]
      }
    ]
  }
}

You can use this chart as inspiration, and refer to the docs for more assistance in building your own.

1 Like