Skip to content
Vega-Lite templates

Bar with Error Bars

Mean with 95% CI error bars.

Template previewVega-Lite
Rendering…

Make it your own.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"g":"A","v":5.1},{"g":"A","v":4.8},{"g":"A","v":5.5},{"g":"A","v":4.9},{"g":"A","v":5.2},
      {"g":"B","v":6.5},{"g":"B","v":6.8},{"g":"B","v":7.0},{"g":"B","v":6.3},{"g":"B","v":6.9},
      {"g":"C","v":3.2},{"g":"C","v":3.5},{"g":"C","v":3.0},{"g":"C","v":3.8},{"g":"C","v":3.4}
    ]
  },
  "layer": [
    {"mark":{"type":"bar","color":"#bfdbfe"},"encoding":{"x":{"field":"g","type":"nominal"},"y":{"aggregate":"mean","field":"v","type":"quantitative","title":"value"}}},
    {"mark":{"type":"errorbar","extent":"ci"},"encoding":{"x":{"field":"g","type":"nominal"},"y":{"field":"v","type":"quantitative"}}}
  ],
  "width": 320, "height": 260
}