Search code examples
looker-studiovega-litestacked-chart

Vega-Lite : Stacked Grouped Bar Chart

I'm using Vega-Lite for Data Studio and I'm trying to create a Stacked AND Grouped bar chart.
For the moment, I have this result : https://i.sstatic.net/HO1wR.png

However, what I want to do is to have LEFT bars with GREEN gradient & RIGHT bars with BLUE gradient.
So my question is : How can I perform this kind of chart ?
e.g : https://i.sstatic.net/J5223.png

Here, you'll find what I've done :

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values"  : [
      {"Team" : "X", "Task" : "A", "Done" : 56.5, "Planned" : 80, "Activity_Type" : "TypeA"},
      {"Team" : "X", "Task" : "A", "Done" : 26, "Planned" : 14, "Activity_Type" : "TypeB"},
      {"Team" : "X", "Task" : "B", "Done" : 26, "Planned" : 21, "Activity_Type" : "TypeA"},
      {"Team" : "X", "Task" : "B", "Done" : 16.5, "Planned" : 36, "Activity_Type" : "TypeB"},
      {"Team" : "X", "Task" : "C", "Done" : 41.5, "Planned" : 59, "Activity_Type" : "TypeA"},
      {"Team" : "X", "Task" : "C", "Done" : 9, "Planned" : 12, "Activity_Type" : "TypeB"}
    ] 
  },
  "height" : 200,
  "width" : 500,
  "encoding": {
    "tooltip" : [
      {"field" : "Team"},
      {"field" : "Task"},
      {"field" : "Done"},
      {"field" : "Planned"},
      {"field" : "Activity_Type"}
    ],
    "y": {"axis": {"title": "Number of points"}},
    "x": {"field": "Task", "type": "nominal", "axis": {"labelAngle": 0}}
  },
  "layer": [
    {
      "mark": {"type": "bar", "xOffset": -16, "size": 30, "color": "#81c784"},
      "encoding": {
        "y": {
          "field": "Done",
          "type": "quantitative"
        },
        "color": {
          "field": "Activity_Type",
          "type": "nominal",
          "scale": {
            "range": ["#81c784", "#629b65", "#3d683f"] // GREEN GRADIENT
          },
          "title": "Activity_Type",
          "legend" : null
        }
      }
    },
    {
      "mark": {
        "type": "bar", "size": 30, "xOffset": 16, "color" : "#1e88e5"
      },
      "encoding": {
        "y": {
          "field": "Planned",
          "type": "quantitative"
        },
        "color": {
          "field": "Activity_Type",
          "type": "nominal",
          "scale": {
            "range": ["#1e88e5", "#2f75b3", "#255279"] // BLUE GRADIENT
          },
          "legend" : null
        }
      }
    }
  ]
}

Thanks by advance for your help !

Solution

  • I've finally found a solution that does the job !
    For people who wants, here's my solution :

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values"  : [
      {"Team" : "X", "Task" : "A", "Done" : 56.5, "Planned" : 80, "Activity_Type" : "TypeA"},
      {"Team" : "X", "Task" : "A", "Done" : 26, "Planned" : 14, "Activity_Type" : "TypeB"},
      {"Team" : "X", "Task" : "B", "Done" : 26, "Planned" : 21, "Activity_Type" : "TypeA"},
      {"Team" : "X", "Task" : "B", "Done" : 16.5, "Planned" : 36, "Activity_Type" : "TypeB"},
      {"Team" : "X", "Task" : "C", "Done" : 41.5, "Planned" : 59, "Activity_Type" : "TypeA"},
      {"Team" : "X", "Task" : "C", "Done" : 9, "Planned" : 12, "Activity_Type" : "TypeB"}
    ] 
  },
  "height" : 200,
  "width" : 500,
  "encoding": {
    "tooltip" : [
      {"field" : "Team"},
      {"field" : "Task"},
      {"field" : "Done"},
      {"field" : "Planned"},
      {"field" : "Activity_Type"}
    ],
    "y": {"axis": {"title": "Number of points"}},
    "x": {"field": "Task", "type": "nominal", "axis": {"labelAngle": 0}}
  },
  "layer": [
    {
      "mark": {"type": "bar", "xOffset": -16, "size": 30, "color": "#81c784"},
      "encoding": {
        "y": {
          "field": "Done",
          "type": "quantitative"
        },
        "color": {
          "condition" : [
            {"test" : "datum.Activity_Type === 'TypeA'", "value" : "#629b65"},
            {"test" : "datum.Activity_Type === 'TypeB'", "value" : "#81c784"}
          ],
          "value": "#3d683f"
        }
      }
    },
    {
      "mark": {
        "type": "bar", "size": 30, "xOffset": 16, "color" : "#1e88e5"
      },
      "encoding": {
        "y": {
          "field": "Planned",
          "type": "quantitative"
        },
        "color": {
          "condition" : [
            {"test" : "datum.Activity_Type === 'TypeA'","value" : "#1e88e5"},
            {"test" : "datum.Activity_Type === 'TypeB'","value" : "#2f75b3"}
          ],
          "value": "#255279"
        }
      }
    }
  ]
}

    It looks like this: diagram