<p>Bar Chart with Selection - uses VegaLite Schema</p>
<cob-chart>
<script type="application/json" slot="config">
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"boston": {
"minWidth": 500,
"chartID": "barChart1",
"defaultSelection": "Fixed Cost"
},
"width": 500,
"height": 500,
"autosize": "fit",
"selection": {
"select": {
"type": "single",
"fields": [
"cabinet"
],
"bind": {
"input": "select",
"element": "#select",
"options": [
"Mayors Cabinet",
"Other",
"Streets"
],
"name": "Select a cabinet: "
}
}
},
"data": {
"name": "cabinetBudgets",
"url": "https://s3.amazonaws.com/public-budget-data/test-data/testData-BarCharts.csv",
"format": {
"parse": {
"budget": "number"
}
}
},
"transform": [{
"filter": {
"selection": "select"
}
},
{
"aggregate": [{
"op": "sum",
"field": "budget",
"as": "budgetSum"
}],
"groupby": [
"cabinet",
"dept"
]
},
{
"calculate": "datum.budgetSum/1000000000",
"as": "budgetSumDivided"
}
],
"mark": "bar",
"encoding": {
"color": {
"value": "#45789C"
},
"y": {
"field": "dept",
"type": "nominal",
"sort": {
"op": "sum",
"field": "budgetSumDivided",
"order": "descending"
},
"axis": {
"title": ""
}
},
"x": {
"aggregate": "sum",
"field": "budgetSumDivided",
"type": "quantitative",
"axis": {
"title": "FY19 Budget",
"grid": true
}
},
"tooltip": [{
"field": "budgetSum",
"type": "quantitative",
"aggregate": "sum",
"format": "$,r",
"title": "Budget"
},
{
"field": "dept",
"type": "nominal",
"title": "Department"
},
{
"field": "cabinet",
"type": "nominal",
"title": "Cabinet"
}
]
},
"config": {
"numberFormat": ".1f",
"title": {
"font": "Montserrat",
"fontSize": 20
},
"axis": {
"labelFont": "Lora",
"labelFontSize": 16,
"labelLimit": 500,
"titleFont": "Montserrat",
"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