Back

Pie chart - flat theme, custom labels

Pie chart example with label customization settings applied: 'fillColor' and 'lineColor'. Flat theme enabled using 'theme: PieChart.themes.flat'

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

        <div id="demo"></div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 

        pc = new PieChart({
            area: { minHeight: 500 },
            container: document.getElementById("demo"),
            data: { url: "https://cpapi.zoomcharts.com/csdd/api/api.php?request=top&mode=json&sequence=mark-model-year&category=b" },
            info: {
                contentsFunction: function (data) {
                    return "" + data.name + " " + data.value + " units";
                }
            },
            theme: PieChart.themes.flat,
            slice: {
                style: {
                    label: { backgroundStyle: { fillColor: "#7fbbb0", lineColor: "#547e79" } }
                },
                styleFunction: function (slice, data) {
                    var logos = { 'maz': 1, 'audi': 1, 'hyundai': 1, 'citroen': 1, 'yamaha': 1, 'kia': 1, 'lexus': 1, 'mercedes-benz': 1, 'honda': 1, 'chrysler': 1, 'dacia': 1, 'lada': 1, 'vw': 1, 'iveco': 1, 'škoda': 1, 'renault': 1, 'bmw': 1, 'chevrolet': 1, 'vaz': 1, 'daf': 1, 'suzuki': 1, 'saab': 1, 'seat': 1, 'kawasaki': 1, 'nissan': 1, 'mazda': 1, 'scania': 1, 'dodge': 1, 'aprilia': 1, 'opel': 1, 'land-rover': 1, 'peugeot': 1, 'mitsubishi': 1, 'volvo': 1, 'fiat': 1, 'jeep': 1, 'alfa-romeo': 1, 'ford': 1, 'toyota': 1, 'subaru': 1, 'man': 1 };
                    var r = /mark=([^@]+)$/;
                    var m;
                    if (data.id && (m = data.id.match(r))) {
                        mark = m[1].toLowerCase();
                        mark = mark.replace(' ', '-');
                        if (logos[mark]) {
                            slice.icon = 'https://zoomcharts.com/templates/default/demo/csdd/' + mark + '.png';
                        }
                    }
                    slice.label.text = data.name + " " + slice.percent.toFixed(1) + "%";
                    slice.label.backgroundStyle = { fillColor: "#7fbbb0", lineColor: "#547e79" };
                }
            },
            pie: {
                innerRadius: 0
            },
            labels: {
                connectorLength: 100
            },
            interaction: {
                resizing: { enabled: false }
            },
            advanced: {
                // required so that the chart can be exported since it uses images from another domain.
                crossOriginHeader: "anonymous"
            }
        });

Data

Data 
//No separate data for this example