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"
}
}
}
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