Back

Color modes: list, gradient, proportional gradient

Pie chart with different 'colorDistribution' settings - 'list', which will apply color codes from a list, 'gradient', which will apply derived shades from a base color, and 'gradientProportional', which derives shades based on slice size. Switch between modes to see the difference.

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>
        <label for="l"><input type="radio" id="l" name="g" value="list" checked="checked">list</label>
        <label for="g"><input type="radio" id="g" name="g" value="gradient">gradient</label>
        <label for="gp" ><input type="radio" id="gp" name="g" value="pgradien">proportional gradient</label>
    </div>
    <div class="chart-row">
        <div id="demo1" class="demo">
        </div>
        <div id="demo2" class="demo">
        </div>
    </div>
</div>

CSS

CSS 
label {
    display: block; 
    margin:5px;
    input {
        margin-right:5px;
    }
}
.chart-row {
    display:flex; 
    flex-direction: row; 
    flex-wrap: nowrap;
    div.demo {
        width:100%;
   }
}

JavaScript

JavaScript 
let col = [
	"#F8E7DE",
	"#FD98C9",
	"#8B8C01",
	"#6CC6B0",
	"#070063",
	"#d5429b",
	"#6f52b8",
	"#1c7cd5",
	"#56b9f7",
	"#0ae8eb"
];

customCol = [
	"#2fc32f",
	"#b0dc0b",
	"#eab404",
	"#de672c",
	"#ec2e2e",
	"#d5429b",
	"#6f52b8",
	"#1c7cd5",
	"#56b9f7",
	"#0ae8eb"
];

var chart = new PieChart({
    container:document.getElementById("demo1"),
    area: { height: 350 },
    pie:{style:{
            fillColor: "transparent",
            sliceColors: col,
            colorDistribution: "list"
    }},
    data: { url: "/dvsl/data/pie-chart/browsers.json" },
    labels:{placement:"wrap"}
});

var chartCustom = new PieChart({
    container:document.getElementById("demo2"),
    area: { height: 350 },
    pie:{style:{
        fillColor: "transparent",
        colorDistribution: "list"
    }},
    data: { url: "/dvsl/data/pie-chart/browsers.json" },
    labels:{placement:"wrap"}
});

// using jquery for changing html element

//list type colour distributions
document.getElementById("l").addEventListener("click", function(){
    chart.updateSettings({pie:{style:{sliceColors:col,colorDistribution: "list"}}});
    chartCustom.updateSettings({pie:{style:{sliceColors:customCol,colorDistribution: "list"}}});
});

//gradient type colour distributions
document.getElementById("g").addEventListener("click", function(){
    chart.updateSettings({
        pie:{style: {
            sliceColors: ["red"],
            colorDistribution: "gradient"
        }}});
    chartCustom.updateSettings({
        pie:{style: {
            sliceColors: ["blue"],
            colorDistribution: "gradient"
        }}});
});

//proportional gradient type colour distributions
document.getElementById("gp").addEventListener("click", function(){
    chart.updateSettings({
        pie:{style: {
            sliceColors: ["red"],
            colorDistribution: "gradientProportional"
        }}});
    chartCustom.updateSettings({
        pie:{style: {
            sliceColors: ["blue"],
            colorDistribution: "gradientProportional"
        }}});
});

Data

Data 
//Data too large to output
Download Data