jsonchartsvisualizationvega-lite

Set the x axis limits (min and max) on categorical scale

How can I set the x limits (x min and x max) values on a categorical scale? I want to limit the space in the image below to have no white space.

enter image description here

MWE

{
  "data": {
    "values": [
      {
          "__row__": 0,
          "calendar_month_year": "Dec-23",
          "concentration_risk_monthly": 0.51
      },
      {
          "__row__": 1,
          "calendar_month_year": "Jan-24",
          "concentration_risk_monthly": 0.5
      },
      {
          "__row__": 2,
          "calendar_month_year": "Feb-24",
          "concentration_risk_monthly": 0.27
      },
      {
          "__row__": 3,
          "calendar_month_year": "Mar-24",
          "concentration_risk_monthly": 0.22
      },
      {
          "__row__": 4,
          "calendar_month_year": "Apr-24",
          "concentration_risk_monthly": 0.25
      },
      {
          "__row__": 5,
          "calendar_month_year": "May-24",
          "concentration_risk_monthly": 0.22
      }
    ]
  },
  "mark": {
    "type": "area",
    "point": {"size": 70},
    "color": {
      "x1": 1,
      "y1": 1,
      "x2": 1,
      "y2": 0,
      "gradient": "linear",
      "stops": [
        {"offset": 0.0, "color": "#00800166"},
        {"offset": 0.26, "color": "#F7B50066"},
        {"offset": 0.57, "color": "#A9281F66"},        
        {"offset": 1.0, "color": "#A9281F66"}
      ]
    }
  },
  "encoding": {
    "x": {
      "field": "calendar_month_year",
      "type": "ordinal",
      "sort": {"field": "__row__"},
      "point": true,
      "axis": {
        "title": null
      }
    },
    "y": {
      "field": "concentration_risk_monthly",
      "type": "quantitative",
      "axis": {
        "title": null
      }
    }
  }
}
Solution

  • Set a scale with padding zero:

    enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 600,
  "data": {
    "values": [
      {
        "__row__": 0,
        "calendar_month_year": "Dec-23",
        "concentration_risk_monthly": 0.51
      },
      {
        "__row__": 1,
        "calendar_month_year": "Jan-24",
        "concentration_risk_monthly": 0.5
      },
      {
        "__row__": 2,
        "calendar_month_year": "Feb-24",
        "concentration_risk_monthly": 0.27
      },
      {
        "__row__": 3,
        "calendar_month_year": "Mar-24",
        "concentration_risk_monthly": 0.22
      },
      {
        "__row__": 4,
        "calendar_month_year": "Apr-24",
        "concentration_risk_monthly": 0.25
      },
      {
        "__row__": 5,
        "calendar_month_year": "May-24",
        "concentration_risk_monthly": 0.22
      }
    ]
  },
  "mark": {
    "type": "area",
    "point": {"size": 70},
    "color": {
      "x1": 1,
      "y1": 1,
      "x2": 1,
      "y2": 0,
      "gradient": "linear",
      "stops": [
        {"offset": 0, "color": "#00800166"},
        {"offset": 0.26, "color": "#F7B50066"},
        {"offset": 0.57, "color": "#A9281F66"},
        {"offset": 1, "color": "#A9281F66"}
      ]
    }
  },
  "encoding": {
    "x": {
      "field": "calendar_month_year",
      "type": "ordinal",
      "sort": {"field": "__row__"},
      "axis": {"title": null},
      "scale": {"padding": 0}
    },
    "y": {
      "field": "concentration_risk_monthly",
      "type": "quantitative",
      "axis": {"title": null}
    }
  }
}