Get certified in Microsoft Fabric—for free! For a limited time, the Microsoft Fabric Community team will be offering free DP-600 exam vouchers. Prepare now
Hi All,
just starting learning vega lite and using Deneb to customize vituals, there is tutorial "Let's Make A Bar Chart Tutorial" to change bar chart from vertical to horizontal , tried a few hours and could not get it work, please help.
Tutorial and json code link is as below
https://vega.github.io/vega/tutorials/bar-chart/
{ "$schema": "https://vega.github.io/schema/vega/v5.json", "width": 400, "height": 200, "padding": 5, "data": [ { "name": "table", "values": [ {"category": "A", "amount": 28}, {"category": "B", "amount": 55}, {"category": "C", "amount": 43}, {"category": "D", "amount": 91}, {"category": "E", "amount": 81}, {"category": "F", "amount": 53}, {"category": "G", "amount": 19}, {"category": "H", "amount": 87} ] } ], "signals": [ { "name": "tooltip", "value": {}, "on": [ {"events": "rect:mouseover", "update": "datum"}, {"events": "rect:mouseout", "update": "{}"} ] } ], "scales": [ { "name": "xscale", "type": "band", "domain": {"data": "table", "field": "category"}, "range": "width", "padding": 0.05, "round": true }, { "name": "yscale", "domain": {"data": "table", "field": "amount"}, "nice": true, "range": "height" } ], "axes": [ { "orient": "bottom", "scale": "xscale" }, { "orient": "left", "scale": "yscale" } ], "marks": [ { "type": "rect", "from": {"data":"table"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "category"}, "width": {"scale": "xscale", "band": 1}, "y": {"scale": "yscale", "field": "amount"}, "y2": {"scale": "yscale", "value": 0} }, "update": { "fill": {"value": "steelblue"} }, "hover": { "fill": {"value": "red"} } } }, { "type": "text", "encode": { "enter": { "align": {"value": "center"}, "baseline": {"value": "bottom"}, "fill": {"value": "#333"} }, "update": { "x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5}, "y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2}, "text": {"signal": "tooltip.amount"}, "fillOpacity": [ {"test": "isNaN(tooltip.amount)", "value": 0}, {"value": 1} ] } } } ] }
Solved! Go to Solution.
Hey @Walter_W2022 this is actually Vega, which is lower level and has a steeper learning curve than Vega-Lite. I can certainly help with this, but since you mentioned Vega-Lite in your original post, maybe you'd prefer to follow this tutorial where they actually do what you're after in part of it, but just in Vega-Lite.
EDIT
Just in case you did want to stick with Vega, here is a diff showing one way to update the spec to achieve the change that you are trying to accomplish. The left side is the original and the right side is the updated version.
To be able to see the spec in the editor, I've also included a gist here.
If this is enough to get you going please consider liking this reply and choosing it as the solution. Otherwise, I'm happy to help further.
Thank you Madison for your great help, I think I made a few mistakes
1. I did not realise this is vega instead of vega lite
2. when I changed from x and xscale to y, I forgot to change from width to height
also, need your help to have a look above the link you provided cannot be accessed due to security reason, would you please share within the post? thanks again @giammariam
Sorry the diff link isn't working. Here's screenshots of the diffs (apologies for the screenshot quality):
Here is the spec, let me know if this helps.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 200,
"padding": 5,
"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43},
{"category": "D", "amount": 91},
{"category": "E", "amount": 81},
{"category": "F", "amount": 53},
{"category": "G", "amount": 19},
{"category": "H", "amount": 87}
]
}
],
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "yscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "height",
"padding": 0.05,
"round": true
},
{
"name": "xscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "width"
}
],
"axes": [
{"orient": "bottom", "scale": "xscale"},
{"orient": "left", "scale": "yscale"}
],
"marks": [
{
"type": "rect",
"from": {"data": "table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "amount"},
"x2": {"scale": "xscale", "value": 0},
"y": {"scale": "yscale", "field": "category"},
"height": {"scale": "yscale", "band": 1}
},
"update": {"fill": {"value": "steelblue"}},
"hover": {"fill": {"value": "red"}}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "left"},
"baseline": {"value": "middle"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.amount", "offset": 2},
"y": {"scale": "yscale", "signal": "tooltip.category", "band": 0.5},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "isNaN(tooltip.amount)", "value": 0},
{"value": 1}
]
}
}
}
],
"config": {}
}
Sorry the diff link isn't working. Here's screenshots of the diffs (apologies for the screenshot quality):
Here is the spec, let me know if this helps.
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 200,
"padding": 5,
"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43},
{"category": "D", "amount": 91},
{"category": "E", "amount": 81},
{"category": "F", "amount": 53},
{"category": "G", "amount": 19},
{"category": "H", "amount": 87}
]
}
],
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "yscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "height",
"padding": 0.05,
"round": true
},
{
"name": "xscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "width"
}
],
"axes": [
{"orient": "bottom", "scale": "xscale"},
{"orient": "left", "scale": "yscale"}
],
"marks": [
{
"type": "rect",
"from": {"data": "table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "amount"},
"x2": {"scale": "xscale", "value": 0},
"y": {"scale": "yscale", "field": "category"},
"height": {"scale": "yscale", "band": 1}
},
"update": {"fill": {"value": "steelblue"}},
"hover": {"fill": {"value": "red"}}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "left"},
"baseline": {"value": "middle"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.amount", "offset": 2},
"y": {"scale": "yscale", "signal": "tooltip.category", "band": 0.5},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "isNaN(tooltip.amount)", "value": 0},
{"value": 1}
]
}
}
}
],
"config": {}
}
Thank you Madison, appreciated you help. 😀
Hey @Walter_W2022 this is actually Vega, which is lower level and has a steeper learning curve than Vega-Lite. I can certainly help with this, but since you mentioned Vega-Lite in your original post, maybe you'd prefer to follow this tutorial where they actually do what you're after in part of it, but just in Vega-Lite.
EDIT
Just in case you did want to stick with Vega, here is a diff showing one way to update the spec to achieve the change that you are trying to accomplish. The left side is the original and the right side is the updated version.
To be able to see the spec in the editor, I've also included a gist here.
If this is enough to get you going please consider liking this reply and choosing it as the solution. Otherwise, I'm happy to help further.
Thank you Madison for your great help, I think I made a few mistakes
1. I did not realise this is vega instead of vega lite
2. when I changed from x and xscale to y, I forgot to change from width to height
also, need your help to have a look above the link you provided cannot be accessed due to security reason, would you please share within the post? thanks again @giammariam
Check out the October 2024 Power BI update to learn about new features.
Learn from experts, get hands-on experience, and win awesome prizes.
User | Count |
---|---|
111 | |
108 | |
108 | |
93 | |
61 |
User | Count |
---|---|
169 | |
138 | |
135 | |
102 | |
86 |