Skip to content

Instantly share code, notes, and snippets.

@pratapvardhan pratapvardhan/.block
Last active Feb 10, 2018

Embed
What would you like to do?
Vega-lite: Horizontal Stacked Bar Chart with Labels
license: gpl-3.0

Vega-lite: Horizontal Stacked Bar Chart with Labels

<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.8/vega.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.4/vega-lite.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-rc7/vega-embed.js'></script>
<style>
body { font-family: sans-serif; }
</style>
</head>
<body>
<div id='vis'></div>
<script>
const spec = 'vega-lite-stacked-bar-chart-with-labels.json'
const opts = {
'actions': {export: false, source: false, editor: false},
'renderer': 'svg'}
vegaEmbed('#vis', spec, opts).catch(console.warn)
</script>
</body>
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data": {"url": "https://vega.github.io/editor/data/barley.json"},
"width": 500, "height": 250,
"resolve": {"scale": {"color": "independent"}},
"layer": [
{"mark": "bar",
"encoding": {
"x": {"aggregate": "sum", "field": "yield", "type": "quantitative", "stack": "zero"},
"y": {"field": "variety", "type": "nominal"},
"color": {"field": "site", "type": "nominal"}}
},
{"mark": {"type": "text", "dx": -15, "dy": 3},
"encoding": {
"x": {"aggregate": "sum", "field": "yield", "type": "quantitative", "stack": "zero"},
"y": {"field": "variety", "type": "nominal"},
"color": {"field": "site", "type": "nominal", "scale": {"range": ["white"]}, "legend": null},
"text": {"aggregate": "sum", "field": "yield", "type": "quantitative", "format": ".1f"}}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.