Bar and Line Chart

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "An example of Vega visualization that automatically switches between a column chart and a line chart depending on the number of data points",
  "width": 800,
  "height": 400,
  "padding": 35,
  "autosize": "pad",
  "config": {
    "title": {"font": "Tahoma", "fontSize": 18},
    "text": {"font": "Tahoma", "fontSize": 14},
    "axis": {"labelFont": "Tahoma", "labelFontSize": "12", "labelColor": "gray"}
  },
  "signals": [
    {
      "name": "DataPoints",
      "description": "Number of data point to display on the chart",
      "value": 25,
      "bind": {"input": "range", "min": 25, "max": 200, "step": 5}
    },
    {"name": "colorColumn", "value": "#4682b4"},
    {"name": "colorLine", "value": "#4682b4"},
    {"name": "colorText", "value": "#000000"},
    {"name": "interpolation", "value": "basis"}
  ],
  "data": [
    {
      "name": "dataset-raw",
      "transform": [
        {"type": "sequence", "start": 1, "stop": 201, "step": 1, "as": "id"}
      ]
    },
    {
      "name": "dataset",
      "source": "dataset-raw",
      "transform": [
        {"type": "filter", "expr": "datum.id<=DataPoints"},
        {"type": "formula", "expr": "ceil(random()*100)", "as": "value"}
      ]
    },
    {
      "name": "dataset-rect",
      "source": "dataset",
      "transform": [
        {"type": "filter", "expr": "DataPoints<=50"},
        {"type": "collect", "sort": {"field": "id", "order": "ascending"}}
      ]
    },
    {
      "name": "dataset-line",
      "source": "dataset",
      "transform": [
        {"type": "filter", "expr": "DataPoints>50"},
        {"type": "collect", "sort": {"field": "id", "order": "ascending"}}
      ]
    }
  ],
  "scales": [
    {
      "name": "scaleXRect",
      "type": "band",
      "domain": {"data": "dataset-rect", "field": "id", "sort": true},
      "range": [10, {"signal": "width-10"}],
      "padding": 0.05
    },
    {
      "name": "scaleXLine",
      "type": "linear",
      "domain": {"data": "dataset-line", "field": "id", "sort": true},
      "range": [10, {"signal": "width-10"}],
      "zero": false
    },
    {
      "name": "scaleYRect",
      "domain": {"data": "dataset-rect", "field": "value"},
      "domainMax": 100,
      "range": [{"signal": "height"}, 0]
    },
    {
      "name": "scaleYLine",
      "domain": {"data": "dataset-line", "field": "value"},
      "domainMax": 100,
      "range": [{"signal": "height"}, 0]
    }
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "scaleXRect",
      "domain": false,
      "tickCount": 50
    },
    {
      "orient": "bottom",
      "scale": "scaleXLine",
      "domain": false,
      "tickCount": 10
    },
    {
      "orient": "left",
      "scale": "scaleYLine",
      "domain": false,
      "grid": true,
      "ticks": true,
      "labels": true
    }
  ],
  "marks": [
    {
      "name": "rect-columns",
      "type": "rect",
      "from": {"data": "dataset-rect"},
      "encode": {
        "update": {
          "x": {"scale": "scaleXRect", "field": "id"},
          "width": {"scale": "scaleXRect", "band": 1},
          "y": {"scale": "scaleYRect", "field": "value"},
          "y2": {"scale": "scaleYRect", "value": 0},
          "fill": {"signal": "colorColumn"},
          "strokeWidth": {"value": 0}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "rect-columns"},
      "encode": {
        "update": {
          "x": {"signal": "datum.x+datum.width/2"},
          "y": {"field": "y", "offset": -8},
          "align": {"value": "center"},
          "baseline": {"value": "middle"},
          "fill": {"signal": "colorText"},
          "text": {"field": "datum.value"}
        }
      }
    },
    {
      "type": "line",
      "from": {"data": "dataset-line"},
      "encode": {
        "update": {
          "xc": {"scale": "scaleXLine", "field": "id"},
          "y": {"scale": "scaleYLine", "field": "value"},
          "stroke": {"signal": "colorLine"},
          "strokeWidth": {"value": 2},
          "interpolate": {"signal": "interpolation"},
          "strokeOpacity": {"value": 1}
        }
      }
    }
  ]
}