Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

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

Reply
Walter_W2022
Resolver II
Resolver II

Change a vertical bar chart to a horizontal bar chart using vega lite in Deneb

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/

 

wangbt89_0-1679052417899.png

{
  "$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}
          ]
        }
      }
    }
  ]
}

 

3 ACCEPTED SOLUTIONS
giammariam
Super User
Super User

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.



Madison Giammaria
Proud to be a Super User 😄
LinkedIn

Do you frequently use Deneb to provide insights to your stakeholders? Have you considered sponsoring this free and open source custom visual? More info here!

View solution in original post

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

wangbt89_0-1679090698462.png

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 

https://www.diffchecker.com/o5IoQcLq/

View solution in original post

giammariam
Super User
Super User

Sorry the diff link isn't working. Here's screenshots of the diffs (apologies for the screenshot quality):

giammariam_0-1679091509811.png

giammariam_2-1679091739716.png

 

 

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

 



Madison Giammaria
Proud to be a Super User 😄
LinkedIn

Do you frequently use Deneb to provide insights to your stakeholders? Have you considered sponsoring this free and open source custom visual? More info here!

View solution in original post

4 REPLIES 4
giammariam
Super User
Super User

Sorry the diff link isn't working. Here's screenshots of the diffs (apologies for the screenshot quality):

giammariam_0-1679091509811.png

giammariam_2-1679091739716.png

 

 

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

 



Madison Giammaria
Proud to be a Super User 😄
LinkedIn

Do you frequently use Deneb to provide insights to your stakeholders? Have you considered sponsoring this free and open source custom visual? More info here!

Thank you Madison, appreciated you help. 😀

giammariam
Super User
Super User

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.



Madison Giammaria
Proud to be a Super User 😄
LinkedIn

Do you frequently use Deneb to provide insights to your stakeholders? Have you considered sponsoring this free and open source custom visual? More info here!

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

wangbt89_0-1679090698462.png

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 

https://www.diffchecker.com/o5IoQcLq/

Helpful resources

Announcements
OCT PBI Update Carousel

Power BI Monthly Update - October 2024

Check out the October 2024 Power BI update to learn about new features.

September Hackathon Carousel

Microsoft Fabric & AI Learning Hackathon

Learn from experts, get hands-on experience, and win awesome prizes.

October NL Carousel

Fabric Community Update - October 2024

Find out what's new and trending in the Fabric Community.