CODEWITHSUNDEEP
jsonchartsvisualizationdata-analysisvega-lite
VladB
VladB

Reputation: 59

How to assign y axes and scales to the layers in Dual-Axis multi-layer charts

I have a multi-layer visual showing actuals as a bar chart w. text marks aka labels, and a few different goals showing as line charts.

Note: this is just a minimalistic test case. The real visual is more complex and looks differently.

Is it possible to explicitly assign "y" axes and scales for each layer? I played with "resolve" statement and multi-level layers (groups of layers), but didn't find an acceptable solution.

The desired result: a bar chart is assigned to the Y axis on the left with its own scale, and both line charts (Target and North Star) are assigned to the Y axis on the right (same scale for both line charts, but different from the bar chart's scale).

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
        "values": [
          {"DATE": "2020-02-02", "Value": 50, "Target": 70, "North Star": 220},
          {"DATE": "2020-02-03", "Value": 70, "Target": 90, "North Star": 220},
          {"DATE": "2020-02-04", "Value": 80, "Target": 95, "North Star": 220},
          {"DATE": "2020-02-05", "Value": 85, "Target": 100, "North Star": 230},
          {"DATE": "2020-02-06", "Value": 91, "Target": 105, "North Star": 230}
        ]
      },
      "encoding": {
        "x": {"field": "DATE", "type": "nominal"},
        "y": {"field": "Value", "type": "quantitative"}
      },
      "layer": [
        { "mark": "bar" },
        {
          "mark": {"type": "text", "dy": -7},
          "encoding": { "text": { "field": "Value", "type": "quantitative" }}
        },
        {
          "mark": {"type": "line", "interpolate": "step"},
          "encoding": {
            "y": {"field": "Target", "type": "quantitative", "axis": null },
            "color": { "value": "green"}
          }
        },
        {
          "mark": {"type": "line", "interpolate": "step"},
          "encoding": {"y": {"field": "North Star", "type": "quantitative" },
          "color": { "value": "red"}
          }
        }
      ],
      "resolve": { "scale": {"y": "independent"}}
  }

Online Vega-Lite Editor

Chart

Upvotes: 1

Views: 417

Answers (1)

davidebacci
davidebacci

Reputation: 30324

enter image description here

   {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "data": {
        "values": [
          {"DATE": "2020-02-02", "Value": 50, "Target": 70, "North Star": 220},
          {"DATE": "2020-02-03", "Value": 70, "Target": 90, "North Star": 220},
          {"DATE": "2020-02-04", "Value": 80, "Target": 95, "North Star": 220},
          {"DATE": "2020-02-05", "Value": 85, "Target": 100, "North Star": 230},
          {"DATE": "2020-02-06", "Value": 91, "Target": 105, "North Star": 230}
        ]
      },
      "encoding": {
        "x": {"field": "DATE", "type": "nominal"},
        "y": {"field": "Value", "type": "quantitative"}
      },
      "layer": [
        {"mark": "bar"},
        {
          "mark": {"type": "text", "dy": -7},
          "encoding": {
            "text": {"field": "Value", "type": "quantitative"},
            "y": {"field": "Value", "type": "quantitative", "axis": null}
          }
        },
        {
          "layer": [
            {
              "mark": {"type": "line", "interpolate": "step"},
              "encoding": {
                "y": {"field": "Target", "type": "quantitative"},
                "color": {"value": "green"}
              }
            },
            {
              "mark": {"type": "line", "interpolate": "step"},
              "encoding": {
                "y": {
                  "field": "North Star",
                  "type": "quantitative",
                  "axis": {"title": "Shared Line"}
                },
                "color": {"value": "red"}
              }
            }
          ]
        }
      ],
      "resolve": {"axis": {"y": "independent"}, "scale": {"y": "independent"}}
    }

Upvotes: 1

Related Questions