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

README.md

New chart

data.json

[
  {
    "a": 1,
    "b": 2
  }
]

index.js

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

base_spec = "https://gist.githubusercontent.com/LakshmiVSeelam/8061a0e1a5a948f3f0611835da8ae093/raw/bfdaf46b986214b7b1b368c24363665b530d0283/horz_bar_config.json"

function draw(data, el, opts) {
  $.getJSON(base_spec, function(spec) {
    var mark_bar = _.filter(spec.marks, function(mark) { return mark.name == 'bars' })[0]
    mark_bar.encode.update.tooltip = {signal: "datum"}
    new vega.View(vega.parse(spec))
      .renderer('svg')
      .tooltip(new vegaTooltip.Handler().call)
      .logLevel(vega.Warn)
      .initialize(el)
      .hover()
      .run()

  }) // getJSON
}

scripts = [
  "https://unpkg.com/[email protected]/build/vega.min.js",
  "https://unpkg.com/[email protected]/build/vega-tooltip.min.js"
]

options = {
}