<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>

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.

Properties

Property Attribute Description Type Default
config config any undefined

Built with StencilJS