Vega-lite bar chart cornerRadiusEnd happening at axis end for negative values

user_11053801 0
Viewed 79

I have plotted the Horizontal Bar Chart with Negative Values, when I rounded the edges, for negative side, its happening at axis side

    {"mark": {"type": "bar", 
           "cornerRadiusEnd": 100
           }},

enter image description here

The top bar roundness should be on the other side, Is it possible to do that https://vega.github.io/vega-lite/examples/bar_negative_horizontal_label.html

Also

"align": {"expr": "datum.mean < 0 ? 'right' : 'left'"},

not working, if mean is less than zero, its in right, but for positive value also its in right enter image description here for

"align": {"expr": "datum.mean < 0 ? 'left' : 'right'"},

enter image description here How to get both values inside?

vega vega-lite
1 Answers

The cornerRadius part should be achievable using expr, I tried doing for fill which is showing different color based on condition but it didn't work for cornerRadius configs, it might be a bug. I think the same thing your tried for align is also working in the bar chart sample you provided, but without your config I cannot understand why the align is not working for you.

You can check the sample code below or the editor:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A bar chart with negative values. We can hide the axis domain line, and instead use a conditional grid color to draw a zero baseline.",
  "data": {
    "values": [
      {"a": "A", "b": -28},
      {"a": "B", "b": 55},
      {"a": "C", "b": -33},
      {"a": "D", "b": 91},
      {"a": "E", "b": 81},
      {"a": "F", "b": 53},
      {"a": "G", "b": -19},
      {"a": "H", "b": 87},
      {"a": "I", "b": 52}
    ]
  },
  "config2": {"mark": {"cornerRadius": 20}},
  "encoding": {
    "y": {
      "field": "a",
      "type": "nominal",
      "axis": {
        "domain": false,
        "ticks": false,
        "labelAngle": 0,
        "labelPadding": 4
      }
    },
    "x": {
      "field": "b",
      "type": "quantitative",
      "scale": {"padding": 20}
    }
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "cornerRadiusEnd": {"expr": "datum.b < 0 ? 0 : 80"},
        "fill": {"expr": "datum.b < 0 ? 'red' : 'green'"},
        "cornerRadiusBottomRight": {"expr": "datum.b < 0 ? 40 : 0"},
        "cornerRadiusTopRight": {"expr": "datum.b < 0 ? 40 : 0"}
      }
    },
    {
      "mark": {
        "type": "text",
        "align": {"expr": "datum.b < 0 ? 'right' : 'left'"},
        "dx": {"expr": "datum.b < 0 ? -2 : 2"}
      },
      "encoding": {"text": {"field": "b", "type": "quantitative"}}
    }
  ]
}
user_77341000
Related