<p>Simple Line 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": "simpleLineChart"
},
"title": {
"text": "Fake data by year",
"anchor": "start"
},
"description": "A simple bar chart with embedded data.",
"width": 500,
"height": 500,
"autosize": {
"type": "fit",
"resize": "true"
},
"data": {
"name": "data",
"url": "https://s3.amazonaws.com/public-budget-data/test-data/testData-lineCharts.csv"
},
"mark": {
"type": "line",
"point": true
},
"encoding": {
"color": {
"field": "group",
"type": "nominal",
"legend": {
"orient": "bottom",
"labelFont": "Lora",
"labelFontSize": 16,
"titleFont": "Montserrat",
"title": ""
}
},
"y": {
"field": "amount",
"type": "quantitative",
"sort": {
"op": "sum",
"field": "amount",
"order": "descending"
},
"axis": {
"title": ""
}
},
"x": {
"field": "year",
"type": "temporal",
"axis": {
"title": "FY19 Budget",
"grid": true
}
}
},
"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