Hello, this article is about how we can create a pie chart using Highchart in js. Pie charts are used to draw pie charts. Pie charts are very popular for showing a compact overview of a composition or comparison. Although they can be more difficult to read than bar charts, they remain a popular choice for small datasets.
CDN for using High chart
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
Create a HTML file i.e, piechart.html and use below code-
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-BrahmaDescription">
Hello, This is a pie chart created by Brahma Prakash Shukla.
</p>
</figure>
Now, create a CSS file for styling the pie chart.
.highcharts-figure,
.highcharts-data-table table {
min-width: 320px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
input[type="number"] {
min-width: 50px;
}
After that, create a JS file for showing data in pie chart.
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Example Of Pie Chart.'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'x',
y: 70.67,
sliced: true,
selected: true
}, {
name: 'y',
y: 14.77
}, {
name: 'z',
y: 4.86
}, {
name: 'a',
y: 2.63
}, {
name: 'b',
y: 1.53
}, {
name: 'c',
y: 1.40
}, {
name: 'd',
y: 0.84
}, {
name: 'e',
y: 0.51
}, {
name: 'f',
y: 2.6
}]
}]
});
Join the conversation! Your thoughts help the community grow.