vega-litevegavega-lite-apivega-embed

How i make bars inside in multiple layer in Vegalite chart


I am trying to create a bar chart having multiple bar with dual y axis in time series data. Issue is that when we try to create mutilpe bar and use xoffset the bar ran out of the canvas of chart. Editor link

enter image description here

I want both bar must be cover inside canvas irrespective of data count


Solution

  • Try setting a rangeMax.

    enter image description here

    {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "description": "Line chart with conditional axis ticks, labels, and grid.",
      "data": {
        "values": [
          {
            "symbol": "GOOG",
            "date": "Jan 1 2006",
            "previous": 432.66,
            "current": 235
          },
          {
            "symbol": "GOOG",
            "date": "Feb 1 2006",
            "previous": 362.62,
            "current": 205
          },
          {"symbol": "GOOG", "date": "Mar 1 2006", "previous": 390, "current": 250},
          {
            "symbol": "GOOG",
            "date": "Apr 1 2006",
            "previous": 417.94,
            "current": 215
          },
          {
            "symbol": "GOOG",
            "date": "May 1 2006",
            "previous": 371.82,
            "current": 225
          },
          {
            "symbol": "GOOG",
            "date": "Jun 1 2006",
            "previous": 419.33,
            "current": 205
          },
          {
            "symbol": "GOOG",
            "date": "Jul 1 2006",
            "previous": 386.6,
            "current": 215
          },
          {
            "symbol": "GOOG",
            "date": "Aug 1 2006",
            "previous": 378.53,
            "current": 250
          },
          {
            "symbol": "GOOG",
            "date": "Sep 1 2006",
            "previous": 401.9,
            "current": 255
          },
          {
            "symbol": "GOOG",
            "date": "Oct 1 2006",
            "previous": 476.39,
            "current": 235
          },
          {
            "symbol": "GOOG",
            "date": "Nov 1 2006",
            "previous": 484.81,
            "current": 248
          },
          {
            "symbol": "GOOG",
            "date": "Dec 1 2006",
            "previous": 460.48,
            "current": 259
          },
          {
            "symbol": "GOOG",
            "date": "Jan 1 2007",
            "previous": 501.5,
            "current": 300
          },
          {
            "symbol": "GOOG",
            "date": "Feb 1 2007",
            "previous": 449.45,
            "current": 310
          },
          {
            "symbol": "GOOG",
            "date": "Mar 1 2007",
            "previous": 458.16,
            "current": 315
          },
          {
            "symbol": "GOOG",
            "date": "Apr 1 2007",
            "previous": 471.38,
            "current": 320
          }
        ]
      },
      "autosize": {"type": "fit", "contains": "padding"},
      "width": 1200,
      "encoding": {
        "x": {
          "field": "date",
          "type": "temporal",
          "scale": {"nice": false, "rangeMax":980},
          "axis": {
            "labelAlign": "left",
            "labelExpr": "[timeFormat(datum.value, '%b'), timeFormat(datum.value, '%m') == '01' ? timeFormat(datum.value, '%Y') : '']",
            "labelOffset": 1,
            "labelPadding": {
              "condition": {
                "test": {"field": "value", "timeUnit": "month", "equal": 1},
                "value": -24
              },
              "value": 0
            },
            "tickSize": {
              "condition": {
                "test": {"field": "value", "timeUnit": "month", "equal": 1},
                "value": 30
              },
              "value": 2
            }
          }
        }
      },
      "layer": [
        {
          "mark": {"type": "bar", "width": 15, "xOffset": 10},
          "encoding": {
            "y": {"field": "previous", "type": "quantitative"},
            "color": {"datum": "Previous Period", "scale": {"range": ["orange"]}}
          }
        },
        {
          "mark": {"type": "bar", "width": 15},
          "encoding": {
            "y": {"field": "current", "type": "quantitative"},
            "color": {"datum": " Current Period", "scale": {"range": ["#D3D3D3"]}}
          }
        }
      ],
      "resolve": {"scale": {"color": "independent", "y": "independent"}},
      "config": {"axis": {"domainColor": "#ddd", "tickColor": "#ddd"}}
    }