<p>Line 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": {
                "chartID": "lineChartSelect",
                "defaultSelection": "Total"
            },
            "title": {
                "text": "Fake data by year",
                "anchor": "start"
            },
            "description": "A simple bar chart with embedded data.",
            "width": 500,
            "height": 500,
            "autosize": "fit",
            "data": {
                "name": "data",
                "url": "https://s3.amazonaws.com/public-budget-data/test-data/testData-lineCharts.csv"
            },
            "transform": [{
                "filter": {
                    "selection": "select"
                }
            }],
            "mark": {
                "type": "line",
                "point": true
            },
            "selection": {
                "select": {
                    "type": "single",
                    "fields": [
                        "group"
                    ],
                    "bind": {
                        "input": "select",
                        "element": "#select",
                        "options": [
                            "Low Income",
                            "Middle Income",
                            "Total"
                        ],
                        "name": "Select a type: "
                    }
                }
            },
            "encoding": {
                "color": {
                    "value": "#45789C"
                },
                "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>