Back

Various Themes

PieChart comes with some predefined and ready to use themes. Set them with one line of code. Also you can further modify chart settings as you wish.

Raised

Bevel

Gradient

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>

<div>
    <div style="height:320px">
        <div style="float:right; width: 50%"><p>Raised</p><div id="demo0"></div></div>
        <div style="float:right; width: 50%"><p>Bevel</p><div id="demo1"></div></div>
    </div>
    <div style="height:320px">
        <div style="float:right; width: 50%"><p>Gradient</p><div id="demo2"></div></div>
        <div style="float:right; width: 50%"><p>Flat</p><div id="demo3"></div></div>
    </div>
</div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 

    var charts = [];
    var themes = [
        PieChart.themes.raised,
        PieChart.themes.bevel,
        PieChart.themes.gradient,
        PieChart.themes.flat
    ];

    for (var i = 0; i < 4; i++) {
        charts.push(new PieChart({
            area: {height: null},
            data: {url: "/dvsl/data/pie-chart/browsers.json"},
            container: document.getElementById("demo" + i),
            theme: themes[i]
        }));
    }

Data

Data 
//Data too large to output
Download Data