Search code examples
svgscalevega-lite

set maximum value for x-axis in vegalite doesn't work properly

I would like to set my x-axis values to be from 0 to 360 in vegalite horizontal bar chart. Here is my code:

vegalite({
  width: 600,
  height: 300,
  data: { values: AdPitchedInd },
  mark: 'bar',
  encoding: {
    x: {
      aggregate: "sum",
      field: "occurence",
      type: "quantitative",
      scale: { domain: [0, 360] }
    },
    y: { field: "industry", type: "nominal" },
    color: { field: "ad_pitched", type: "nominal" }
  }
})

I have set the scale and domain for x-axis, but it doesn't work. I still have the axis from 0 to 400. When I change it to be 340, then it works but seems to be stuck at 360...

enter image description here

Solution

  • By default, vega-lite choses "nice" visual boundaries for the specified domain, and this sometimes can override even explicitly requested domains. You can turn this behavior off by setting nice=false within the axis scale:

    vegalite({
  width: 600,
  height: 300,
  data: { values: AdPitchedInd },
  mark: 'bar',
  encoding: {
    x: {
      aggregate: "sum",
      field: "occurence",
      type: "quantitative",
      scale: { domain: [0, 360], nice: false }
    },
    y: { field: "industry", type: "nominal" },
    color: { field: "ad_pitched", type: "nominal" }
  }
})