<p>Grouped Bar Chart - uses VegaLite schema</p>
<cob-chart>
<script type="application/json" slot="config">
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"boston": {
"chartID": "groupedBarSelect1",
"minWidth": 500,
"defaultSelection": "City Clerk"
},
"height": 400,
"width": 10,
"data": {
"name": "data",
"url": "https://s3.amazonaws.com/public-budget-data/test-data/testData-BarCharts.csv"
},
"transform": [{
"filter": "datum.dept == 'City Clerk'"
}],
"mark": {
"type": "bar"
},
"encoding": {
"column": {
"field": "year",
"type": "ordinal",
"title": "",
"header": {
"labelFontSize": 14,
"labelFont": "Lora"
}
},
"color": {
"field": "program",
"type": "nominal",
"legend": {
"orient": "bottom",
"labelFont": "Lora",
"labelFontSize": 16,
"labelLimit": 500,
"titleFont": "Montserrat",
"title": ""
}
},
"y": {
"field": "budget",
"type": "quantitative",
"axis": {
"title": ""
}
},
"x": {
"field": "program",
"type": "nominal",
"sort": {
"op": "sum",
"field": "budget",
"order": "descending"
},
"axis": {
"title": "",
"grid": false,
"labels": false,
"ticks": false
}
}
},
"config": {
"point": {
"size": 60
},
"numberFormat": "s",
"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