Back

PieChart with dark theme

Latvian car market composition as of 1st of January, 2013. Source: csdd.lv

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 
let colors = [
	["#13c8d0","#03f6c3"],
	["#7c54fb","#ff62b1"],
	["#1ab0f7","#5ed8ff"],
	["#ea6e2f","#f3c25f"],
	["#b5091f","#f26e6e"],
	["#992d6e","#e36eb5"],
	["#4e3789","#937ccf"],
	["#135593","#58a0e3"],
	["#3d77a4","#88cefa"],
	["#089d9e","#4feff2"],
	["#76af76","#b4ffb4"],
	["#abab5d","#fefe94"],
	["#9ead3c","#dfff88"],
	["#cfac58","#ffefc7"],
	["#e76665","#ffc7c7"],
	["#bb59bb","#f490f4"],
];

let index = 0;

let pc = new PieChart({
    advanced: {
        crossOriginHeader: "Anonymous",
    },
    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.dark,
    slice: {
        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 = '/templates/default/demo/csdd/' + mark + '.png';
                }
            }
            
            slice.label.text = data.name + " " + slice.percent.toFixed(1) + "%";


                if (!slice.data.fillGradient){
                    let color = colors[index][0];
                    if (slice == slice.pie.othersSlice){
                        color = "rgba(128,128,128,1)";
                    }
                    slice.data.fillGradient = [
                        [0, color],
                        [0.2, color],
                        [1, "black"],
                        //[1, colors[index][1]]
                    ];
                    index++;
                    if (index == colors.length){
                        index = 0;
                    }
                }
                slice.fillGradient = slice.data.fillGradient;

        },
        expandableMarkStyle: {
            lineColor: "rgba(255,255,255,0.4)"
        }
    },
    pie: {
        innerRadius: 0.7
    },
    toolbar: {
        enabled: true,
        export: true
    }
});

Data

Data 
//No separate data for this example