Hiding/Removing the secondary y-axis

Question

The script below creates a line chart. I want to hide the secondary y-axis. To be precise, I do not want to show the axis, but like a legend that explains the color of the lines. Is there a different way to scale the "by new customers" percentage values? I also do not want to use "fold".

{ "autosize":"fit",
  "title": {"text": "a layered chart using Vega-Lite", "frame": "group"},
  "data": {
        "name": "thedata",
        "values": [
          {"month": "Jan" , "sales": 8000, "by new customers": 0.2},
          {"month": "Feb" , "sales": 8200, "by new customers": 0.21},
          {"month": "Mar" , "sales": 8700, "by new customers": 0.3},
          {"month": "Apr" , "sales": 9000, "by new customers": 0.33},
          {"month": "May" , "sales": 10000, "by new customers": 0.4},
          {"month": "Jun" , "sales": 11000, "by new customers": 0.41},
          {"month": "Jul" , "sales": 11200, "by new customers": 0.38},
          {"month": "Aug" , "sales": 12000, "by new customers": 0.36},
          {"month": "Sep" , "sales": 13000, "by new customers": 0.32},
          {"month": "Oct" , "sales": 13400, "by new customers": 0.28},
          {"month": "Nov" , "sales": 13800, "by new customers": 0.2},
          {"month": "Dec" , "sales": 1000, "by new customers": 0.2}
        ]
    },
    "repeat": {
    "layer": ["sales", "by new customers"]
    },
    "spec": {
    "mark": "line",
    "encoding": {
      "x": {
        "field": "month",
        "type": "nominal",
        "sort": 
            ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
      },
      "y": {
        "field": {"repeat": "layer"},
        "type": "quantitative"
      },
      "color": {
        "datum": {"repeat": "layer"},
        "type": "nominal"
      }
    }
  },
  "resolve": {
    "scale": {
      "y": "independent"
      }
  }
}

Answer 1

This took me some time, there is no secondary y-axis, but there is a legend.

[![enter image description here][1]][1]

I'm using config to "hide" the axisRight, I also use offset in the legend of the color scale to "bridge the space" between the view and the legend.

{ 
  "width": 400,
  "title": {"text": "a layered chart using Vega-Lite", "frame": "group"},

  "data": {
        "name": "thedata",
        "values": [
          {"month": "Jan" , "sales": 8000, "by new customers": 0.2},
          {"month": "Feb" , "sales": 8200, "by new customers": 0.21},
          {"month": "Mar" , "sales": 8700, "by new customers": 0.3},
          {"month": "Apr" , "sales": 9000, "by new customers": 0.33},
          {"month": "May" , "sales": 10000, "by new customers": 0.4},
          {"month": "Jun" , "sales": 11000, "by new customers": 0.41},
          {"month": "Jul" , "sales": 11200, "by new customers": 0.38},
          {"month": "Aug" , "sales": 12000, "by new customers": 0.36},
          {"month": "Sep" , "sales": 13000, "by new customers": 0.32},
          {"month": "Oct" , "sales": 13400, "by new customers": 0.28},
          {"month": "Nov" , "sales": 13800, "by new customers": 0.2},
          {"month": "Dec" , "sales": 1000, "by new customers": 0.2}
        ]
    },
    "repeat": {
      "layer": ["sales", "by new customers"]
    },
    "spec": {
      "mark": "line",
      "encoding": {
        "x": {
          "field": "month",
          "type": "nominal",
          "sort": 
              ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
        },
        "y": {
          "field": {"repeat": "layer"},
          "type": "quantitative"
        },
        "color": {
          "datum": {"repeat": "layer"},
          "scale": {
            "domain": ["sales", "by new customers"],
            "range": ["blue", "orange"]
          },
          "legend": {
              "offset":-15,
             "labelAlign":"left"
          }
        }
      }
  },
  "config": {
    "axisRight": {
      "title":null,
      "titleOpacity": 0,
      "domainOpacity": 0,
      "tickOpacity": 0,
      "labelOpacity": 0
    }
  },
  "resolve": {
    "scale": {"y": "independent"}
  }
}
```
  [1]: https://i.sstatic.net/26nkhCSM.png