CODEWITHSUNDEEP
visualizationvega-lite
krizzzz
krizzzz

Reputation: 1

How to make minimum value in y axis start from anything other than zero in vega lite

I was trying to make a waterfall chart in Vega lite using the template provided by them. It was working fine until the value in the chart becomes relatively small, the bar mark wont show properly. This can be solved by making the y axis relative instead of starting from zero. (BTW I am new to Vega lite)

In the below specification, Since the value for MPV & Sedan are very small it won't show up in the chart:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"label": "Begin", "amount": 4000},
      {"label": "Sedan", "amount": 2},
      {"label": "SUV", "amount": -500},
      {"label": "Hatchback", "amount": -1200},
      {"label": "MPV", "amount": -1},
      {"label": "CrossOver", "amount": 500},
      {"label": "End", "amount": 0}
    ]
  },
  "width": 500,
  "height":500,
  "transform": [
    {"window": [{"op": "sum", "field": "amount", "as": "sum"}]},
    {"window": [{"op": "lead", "field": "label", "as": "lead"}]},
    {
      "calculate": "datum.lead === null ? datum.label : datum.lead",
      "as": "lead"
    },
    {
      "calculate": "datum.label === 'End' ? 0 : datum.sum - datum.amount",
      "as": "previous_sum"
    },
    {
      "calculate": "datum.label === 'End' ? datum.sum : datum.amount",
      "as": "amount"
    },
    {
      "calculate": "(datum.label !== 'Begin' && datum.label !== 'End' && datum.amount > 0 ? '+' : '') + datum.amount",
      "as": "text_amount"
    },
    {"calculate": "(datum.sum + datum.previous_sum) / 2", "as": "center"},
    {
      "calculate": "datum.sum < datum.previous_sum ? datum.sum : ''",
      "as": "sum_dec"
    },
    {
      "calculate": "datum.sum > datum.previous_sum ? datum.sum : ''",
      "as": "sum_inc"
    }
  ],
  "encoding": {
    "x": {
      "field": "label",
      "type": "ordinal",
      "sort": null,
      "axis": {"labelAngle": 0, "title": "Segment"}
    }
  },
  "layer": [
    {
      "mark": {"type": "bar", "size": 45},
      "encoding": {
        "y": {
          "field": "previous_sum",
          "type": "quantitative",
          "title": "Average Sale"
        },
        "y2": {"field": "sum"},
        "color": {
          "condition": [
            {
              "test": "datum.label === 'Begin' || datum.label === 'End'",
              "value": "#2E8BC0"
            },
            {"test": "datum.sum < datum.previous_sum", "value": "#93c4aa"}
          ],
          "value": "#f78a64"
        }
      }
    },
    {
      "mark": {
        "type": "rule",
        "color": "#404040",
        "opacity": 1,
        "strokeWidth": 2,
        "xOffset": -22.5,
        "x2Offset": 22.5
      },
      "encoding": {
        "x2": {"field": "lead"},
        "y": {"field": "sum", "type": "quantitative"}
      }
    },
    {
      "mark": {"type": "text", "fontWeight": "bold", "baseline": "middle"},
      "encoding": {
        "y": {"field": "center", "type": "quantitative"},
        "text": {"field": "text_amount", "type": "nominal"},
        "color": {
          "condition": [
            {
              "test": "datum.label === 'Begin' || datum.label === 'End'",
              "value": "#FFFFFF"
            }
          ],
          "value": "white"
        }
      }
    }
  ],
  "config": {"text": {"fontWeight": "bold", "color": "#404040"}}
}

I tried the "stack": "None" and "scale": {"zero": false} methods but zero is still there

Upvotes: 0

Views: 122

Answers (1)

APB Reports
APB Reports

Reputation: 2441

I'm not sure that will work in your case. Instead You could hard-code your beginning end ending values in previous_sum like this:

{
"calculate": "datum.label === 'Begin' ? 2200 : datum.label === 'End' ? 2200 : datum.sum - datum.amount",
"as": "previous_sum"
}

Could that be an option? But you probably still won't see the Sedan bar since its value is only 2. I would move the values above the bars and set the font color black. Or set a text condition on color and yOffset if the amount < 40 for example.

Upvotes: 0

Related Questions