Comparison

Horizontal Bar Chart

Horizontal bars for categorical comparisons. Ideal when category labels are long or there are many categories.

Best For

Ranked lists, long labels, many categories.

Live Demo

Usage

import { buildChartHtml } from 'dolex/html';

const html = buildChartHtml({
  "pattern": "bar",
  "title": "Top Programming Languages",
  "data": [
    {
      "language": "Python",
      "popularity": 28.1
    },
    {
      "language": "JavaScript",
      "popularity": 21.3
    },
    {
      "language": "TypeScript",
      "popularity": 12.7
    },
    {
      "language": "Java",
      "popularity": 11.2
    },
    {
      "language": "C#",
      "popularity": 7.8
    },
    {
      "language": "Go",
      "popularity": 4.5
    },
    {
      "language": "Rust",
      "popularity": 3.2
    },
    {
      "language": "Swift",
      "popularity": 2.9
    }
  ],
  "encoding": {
    "x": {
      "field": "language",
      "title": "Language"
    },
    "y": {
      "field": "popularity",
      "title": "Popularity (%)"
    }
  },
  "config": {
    "orientation": "horizontal",
    "sortBy": "value",
    "sortOrder": "descending"
  }
});