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