Created with Gramex Charts. Visit at https://gramener.com/gramexcharts

README.md

Horizontal bar chart

data.json

[
{
  "category": "cat1",
  "value": 15
},
{
  "category": "cat2",
  "value": 85
},
{
  "category": "cat3",
  "value": 62
},
{
  "category": "cat4",
  "value": 54
}
]

index.js

data = {
  // JSON or a CSV endpoint
  url: "https://gist.githubusercontent.com/LakshmiVSeelam/9f8dedc6018457c40e91cac9009e0951/raw/a7d3b580bb01d5770f1806c12e05179f5ee7b02e/horz_bar_data.json"
}

function draw(data, el, opts) {
  base_spec = "https://gist.githubusercontent.com/LakshmiVSeelam/8061a0e1a5a948f3f0611835da8ae093/raw/bfdaf46b986214b7b1b368c24363665b530d0283/horz_bar_config.json"
  $.getJSON(base_spec, function(spec) {
        
  new vega.View(vega.parse(spec))
    .renderer('svg')
    .tooltip(new vegaTooltip.Handler().call)
    .logLevel(vega.Warn)
    .initialize(el)
    .hover()
    .run()
  })
}

scripts = [
   "https://unpkg.com/vega@5.10.1/build/vega.min.js",
   "https://unpkg.com/vega-tooltip@0.22.1/build/vega-tooltip.min.js"
]

options = {
}