<p>Pie Chart - uses Vega Schema</p>
<cob-chart>
<script type="application/json" slot="config">
{
"$schema": "https://vega.github.io/schema/vega/v4.json",
"boston": {
"chartID": "pieChart"
},
"width": 200,
"height": 200,
"autosize": {
"type": "pad",
"resize": true
},
"padding": 0,
"data": [{
"name": "table",
"url": "https://s3.amazonaws.com/public-budget-data/test-data/testData-PieChart.csv",
"format": {
"type": "csv"
},
"transform": [{
"type": "pie",
"field": "percent",
"sort": true
}]
}],
"scales": [{
"name": "color",
"type": "ordinal",
"range": {
"scheme": "tableau20"
}
}],
"legends": [{
"fill": "color",
"orient": "bottom",
"labelFont": "Lora",
"labelLimit": 500,
"labelFontSize": 14,
"offset": 5
}],
"marks": [{
"type": "arc",
"from": {
"data": "table"
},
"encode": {
"enter": {
"fill": {
"scale": "color",
"field": "expenditure"
},
"x": {
"signal": "width / 2"
},
"y": {
"signal": "height / 2"
},
"tooltip": {
"signal": "{title: datum.expenditure, 'Budget': format(datum.percent/100, '0.0p')}"
}
},
"update": {
"startAngle": {
"field": "startAngle"
},
"endAngle": {
"field": "endAngle"
},
"padAngle": 0,
"innerRadius": {
"signal": "width/4"
},
"outerRadius": {
"signal": "width / 2"
},
"cornerRadius": 0
}
}
}]
}
</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