<p>Simple Bar Chart - uses VegaLite schema</p>
<cob-chart id="barChart">
<script type="application/json" slot="config">
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"boston": {
"chartID": "barChart",
"minWidth": 600
},
"height": 600,
"width": 500,
"autosize": "fit",
"data": {
"url": "https://s3.amazonaws.com/public-budget-data/test-data/testData-BarCharts.csv",
"name": "cabinetBudgets",
"format": {
"parse": {
"budget": "number"
}
}
},
"transform": [{
"aggregate": [{
"op": "sum",
"field": "budget",
"as": "budgetSum"
}],
"groupby": [
"cabinet"
]
},
{
"calculate": "datum.budgetSum/1000000000",
"as": "budgetSumDivided"
}
],
"encoding": {
"y": {
"field": "cabinet",
"type": "nominal",
"sort": {
"op": "sum",
"field": "budgetSumDivided",
"order": "descending"
},
"axis": {
"title": ""
}
},
"x": {
"aggregate": "sum",
"field": "budgetSumDivided",
"type": "quantitative",
"axis": {
"title": "FY19 Budget (dollars in billions)",
"grid": true
}
},
"tooltip": [{
"field": "cabinet",
"type": "nominal",
"title": "Cabinet"
},
{
"field": "budgetSum",
"type": "quantitative",
"aggregate": "sum",
"format": "$,",
"title": "Budget (dollars in billions)"
}
]
},
"layer": [{
"mark": "bar",
"encoding": {
"color": {
"value": "#45789C"
}
}
},
{
"mark": {
"type": "text",
"align": "left",
"baseline": "middle",
"dx": 3,
"font": "Lora",
"fontSize": 12
},
"encoding": {
"text": {
"field": "budgetSum",
"type": "quantitative",
"format": "$,r"
}
}
}
],
"config": {
"numberFormat": ".1f",
"title": {
"font": "Montserrat",
"fontSize": 20
},
"axis": {
"labelFont": "Lora",
"labelFontSize": 16,
"labelLimit": 500,
"titleFont": "Lora",
"titleFontSize": 16,
"titleFontWeight": "normal",
"titlePadding": 15
}
}
}
</script>
</cob-chart>
This component uses Vega and VegaLite to render charts on a boston.gov page.
More documentation can be found in the Digital Team’s GitBook space.
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
config |
config |
any |
undefined |
Built with StencilJS