A Data representation through simple pie or donut charts is a conventional but apt way to present categorical differentiation.
<div id="pie_chart_1"></div>
<!-- Apex JS -->
<script src="vendors/apexcharts/dist/apexcharts.min.js"></script>
<script src="dist/js/pie-chart-init.js"></script>
/*Basic Chart*/
var options = {
series: [44, 55, 13, 43, 22],
chart: {
width: 380,
type: 'pie',
},
colors: ['#ff0000', '#008FFB', '#e92990', '#c02ff3', '#7429f8'],
labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
};
var chart = new ApexCharts(document.querySelector("#pie_chart_1"), options);
chart.render();
<div id="pie_chart_2"></div>
/*Donut Chart*/
var options1 = {
series: [44, 55, 41, 17, 15],
chart: {
type: 'donut',
width: 380,
},
colors: ['#ff0000', '#008FFB', '#e92990', '#c02ff3', '#7429f8'],
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
};
var chart1 = new ApexCharts(document.querySelector("#pie_chart_2"), options1);
chart1.render();
<div id="pie_chart_3"></div>
/*Donut Update*/
var options2 = {
series: [44, 55, 13, 33],
chart: {
width: 380,
type: 'donut',
},
dataLabels: {
enabled: false
},
colors: ['#ff0000', '#008FFB', '#e92990', '#c02ff3', '#7429f8'],
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
show: false
}
}
}],
legend: {
position: 'right',
offsetY: 0,
height: 230,
}
};
var chart2 = new ApexCharts(document.querySelector("#pie_chart_3"), options2);
chart2.render();
function appendData() {
var arr = chart2.w.globals.series.slice()
arr.push(Math.floor(Math.random() * (100 - 1 + 1)) + 1)
return arr;
}
function removeData() {
var arr = chart2.w.globals.series.slice()
arr.pop()
return arr;
}
function randomize() {
return chart2.w.globals.series.map(function() {
return Math.floor(Math.random() * (100 - 1 + 1)) + 1
})
}
function reset() {
return options.series
}
document.querySelector("#randomize").addEventListener("click", function() {
chart2.updateSeries(randomize())
})
document.querySelector("#add").addEventListener("click", function() {
chart2.updateSeries(appendData())
})
document.querySelector("#remove").addEventListener("click", function() {
chart2.updateSeries(removeData())
})
document.querySelector("#reset").addEventListener("click", function() {
chart2.updateSeries(reset())
})
<div id="pie_chart_4"></div>
/*Monochrome Pie*/
var options3 = {
series: [25, 15, 44, 55, 41, 17],
chart: {
width: 380,
type: 'pie',
},
labels: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
theme: {
monochrome: {
enabled: true,
color: '#ff0000',
},
},
plotOptions: {
pie: {
dataLabels: {
offset: -5
}
}
},
title: {
text: "Number of leads"
},
dataLabels: {
formatter(val, opts) {
const name = opts.w.globals.labels[opts.seriesIndex]
return [name, val.toFixed(1) + '%']
}
},
legend: {
show: false
}
};
var chart3 = new ApexCharts(document.querySelector("#pie_chart_4"), options3);
chart3.render();
<div id="pie_chart_5"></div>
/*Gradient Donut*/
var options4 = {
series: [44, 55, 41, 17, 15],
chart: {
width: 380,
type: 'donut',
},
dataLabels: {
enabled: false
},
colors: ['#ff0000', '#008FFB', '#e92990', '#c02ff3', '#7429f8'],
fill: {
type: 'gradient',
},
legend: {
formatter: function(val, opts) {
return val + " - " + opts.w.globals.series[opts.seriesIndex]
}
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
};
var chart4 = new ApexCharts(document.querySelector("#pie_chart_5"), options4);
chart4.render();