Vega-lite: Horizontal Stacked Bar Chart with Labels
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