Comparison

Vertical Bar Chart

Classic vertical bars for categorical comparisons. Categories on the x-axis, values on the y-axis.

Best For

Comparing values across a small number of categories.

Live Demo

Usage

import { buildChartHtml } from 'dolex/html';

const html = buildChartHtml({
  "pattern": "bar",
  "title": "Quarterly Revenue by Product",
  "data": [
    {
      "product": "Widget A",
      "revenue": 48200
    },
    {
      "product": "Widget B",
      "revenue": 35800
    },
    {
      "product": "Widget C",
      "revenue": 62100
    },
    {
      "product": "Widget D",
      "revenue": 29400
    },
    {
      "product": "Widget E",
      "revenue": 51700
    },
    {
      "product": "Widget F",
      "revenue": 18900
    }
  ],
  "encoding": {
    "x": {
      "field": "product",
      "title": "Product"
    },
    "y": {
      "field": "revenue",
      "title": "Revenue ($)"
    }
  },
  "config": {
    "sortBy": "value",
    "sortOrder": "descending"
  }
});