Independent Y axes for dual axis wrapped facet

[Pranusha119 (Pranusha)]

Hello,

My requirement is to get dual axis charts in wrapped facet as in below link.

Editor/IDE for Vega and Vega-Lite

I have used the same code with my data , but wasn't getting independent Y axes for dual charts as below :

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "url": {
      "%context%": true,
      "index": "index_paincure_0709",
      "body": {
        "size": 10000,
        "_source": ["Media_Type", "Unit_Key_Message", "Readability"]
      }
    },
    "format": {"property": "hits.hits"}
  },
  "facet": {"field": "_source.Media_Type", "type": "ordinal", "title": ""},
  "center": true,
  "columns": 2,
  "spec": {
    "layer": [
      {
        "mark": "bar",
        "encoding": {
          "y": {
            "aggregate": "sum",
            "field": "_source.Readability",
            "type": "quantitative",
            "scale": {"zero": false}
          },
          "x": {
            "field": "_source.Unit_Key_Message",
            "type": "ordinal",
            "sort": "-x",
            "title": ""
          }
        }
      },
      {
        "mark": "line",
        "encoding": {
          "y": {
            "aggregate": "count",
            "field": "_source.Unit_Key_Message",
            "type": "quantitative",
            "scale": {"zero": false}
          },
          "x": {
            "field": "_source.Unit_Key_Message",
            "type": "ordinal",
            "sort": "-x",
            "title": ""
          },
          "color": {"value": "#000000"}
        }
      }
    ],
    "resolve": {"scale": {"y": "independent"}, "axis": {"y": "independent"}}
  },
  "resolve": {
    "scale": {"x": "independent", "y": "independent"},
    "axis": {"y": "independent"}
  },
  "config": {"bar": {"align": "center"}}
}

[nickofthyme (Nick Partridge)]

Hey @Pranusha119

Based on the example you provided, I recreated a simple playground using your config with the data from the example (swapping their keys for yours) and it appears to work fine, see link and screenshot below.

Open the Chart in the Vega Editor

To me, based on your screenshot, it looks like both axes are rendered but for some reason, the chart area is zero such that the axes are back to back. The Scale and Guide Resolution looks correct, though "axis": {"y": "independent"} may be redundant.

If you are able to provide a sample dataset in json form, I could take another look and see what may be the cause and if this may be a kibana issue.

[Pranusha119 (Pranusha)]

Hello @nickofthyme, thanks for looking into this.

Have provided the data for above spec and also gave another example with sample dataset(kibana_sample_data_ecommerce) in below link.

Independent Y axes for dual axis wrapped facet

[nickofthyme (Nick Partridge)]

Ok thanks, @Pranusha119. Let's continue this conversation on the GH issue @vega/vega-lite#7278

[nickofthyme (Nick Partridge)]

@Pranusha119,

I found a solution but I think this is still a valid bug in vega-lite, but they are better suited to discover the root of the problem.

The solution is to add a calculate transform on only the _source.day_of_week field and passing the new calculated/unnested value day_of_week to the encoding.x.field on both layers. You could apply a transform for each of the fields to not have to pull from _source but it's not necessary for the other fields.

Here is a working example with a nested _source.<FIELD> dataset. Looks something like this...

---

In the case of your original example, a solution would look like...

{
 "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
 "data": {
   "url": {
     "%context%": true,
     "index": "index_paincure_0709",
     "body": {
       "size": 10000,
       "_source": ["Media_Type", "Unit_Key_Message", "Readability"]
     }
   },
   "format": {"property": "hits.hits"}
 },
 "transform": [
   {"calculate": "datum._source.Unit_Key_Message", "as": "Unit_Key_Message"}
 ],
 "facet": {"field": "_source.Media_Type", "type": "ordinal", "title": ""},
 "center": true,
 "columns": 2,
 "spec": {
   "layer": [
     {
       "mark": "bar",
       "encoding": {
         "y": {
           "aggregate": "sum",
           "field": "_source.Readability",
           "type": "quantitative",
           "scale": {"zero": false}
         },
         "x": {
           "field": "Unit_Key_Message",
           "type": "ordinal",
           "sort": "-x",
           "title": ""
         }
       }
     },
     {
       "mark": "line",
       "encoding": {
         "y": {
           "aggregate": "count",
           "field": "Unit_Key_Message",
           "type": "quantitative",
           "scale": {"zero": false}
         },
         "x": {
           "field": "Unit_Key_Message",
           "type": "ordinal",
           "sort": "-x",
           "title": ""
         },
         "color": {"value": "#000000"}
       }
     }
   ],
   "resolve": {"scale": {"y": "independent"}}
 },
 "resolve": {
   "scale": {"x": "independent", "y": "independent"},
   "axis": {"y": "independent"}
 },
 "config": {"bar": {"align": "center"}}
}

I hope that helps, let me know if that spec doesn't work, obviously, I can't test it myself

[Pranusha119 (Pranusha)]

Thanks, it's working @nickofthyme