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