Bar chart

A simple bar chart of values per category.

Spec & Code

Spec

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {
        "category": "A",
        "amount": 28
      },
      {
        "category": "B",
        "amount": 55
      },
      {
        "category": "C",
        "amount": 43
      },
      {
        "category": "D",
        "amount": 91
      },
      {
        "category": "E",
        "amount": 81
      },
      {
        "category": "F",
        "amount": 53
      },
      {
        "category": "G",
        "amount": 19
      },
      {
        "category": "H",
        "amount": 87
      }
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "category",
      "type": "nominal",
      "axis": {
        "labelAngle": 0
      }
    },
    "y": {
      "field": "amount",
      "type": "quantitative"
    }
  }
}

Usage

import { olliVis } from 'olli';
import { VegaLiteAdapter } from 'olli/adapters';

// vlSpec is your Vega-Lite specification (shown above)
const olliSpec = await VegaLiteAdapter(vlSpec);
olliVis(olliSpec, document.getElementById('olli-tree'));