I have this bar chart that's made with Vega-lite (code and pic below).
But I want to customize the legend labels so that instead of videoGame it's Video Game and instead of tv its TV. Is there anyway to do this?
lineChart = vegalite ({
"$schema": ".json",
"width": 560,
"height": 200,
"data": {"values": chartData},
"mark": {"type": "bar"},
"encoding": {
"x": {"field": "year_reference", "type": "temporal", "axis": {"title": "Year", "grid": true}},
"y": {"field": "reference_count_total", "type": "quantitative", "axis": {"title": "References", "grid": true}},
"color": {
"field": "title_type",
"scale": {
"domain": [
"tv",
"movie",
"video",
"videoGame"
],
"range": [
"#9e9ac8",
"#74c476",
"#a6761d",
"#6baed6"
]
},
"legend": true,
"title": "Reference Type"
},
}
})
I have this bar chart that's made with Vega-lite (code and pic below).
But I want to customize the legend labels so that instead of videoGame it's Video Game and instead of tv its TV. Is there anyway to do this?
lineChart = vegalite ({
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 560,
"height": 200,
"data": {"values": chartData},
"mark": {"type": "bar"},
"encoding": {
"x": {"field": "year_reference", "type": "temporal", "axis": {"title": "Year", "grid": true}},
"y": {"field": "reference_count_total", "type": "quantitative", "axis": {"title": "References", "grid": true}},
"color": {
"field": "title_type",
"scale": {
"domain": [
"tv",
"movie",
"video",
"videoGame"
],
"range": [
"#9e9ac8",
"#74c476",
"#a6761d",
"#6baed6"
]
},
"legend": true,
"title": "Reference Type"
},
}
})
Share Improve this question asked Apr 19, 2021 at 23:49 NewToJSNewToJS 2,1014 gold badges37 silver badges67 bronze badges1 Answer
Reset to default 8Just provide labelExpr
in legend, where you can conditionally give the labels depending on your fields data.
Refer the below code or the chart in editor
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 560,
"height": 200,
"data": {
"values": [
{
"title_type": "tv",
"year_reference": "10-12-2012",
"reference_count_total": 10
},
{
"title_type": "movie",
"year_reference": "10-12-2012",
"reference_count_total": 10
},
{
"title_type": "video",
"year_reference": "10-12-2012",
"reference_count_total": 10
},
{
"title_type": "videoGame",
"year_reference": "10-12-2012",
"reference_count_total": 10
}
]
},
"mark": {"type": "bar"},
"encoding": {
"x": {
"field": "year_reference",
"type": "temporal",
"axis": {"title": "Year", "grid": true}
},
"y": {
"field": "reference_count_total",
"type": "quantitative",
"axis": {"title": "References", "grid": true}
},
"color": {
"field": "title_type",
"scale": {
"domain": ["tv", "movie", "video", "videoGame"],
"range": ["#9e9ac8", "#74c476", "#a6761d", "#6baed6"]
},
"legend": {
"labelExpr": "datum.label == 'tv' ? 'Tv' : datum.label == 'movie' ? 'Movie' :datum.label == 'video' ? 'Video' : 'Video Game'"
},
"title": "Reference Type"
}
}
}