Aug 20, 2025
How to Create a Pie Chart in JavaScript with ZoomCharts
Let’s walk through the process of creating a simple pie chart using the PieChart component of ZoomCharts JavaScript library.
Let’s walk through the process of creating a simple pie chart using the PieChart component of ZoomCharts JavaScript library.
In just 3 steps, we’ll go from blank canvas to a fully functional pie chart with multiple drill down levels. We’ll also look at some of the configuration options and how to use them.
For more in-depth info, we also recommend watching our 6-part video tutorial series that covers not just chart configuration, but also event listeners and cross-chart filtering.
This tutorial is a companion piece to our article “Building Smarter JavaScript Pie Charts for Web, Apps, Dashboards and Big Data”, which explores JavaScript pie chart use cases and main considerations for choosing a visualization SDK.
Step 1: Add ZoomCharts to your Project
For this example, we will create a JavaScript pie chart and add it to a blank HTML page for use in web browsers. Here, we will hotlink the library from ZoomCharts CDN – it’s a convenient way to try out the library and experiment with its features, but when deploying in live environments, it’s recommended to host the library on your own storage.
Our Get Started page provides the CDN and download links, the NPM package, and guides on how to integrate with frameworks like React, Next.js, Vue.js and Angular. Start a free 30-day trial or purchase license to use the visuals – you will get access to all ZoomCharts packages, all features and no watermark.
First, embed the ZoomCharts library within the HTML document by adding a <script> tag that points to its location – either our CDN link or the path to your own hosted library.
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>Now, we can reference the library to create as many charts as we want and place them anywhere in the HTML document. The only thing that we will need to provide on our own is configuration for each chart instance – everything else will be referenced from the library. Here, the <script> tag to the library is added to the head, and the body has a <div> tag that references “examplepiechart” – a chart that we created.
Of course, each chart instance must be configured in JavaScript. The ZoomCharts library contains five components, so we selected PieChart with const chart = new ZoomCharts.PieChart. Using a different tag would call other ZoomCharts components, for example, FacetChart, GeoChart, TimeChart, or NetChart.
Within the object, we defined container: “examplepiechart”, so that when we use this id in a <div> tag, the browser knows that this is the script that needs to be executed at that location. So, here’s what our code looks like right now:
<head>
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
</head>
<body>
<h2 align="center">Our Pie Chart</h2>
<div id="examplepiechart"></div>
<script type="text/javascript">
const chart= new ZoomCharts.PieChart({
container: "examplepiechart",
});
</script>
</body>
Something’s missing, right? Exactly – as it is now, the chart will be correctly loaded as a pie chart, but since it has no data to visualize, it will simply appear as a grey donut with nothing to display. In the next step, we will add data, and our JavaScript pie chart will finally take shape.
Step 2: Connect or Add Data
We will also need a data property, which will contain data to be visualized by the pie chart. As long as your data can be parsed in JSON format, it does not matter what database you are using or what backed language you prefer – this includes referencing JSON files, MySQL or MongoDB databases (read more in the Integrations section in our website's header menu), or you preloading the data directly so that is entirely contained within the script. For the former, it will look like this:
"data": [
{ "url": "/exampledataurl/piechartdata.json" }
],
However, for this JavaScript pie chart example, we will use the latter method and provide our data directly in the script. We will use a random example dataset of new car sales in a region (generated by an LLM), which has car makers, models, and sold units. Inherently, this already presents us with two drill down levels – brands and models. The initial view will show the sales per brand, and the user can click to reveal sales per model of that brand.
| Manufacturer | Model | Sales |
|---|---|---|
| Volkswagen | Golf | 154 |
| Volkswagen | Tiguan | 867 |
| Volkswagen | Polo | 232 |
| Volkswagen | Passat | 1032 |
| Volkswagen | ID.4 | 694 |
| Volkswagen | T-Roc | 927 |
| Peugeot | 208 | 102 |
| Peugeot | 2008 | 778 |
| Peugeot | 308 | 269 |
| Peugeot | 3008 | 530 |
| Peugeot | 5008 | 542 |
| Renault | Clio | 257 |
| Renault | Captur | 351 |
| Renault | Megane | 549 |
| Renault | Austral | 235 |
| Renault | Arkana | 765 |
| Renault | Twingo | 169 |
| BMW | 3 Series | 346 |
| BMW | X1 | 479 |
| BMW | 1 Series | 862 |
| BMW | X3 | 626 |
| BMW | 5 Series | 652 |
| BMW | X5 | 329 |
| Mercedes-Benz | A-Class | 496 |
| Mercedes-Benz | C-Class | 667 |
| Mercedes-Benz | GLA | 450 |
| Mercedes-Benz | EQA | 314 |
| Mercedes-Benz | GLC | 640 |
| Mercedes-Benz | EQB | 543 |
| Audi | A3 | 273 |
| Audi | Q3 | 111 |
| Audi | A4 | 665 |
| Audi | Q2 | 245 |
| Audi | Q5 | 183 |
| Audi | A6 | 110 |
| Skoda | Octavia | 132 |
| Skoda | Fabia | 992 |
| Skoda | Karoq | 111 |
| Skoda | Superb | 181 |
| Skoda | Kamiq | 104 |
| Skoda | Enyaq | 624 |
| Fiat | 500 | 333 |
| Fiat | Panda | 346 |
| Fiat | Tipo | 369 |
| Fiat | 600e | 327 |
| Fiat | Doblo | 419 |
| Dacia | Sandero | 1169 |
| Dacia | Duster | 576 |
| Dacia | Jogger | 622 |
| Dacia | Spring | 988 |
| Dacia | Lodgy | 582 |
| Toyota | Yaris | 124 |
| Toyota | Corolla | 1027 |
| Toyota | C-HR | 427 |
| Toyota | RAV4 | 171 |
| Toyota | Aygo X | 1151 |
| Honda | Civic | 220 |
| Honda | CR-V | 321 |
| Honda | HR-V | 257 |
| Honda | Jazz | 181 |
| Honda | e:Ny1 | 232 |
| Hyundai | i10 | 89 |
| Hyundai | i20 | 90 |
| Hyundai | i30 | 229 |
| Hyundai | Tucson | 457 |
| Hyundai | Kona | 97 |
| Hyundai | Bayon | 389 |
| Kia | Ceed | 423 |
| Kia | Sportage | 375 |
| Kia | Picanto | 347 |
| Kia | Stonic | 211 |
| Kia | Niro | 283 |
| Opel | Corsa | 289 |
| Opel | Astra | 369 |
| Opel | Mokka | 398 |
| Opel | Crossland | 190 |
| Opel | Grandland | 386 |
| Seat | Ibiza | 87 |
| Seat | Leon | 450 |
| Seat | Arona | 475 |
| Seat | Ateca | 177 |
| Seat | Tarraco | 165 |
You can provide the data using JSON data structure. Each value may have “subvalues” – that is the next drill down level, and it contains all values within that category. One thing to note is that for PieChart, the top level also must be formatted as “subvalues”, since they are technically subvalues that contribute to the total value (100%).
Here’s a live example where we added the dataset under preloaded: {}. Note that by default, slices will be sorted in the order of the appearance in data; we used sortField: “value” to apply a descending order.
<h3 align="center">New Car Sales (Sample Data)</h3>
<div id="example1"></div>
<script>
const chart = new ZoomCharts.PieChart({
container: "example1",
data: {
preloaded: {
subvalues: [
{
value: 3906,
name: "Volkswagen",
subvalues: [
{ value: 154, name: "Golf" },
{ value: 867, name: "Tiguan" },
{ value: 232, name: "Polo" },
{ value: 1032, name: "Passat" },
{ value: 694, name: "ID.4" },
{ value: 927, name: "T-Roc" }
]
},
{
value: 2221,
name: "Peugeot",
subvalues: [
{ value: 102, name: "208" },
{ value: 778, name: "2008" },
{ value: 269, name: "308" },
{ value: 530, name: "3008" },
{ value: 542, name: "5008" }
]
},
{
value: 2326,
name: "Renault",
subvalues: [
{ value: 257, name: "Clio" },
{ value: 351, name: "Captur" },
{ value: 549, name: "Megane" },
{ value: 235, name: "Austral" },
{ value: 765, name: "Arkana" },
{ value: 169, name: "Twingo" }
]
},
{
value: 3294,
name: "BMW",
subvalues: [
{ value: 346, name: "3 Series" },
{ value: 479, name: "X1" },
{ value: 862, name: "1 Series" },
{ value: 626, name: "X3" },
{ value: 652, name: "5 Series" },
{ value: 329, name: "X5" }
]
},
{
value: 3110,
name: "Mercedes-Benz",
subvalues: [
{ value: 496, name: "A-Class" },
{ value: 667, name: "C-Class" },
{ value: 450, name: "GLA" },
{ value: 314, name: "EQA" },
{ value: 640, name: "GLC" },
{ value: 543, name: "EQB" }
]
},
{
value: 1587,
name: "Audi",
subvalues: [
{ value: 273, name: "A3" },
{ value: 111, name: "Q3" },
{ value: 665, name: "A4" },
{ value: 245, name: "Q2" },
{ value: 183, name: "Q5" },
{ value: 110, name: "A6" }
]
},
{
value: 2144,
name: "Skoda",
subvalues: [
{ value: 132, name: "Octavia" },
{ value: 992, name: "Fabia" },
{ value: 111, name: "Karoq" },
{ value: 181, name: "Superb" },
{ value: 104, name: "Kamiq" },
{ value: 624, name: "Enyaq" }
]
},
{
value: 1794,
name: "Fiat",
subvalues: [
{ value: 333, name: "500" },
{ value: 346, name: "Panda" },
{ value: 369, name: "Tipo" },
{ value: 327, name: "600e" },
{ value: 419, name: "Doblo" }
]
},
{
value: 3937,
name: "Dacia",
subvalues: [
{ value: 1169, name: "Sandero" },
{ value: 576, name: "Duster" },
{ value: 622, name: "Jogger" },
{ value: 988, name: "Spring" },
{ value: 582, name: "Lodgy" }
]
},
{
value: 2900,
name: "Toyota",
subvalues: [
{ value: 124, name: "Yaris" },
{ value: 1027, name: "Corolla" },
{ value: 427, name: "C-HR" },
{ value: 171, name: "RAV4" },
{ value: 1151, name: "Aygo X" }
]
},
{
value: 1211,
name: "Honda",
subvalues: [
{ value: 220, name: "Civic" },
{ value: 321, name: "CR-V" },
{ value: 257, name: "HR-V" },
{ value: 181, name: "Jazz" },
{ value: 232, name: "e:Ny1" }
]
},
{
value: 1351,
name: "Hyundai",
subvalues: [
{ value: 89, name: "i10" },
{ value: 90, name: "i20" },
{ value: 229, name: "i30" },
{ value: 457, name: "Tucson" },
{ value: 97, name: "Kona" },
{ value: 389, name: "Bayon" }
]
},
{
value: 1639,
name: "Kia",
subvalues: [
{ value: 423, name: "Ceed" },
{ value: 375, name: "Sportage" },
{ value: 347, name: "Picanto" },
{ value: 211, name: "Stonic" },
{ value: 283, name: "Niro" }
]
},
{
value: 1632,
name: "Opel",
subvalues: [
{ value: 289, name: "Corsa" },
{ value: 369, name: "Astra" },
{ value: 398, name: "Mokka" },
{ value: 190, name: "Crossland" },
{ value: 386, name: "Grandland" }
]
},
{
value: 1354,
name: "Seat",
subvalues: [
{ value: 87, name: "Ibiza" },
{ value: 450, name: "Leon" },
{ value: 475, name: "Arona" },
{ value: 177, name: "Ateca" },
{ value: 165, name: "Tarraco" }
]
}
]
},
sortField: "value"
}
});
</script>We now have a simple JavaScript pie chart. Since our categories have subvalues (Brand -> Model), the chart automatically enables drill down. For example, the Volkswagen slice shows the total number of VW sales, but if you click on it, it will drill down reveal how many of the total sold VWs were Passats, Golfs, ID.4, T-Rocs, or Tiguans.
The chart subtly indicates that there is a deeper level available with a thin line around the edge; and after drill down, the middle part will show a snapshot of the previous level, so that the user knows where they are. It also functions as a back button. Our dataset has only two levels, but you can create even more levels of drill down based on your provided subvalues.
Step 3: Configuration
At this stage, we have added the JavaScript pie chart to our project and provided data to visualize. Without any other parameters, PieChart will use the default settings. You can override the default settings or enable features like legends or ‘Others’ slice by adding properties to the script and configuring them with your own values – let’s dive in!
Pie, Donut, Gauge Settings
The pie object may contain various properties that define the appearance of the entire chart. By default, PieChart will render a donut chart – it will be completely circular and have a “hole” in the middle. There are many properties available, but in this section, we will focus on the following:
- radius: limits the pie chart’s outer radius; default value is null, which means the chart fills the available area responsively.
- innerRadius: determines the size of the “donut hole” – the value is ratio against the outer radius. Use 0 if you want a pie chart with a solid center.
- innerRadiusWhenDrillDown: use this if you wish to apply a different inner radius when the user has drilled down.
- startAngle and endAngle: by default, PieChart will draw a fully circular chart that starts at 12 o’clock. These values can be used to either rotate the pie chart and set a different starting point, or limit the chart to a semi-circle or a gauge chart. Uses radian values (i.e. 4.71238898038469 for 270°)
Here’s an example of how changing innerRadius will affect the chart. Not including this property will apply the default setting (0.3). The larger the value, the bigger the “donut hole”; use 0 if you want a classic pie chart, or increase this value if you want a JavaScript donut chart.
If a JavaScript gauge chart is what you’re looking for, you can use startAngle and endAngle properties. They set the start and end positions for the chart, and the value is provided in radians (you can convert degrees to radians with a tool like this).
The default value for these properties are -1.5707… and 4.7123…, which will place the start and end of the chart at -90° (-π/2) and 270° (3π/2) accordingly, making it a full circle. One way to use these properties is to rotate the chart – for example, using startAngle: 0, endAngle: 6.2831853072, will move the chart’s start and end point at 3 o’clock.
<h3 align="center">Default startAngle and endAngle</h3>
<div id="example2"></div>
<script>
const chart = new ZoomCharts.PieChart({
container: "example2",
data: {
preloaded: {
subvalues: [
{
value: 3906,
name: "Volkswagen",
subvalues: [
{ value: 154, name: "Golf" },
{ value: 867, name: "Tiguan" },
{ value: 232, name: "Polo" },
{ value: 1032, name: "Passat" },
{ value: 694, name: "ID.4" },
{ value: 927, name: "T-Roc" }
]
},
{
value: 2221,
name: "Peugeot",
subvalues: [
{ value: 102, name: "208" },
{ value: 778, name: "2008" },
{ value: 269, name: "308" },
{ value: 530, name: "3008" },
{ value: 542, name: "5008" }
]
},
{
value: 2326,
name: "Renault",
subvalues: [
{ value: 257, name: "Clio" },
{ value: 351, name: "Captur" },
{ value: 549, name: "Megane" },
{ value: 235, name: "Austral" },
{ value: 765, name: "Arkana" },
{ value: 169, name: "Twingo" }
]
},
{
value: 3294,
name: "BMW",
subvalues: [
{ value: 346, name: "3 Series" },
{ value: 479, name: "X1" },
{ value: 862, name: "1 Series" },
{ value: 626, name: "X3" },
{ value: 652, name: "5 Series" },
{ value: 329, name: "X5" }
]
},
{
value: 3110,
name: "Mercedes-Benz",
subvalues: [
{ value: 496, name: "A-Class" },
{ value: 667, name: "C-Class" },
{ value: 450, name: "GLA" },
{ value: 314, name: "EQA" },
{ value: 640, name: "GLC" },
{ value: 543, name: "EQB" }
]
},
{
value: 1587,
name: "Audi",
subvalues: [
{ value: 273, name: "A3" },
{ value: 111, name: "Q3" },
{ value: 665, name: "A4" },
{ value: 245, name: "Q2" },
{ value: 183, name: "Q5" },
{ value: 110, name: "A6" }
]
},
{
value: 2144,
name: "Skoda",
subvalues: [
{ value: 132, name: "Octavia" },
{ value: 992, name: "Fabia" },
{ value: 111, name: "Karoq" },
{ value: 181, name: "Superb" },
{ value: 104, name: "Kamiq" },
{ value: 624, name: "Enyaq" }
]
},
{
value: 1794,
name: "Fiat",
subvalues: [
{ value: 333, name: "500" },
{ value: 346, name: "Panda" },
{ value: 369, name: "Tipo" },
{ value: 327, name: "600e" },
{ value: 419, name: "Doblo" }
]
},
{
value: 3937,
name: "Dacia",
subvalues: [
{ value: 1169, name: "Sandero" },
{ value: 576, name: "Duster" },
{ value: 622, name: "Jogger" },
{ value: 988, name: "Spring" },
{ value: 582, name: "Lodgy" }
]
},
{
value: 2900,
name: "Toyota",
subvalues: [
{ value: 124, name: "Yaris" },
{ value: 1027, name: "Corolla" },
{ value: 427, name: "C-HR" },
{ value: 171, name: "RAV4" },
{ value: 1151, name: "Aygo X" }
]
},
{
value: 1211,
name: "Honda",
subvalues: [
{ value: 220, name: "Civic" },
{ value: 321, name: "CR-V" },
{ value: 257, name: "HR-V" },
{ value: 181, name: "Jazz" },
{ value: 232, name: "e:Ny1" }
]
},
{
value: 1351,
name: "Hyundai",
subvalues: [
{ value: 89, name: "i10" },
{ value: 90, name: "i20" },
{ value: 229, name: "i30" },
{ value: 457, name: "Tucson" },
{ value: 97, name: "Kona" },
{ value: 389, name: "Bayon" }
]
},
{
value: 1639,
name: "Kia",
subvalues: [
{ value: 423, name: "Ceed" },
{ value: 375, name: "Sportage" },
{ value: 347, name: "Picanto" },
{ value: 211, name: "Stonic" },
{ value: 283, name: "Niro" }
]
},
{
value: 1632,
name: "Opel",
subvalues: [
{ value: 289, name: "Corsa" },
{ value: 369, name: "Astra" },
{ value: 398, name: "Mokka" },
{ value: 190, name: "Crossland" },
{ value: 386, name: "Grandland" }
]
},
{
value: 1354,
name: "Seat",
subvalues: [
{ value: 87, name: "Ibiza" },
{ value: 450, name: "Leon" },
{ value: 475, name: "Arona" },
{ value: 177, name: "Ateca" },
{ value: 165, name: "Tarraco" }
]
}
]
},
sortField: "value"
}
});
</script>
<h3 align="center">startAngle: 0, endAngle: 6.2831853072</h3>
<div id="example2a"></div>
<script>
const chart2 = new ZoomCharts.PieChart({
container: "example2a",
pie: {
startAngle: 0,
endAngle: 6.2831853072
},
data: {
preloaded: {
subvalues: [
{
value: 3906,
name: "Volkswagen",
subvalues: [
{ value: 154, name: "Golf" },
{ value: 867, name: "Tiguan" },
{ value: 232, name: "Polo" },
{ value: 1032, name: "Passat" },
{ value: 694, name: "ID.4" },
{ value: 927, name: "T-Roc" }
]
},
{
value: 2221,
name: "Peugeot",
subvalues: [
{ value: 102, name: "208" },
{ value: 778, name: "2008" },
{ value: 269, name: "308" },
{ value: 530, name: "3008" },
{ value: 542, name: "5008" }
]
},
{
value: 2326,
name: "Renault",
subvalues: [
{ value: 257, name: "Clio" },
{ value: 351, name: "Captur" },
{ value: 549, name: "Megane" },
{ value: 235, name: "Austral" },
{ value: 765, name: "Arkana" },
{ value: 169, name: "Twingo" }
]
},
{
value: 3294,
name: "BMW",
subvalues: [
{ value: 346, name: "3 Series" },
{ value: 479, name: "X1" },
{ value: 862, name: "1 Series" },
{ value: 626, name: "X3" },
{ value: 652, name: "5 Series" },
{ value: 329, name: "X5" }
]
},
{
value: 3110,
name: "Mercedes-Benz",
subvalues: [
{ value: 496, name: "A-Class" },
{ value: 667, name: "C-Class" },
{ value: 450, name: "GLA" },
{ value: 314, name: "EQA" },
{ value: 640, name: "GLC" },
{ value: 543, name: "EQB" }
]
},
{
value: 1587,
name: "Audi",
subvalues: [
{ value: 273, name: "A3" },
{ value: 111, name: "Q3" },
{ value: 665, name: "A4" },
{ value: 245, name: "Q2" },
{ value: 183, name: "Q5" },
{ value: 110, name: "A6" }
]
},
{
value: 2144,
name: "Skoda",
subvalues: [
{ value: 132, name: "Octavia" },
{ value: 992, name: "Fabia" },
{ value: 111, name: "Karoq" },
{ value: 181, name: "Superb" },
{ value: 104, name: "Kamiq" },
{ value: 624, name: "Enyaq" }
]
},
{
value: 1794,
name: "Fiat",
subvalues: [
{ value: 333, name: "500" },
{ value: 346, name: "Panda" },
{ value: 369, name: "Tipo" },
{ value: 327, name: "600e" },
{ value: 419, name: "Doblo" }
]
},
{
value: 3937,
name: "Dacia",
subvalues: [
{ value: 1169, name: "Sandero" },
{ value: 576, name: "Duster" },
{ value: 622, name: "Jogger" },
{ value: 988, name: "Spring" },
{ value: 582, name: "Lodgy" }
]
},
{
value: 2900,
name: "Toyota",
subvalues: [
{ value: 124, name: "Yaris" },
{ value: 1027, name: "Corolla" },
{ value: 427, name: "C-HR" },
{ value: 171, name: "RAV4" },
{ value: 1151, name: "Aygo X" }
]
},
{
value: 1211,
name: "Honda",
subvalues: [
{ value: 220, name: "Civic" },
{ value: 321, name: "CR-V" },
{ value: 257, name: "HR-V" },
{ value: 181, name: "Jazz" },
{ value: 232, name: "e:Ny1" }
]
},
{
value: 1351,
name: "Hyundai",
subvalues: [
{ value: 89, name: "i10" },
{ value: 90, name: "i20" },
{ value: 229, name: "i30" },
{ value: 457, name: "Tucson" },
{ value: 97, name: "Kona" },
{ value: 389, name: "Bayon" }
]
},
{
value: 1639,
name: "Kia",
subvalues: [
{ value: 423, name: "Ceed" },
{ value: 375, name: "Sportage" },
{ value: 347, name: "Picanto" },
{ value: 211, name: "Stonic" },
{ value: 283, name: "Niro" }
]
},
{
value: 1632,
name: "Opel",
subvalues: [
{ value: 289, name: "Corsa" },
{ value: 369, name: "Astra" },
{ value: 398, name: "Mokka" },
{ value: 190, name: "Crossland" },
{ value: 386, name: "Grandland" }
]
},
{
value: 1354,
name: "Seat",
subvalues: [
{ value: 87, name: "Ibiza" },
{ value: 450, name: "Leon" },
{ value: 475, name: "Arona" },
{ value: 177, name: "Ateca" },
{ value: 165, name: "Tarraco" }
]
}
]
},
sortField: "value"
},
});
</script>However, these values do not have to always make a full circle – you can place the start and end points at custom angles to create a gauge chart, half pie chart or other use cases. Here’s an example where we limited our chart to a half pie chart – we set the startAngle = -3.1415926536 (-180°, -π, 9 o’clock) and endAngle = 0 (0°, 0 rad, or 3 o’clock).
<h3 align="center">Gauge (startAngle: pi, endAngle: 0)</h3>
<div id="example3"></div>
<script>
const chart = new ZoomCharts.PieChart({
container: "example3",
pie: {
startAngle: -3.1415926536,
endAngle: 0
},
data: {
preloaded: {
subvalues: [
{
value: 3906,
name: "Volkswagen",
subvalues: [
{ value: 154, name: "Golf" },
{ value: 867, name: "Tiguan" },
{ value: 232, name: "Polo" },
{ value: 1032, name: "Passat" },
{ value: 694, name: "ID.4" },
{ value: 927, name: "T-Roc" }
]
},
{
value: 2221,
name: "Peugeot",
subvalues: [
{ value: 102, name: "208" },
{ value: 778, name: "2008" },
{ value: 269, name: "308" },
{ value: 530, name: "3008" },
{ value: 542, name: "5008" }
]
},
{
value: 2326,
name: "Renault",
subvalues: [
{ value: 257, name: "Clio" },
{ value: 351, name: "Captur" },
{ value: 549, name: "Megane" },
{ value: 235, name: "Austral" },
{ value: 765, name: "Arkana" },
{ value: 169, name: "Twingo" }
]
},
{
value: 3294,
name: "BMW",
subvalues: [
{ value: 346, name: "3 Series" },
{ value: 479, name: "X1" },
{ value: 862, name: "1 Series" },
{ value: 626, name: "X3" },
{ value: 652, name: "5 Series" },
{ value: 329, name: "X5" }
]
},
{
value: 3110,
name: "Mercedes-Benz",
subvalues: [
{ value: 496, name: "A-Class" },
{ value: 667, name: "C-Class" },
{ value: 450, name: "GLA" },
{ value: 314, name: "EQA" },
{ value: 640, name: "GLC" },
{ value: 543, name: "EQB" }
]
},
{
value: 1587,
name: "Audi",
subvalues: [
{ value: 273, name: "A3" },
{ value: 111, name: "Q3" },
{ value: 665, name: "A4" },
{ value: 245, name: "Q2" },
{ value: 183, name: "Q5" },
{ value: 110, name: "A6" }
]
},
{
value: 2144,
name: "Skoda",
subvalues: [
{ value: 132, name: "Octavia" },
{ value: 992, name: "Fabia" },
{ value: 111, name: "Karoq" },
{ value: 181, name: "Superb" },
{ value: 104, name: "Kamiq" },
{ value: 624, name: "Enyaq" }
]
},
{
value: 1794,
name: "Fiat",
subvalues: [
{ value: 333, name: "500" },
{ value: 346, name: "Panda" },
{ value: 369, name: "Tipo" },
{ value: 327, name: "600e" },
{ value: 419, name: "Doblo" }
]
},
{
value: 3937,
name: "Dacia",
subvalues: [
{ value: 1169, name: "Sandero" },
{ value: 576, name: "Duster" },
{ value: 622, name: "Jogger" },
{ value: 988, name: "Spring" },
{ value: 582, name: "Lodgy" }
]
},
{
value: 2900,
name: "Toyota",
subvalues: [
{ value: 124, name: "Yaris" },
{ value: 1027, name: "Corolla" },
{ value: 427, name: "C-HR" },
{ value: 171, name: "RAV4" },
{ value: 1151, name: "Aygo X" }
]
},
{
value: 1211,
name: "Honda",
subvalues: [
{ value: 220, name: "Civic" },
{ value: 321, name: "CR-V" },
{ value: 257, name: "HR-V" },
{ value: 181, name: "Jazz" },
{ value: 232, name: "e:Ny1" }
]
},
{
value: 1351,
name: "Hyundai",
subvalues: [
{ value: 89, name: "i10" },
{ value: 90, name: "i20" },
{ value: 229, name: "i30" },
{ value: 457, name: "Tucson" },
{ value: 97, name: "Kona" },
{ value: 389, name: "Bayon" }
]
},
{
value: 1639,
name: "Kia",
subvalues: [
{ value: 423, name: "Ceed" },
{ value: 375, name: "Sportage" },
{ value: 347, name: "Picanto" },
{ value: 211, name: "Stonic" },
{ value: 283, name: "Niro" }
]
},
{
value: 1632,
name: "Opel",
subvalues: [
{ value: 289, name: "Corsa" },
{ value: 369, name: "Astra" },
{ value: 398, name: "Mokka" },
{ value: 190, name: "Crossland" },
{ value: 386, name: "Grandland" }
]
},
{
value: 1354,
name: "Seat",
subvalues: [
{ value: 87, name: "Ibiza" },
{ value: 450, name: "Leon" },
{ value: 475, name: "Arona" },
{ value: 177, name: "Ateca" },
{ value: 165, name: "Tarraco" }
]
}
]
},
sortField: "value"
},
});
</script>
'Others' Slice
One of the most popular features of our PieChart component and its related Donut PRO and Pie PRO custom visuals for Power BI is the interactive ‘Others’ slice, which was created to solve one of the biggest issues with pie charts as a data visualization type.
When there are too many slices on a pie chart (especially if they are small), the chart may become difficult to read. But, if you combine them into an “Others” category, they become hidden from the chart. How to hide the small slices but give the user a way to access them when needed?
With the ‘Others’ slice, you can combine smaller slices into one and declutter the chart, while allowing the user to see exactly what categories are there. Similar to previously discussed drill down, clicking the ‘Others’ slice will reveal all categories that are within it and see the slices that were hidden from the initial view.
The ‘Others’ slice can be configured under interaction object using others. It is already enabled by default, and if your chart has more than 15 slices, it will show only the first fifteen. You can disable it with enabled: false if you wish.
In our car sales pie chart example, we have exactly fifteen slices for the car brands, which means that the ‘Others’ slice is not triggered. What if we want to declutter the chart and show only the biggest car brands? If we use maxSlicesVisible: 8, only the top 8 slices will be displayed, with the rest combined into ‘Others’.
<h3 align="center">'Others' Slice Enabled</h3>
<div id="example4"></div>
<script>
const chart = new ZoomCharts.PieChart({
container: "example4",
interaction: {
others: {
enabled: true,
maxSlicesVisible: 8
},
},
data: {
preloaded: {
subvalues: [
{
value: 3906,
name: "Volkswagen",
subvalues: [
{ value: 154, name: "Golf" },
{ value: 867, name: "Tiguan" },
{ value: 232, name: "Polo" },
{ value: 1032, name: "Passat" },
{ value: 694, name: "ID.4" },
{ value: 927, name: "T-Roc" }
]
},
{
value: 2221,
name: "Peugeot",
subvalues: [
{ value: 102, name: "208" },
{ value: 778, name: "2008" },
{ value: 269, name: "308" },
{ value: 530, name: "3008" },
{ value: 542, name: "5008" }
]
},
{
value: 2326,
name: "Renault",
subvalues: [
{ value: 257, name: "Clio" },
{ value: 351, name: "Captur" },
{ value: 549, name: "Megane" },
{ value: 235, name: "Austral" },
{ value: 765, name: "Arkana" },
{ value: 169, name: "Twingo" }
]
},
{
value: 3294,
name: "BMW",
subvalues: [
{ value: 346, name: "3 Series" },
{ value: 479, name: "X1" },
{ value: 862, name: "1 Series" },
{ value: 626, name: "X3" },
{ value: 652, name: "5 Series" },
{ value: 329, name: "X5" }
]
},
{
value: 3110,
name: "Mercedes-Benz",
subvalues: [
{ value: 496, name: "A-Class" },
{ value: 667, name: "C-Class" },
{ value: 450, name: "GLA" },
{ value: 314, name: "EQA" },
{ value: 640, name: "GLC" },
{ value: 543, name: "EQB" }
]
},
{
value: 1587,
name: "Audi",
subvalues: [
{ value: 273, name: "A3" },
{ value: 111, name: "Q3" },
{ value: 665, name: "A4" },
{ value: 245, name: "Q2" },
{ value: 183, name: "Q5" },
{ value: 110, name: "A6" }
]
},
{
value: 2144,
name: "Skoda",
subvalues: [
{ value: 132, name: "Octavia" },
{ value: 992, name: "Fabia" },
{ value: 111, name: "Karoq" },
{ value: 181, name: "Superb" },
{ value: 104, name: "Kamiq" },
{ value: 624, name: "Enyaq" }
]
},
{
value: 1794,
name: "Fiat",
subvalues: [
{ value: 333, name: "500" },
{ value: 346, name: "Panda" },
{ value: 369, name: "Tipo" },
{ value: 327, name: "600e" },
{ value: 419, name: "Doblo" }
]
},
{
value: 3937,
name: "Dacia",
subvalues: [
{ value: 1169, name: "Sandero" },
{ value: 576, name: "Duster" },
{ value: 622, name: "Jogger" },
{ value: 988, name: "Spring" },
{ value: 582, name: "Lodgy" }
]
},
{
value: 2900,
name: "Toyota",
subvalues: [
{ value: 124, name: "Yaris" },
{ value: 1027, name: "Corolla" },
{ value: 427, name: "C-HR" },
{ value: 171, name: "RAV4" },
{ value: 1151, name: "Aygo X" }
]
},
{
value: 1211,
name: "Honda",
subvalues: [
{ value: 220, name: "Civic" },
{ value: 321, name: "CR-V" },
{ value: 257, name: "HR-V" },
{ value: 181, name: "Jazz" },
{ value: 232, name: "e:Ny1" }
]
},
{
value: 1351,
name: "Hyundai",
subvalues: [
{ value: 89, name: "i10" },
{ value: 90, name: "i20" },
{ value: 229, name: "i30" },
{ value: 457, name: "Tucson" },
{ value: 97, name: "Kona" },
{ value: 389, name: "Bayon" }
]
},
{
value: 1639,
name: "Kia",
subvalues: [
{ value: 423, name: "Ceed" },
{ value: 375, name: "Sportage" },
{ value: 347, name: "Picanto" },
{ value: 211, name: "Stonic" },
{ value: 283, name: "Niro" }
]
},
{
value: 1632,
name: "Opel",
subvalues: [
{ value: 289, name: "Corsa" },
{ value: 369, name: "Astra" },
{ value: 398, name: "Mokka" },
{ value: 190, name: "Crossland" },
{ value: 386, name: "Grandland" }
]
},
{
value: 1354,
name: "Seat",
subvalues: [
{ value: 87, name: "Ibiza" },
{ value: 450, name: "Leon" },
{ value: 475, name: "Arona" },
{ value: 177, name: "Ateca" },
{ value: 165, name: "Tarraco" }
]
}
]
},
sortField: "value"
},
});
</script>
Slice Colors
By default, PieChart will use the ZoomCharts default theme to assign colors to each slice. This means that the slices will be colorful and contrast from each other to ensure good readability. However, if you wish to customize appearance and better integrate the chart in your project’s design, there are multiple ways to do that.
The pie object, which we already mentioned in a previous section, can also be used to apply color rules to the entire chart at once. Use style within pie to adjust how the colors are applied to the pie chart (unless overridden by slice-specific settings):
- sliceColors: can be a single string or an array of hex codes, HTML color names or RGB color values to be applied using your selected colorDistribution method. Without it, the chart will use the default theme colors.
- colorDistribution: choose the method in which sliceColors are applied to slices:
- “list”: Default setting. Slices will apply solid fill using the color values provided in the sliceColors array. If there are more slices than the color values, the visual will assign random colors for the remaining slices.
- “gradient”: The visual will use the sliceColors values as stops for a radial gradient and distribute slice colors based on it. Also can be used with just one sliceColors value, in which case the chart will apply derivative shades to each slice to create a monochromatic look.
- “gradientProportional”: similar to gradient, but the derived gradient shades are slightly influenced by the slice size.
Here’s a comparison of how the three colorDistribution modes work two scenarios – when the sliceColor has multiple colors (in this case, an array of hex codes), and when there’s just one color available (here – “green”).
As you can see, list setting works best when you have manually provided a suitable amount of slice colors – with just one color available, it tried to provide colors for other slices on its own, and it may not always produce the results you want. For such cases, the gradient mode is really useful as a quick way to create a visually pleasing color palette.
However, these settings will be used as defaults across all categories – if you want to have full control over specific slices, you can use the slice object. There, you can customize settings like fill color and gradient, outline color, dashing and thickness, labels and more – for normal slices, ‘Others’ and ‘Previous’, and in selected or hovered states.
What if you want to apply a specific color to each slice? In our car sales example, it would make sense to assign colors based on the car brands – green for Škoda, yellow for Renault, dark blue for VW and so on. One way to do that would be creating a styleFunction, whereas another method is by supplying style rules directly in data.
For each slice object in data, you can also provide a style object which may contain properties like fillcolor, icon, label, url, and others – they will be applied only to that specific slice. Basically, it achieves the same result as giving these values in slice object, but since they are provided within data, this means that you can update them in your data and all visuals that reference them will instantly reflect the changes. See the full list of available properties here.
In this example, we provided each manufacturer’s brand color as style: {fillColor: “#EXAMPLE”}, and their respective slices use that color. You can also provide color values as simple color names (“red”, “blue”, “yellow”) or RGB/RGBA codes (“rgb(255, 255, 255, 1)”).
<h3 align="center">Slice fillColor referenced from 'style' in data</h3>
<div id="example5"></div>
<script>
const chart = new ZoomCharts.PieChart({
container: "example5",
data: {
preloaded: {
subvalues: [
{
value: 3906,
name: "Volkswagen",
style: { fillColor: "#001e50" },
subvalues: [
{ value: 154, name: "Golf" },
{ value: 867, name: "Tiguan" },
{ value: 232, name: "Polo" },
{ value: 1032, name: "Passat" },
{ value: 694, name: "ID.4" },
{ value: 927, name: "T-Roc" }
]
},
{
value: 2221,
name: "Peugeot",
style: { fillColor: "#003478" },
subvalues: [
{ value: 102, name: "208" },
{ value: 778, name: "2008" },
{ value: 269, name: "308" },
{ value: 530, name: "3008" },
{ value: 542, name: "5008" }
]
},
{
value: 2326,
name: "Renault",
style: { fillColor: "#f7cb15" },
subvalues: [
{ value: 257, name: "Clio" },
{ value: 351, name: "Captur" },
{ value: 549, name: "Megane" },
{ value: 235, name: "Austral" },
{ value: 765, name: "Arkana" },
{ value: 169, name: "Twingo" }
]
},
{
value: 3294,
name: "BMW",
style: { fillColor: "#2e9fff" },
subvalues: [
{ value: 346, name: "3 Series" },
{ value: 479, name: "X1" },
{ value: 862, name: "1 Series" },
{ value: 626, name: "X3" },
{ value: 652, name: "5 Series" },
{ value: 329, name: "X5" }
]
},
{
value: 3110,
name: "Mercedes-Benz",
style: { fillColor: "#222222" },
subvalues: [
{ value: 496, name: "A-Class" },
{ value: 667, name: "C-Class" },
{ value: 450, name: "GLA" },
{ value: 314, name: "EQA" },
{ value: 640, name: "GLC" },
{ value: 543, name: "EQB" }
]
},
{
value: 1587,
name: "Audi",
style: { fillColor: "#c0c0c0" },
subvalues: [
{ value: 273, name: "A3" },
{ value: 111, name: "Q3" },
{ value: 665, name: "A4" },
{ value: 245, name: "Q2" },
{ value: 183, name: "Q5" },
{ value: 110, name: "A6" }
]
},
{
value: 2144,
name: "Skoda",
style: { fillColor: "#007c30" },
subvalues: [
{ value: 132, name: "Octavia" },
{ value: 992, name: "Fabia" },
{ value: 111, name: "Karoq" },
{ value: 181, name: "Superb" },
{ value: 104, name: "Kamiq" },
{ value: 624, name: "Enyaq" }
]
},
{
value: 1794,
name: "Fiat",
style: { fillColor: "#941c2f" },
subvalues: [
{ value: 333, name: "500" },
{ value: 346, name: "Panda" },
{ value: 369, name: "Tipo" },
{ value: 327, name: "600e" },
{ value: 419, name: "Doblo" }
]
},
{
value: 3937,
name: "Dacia",
style: { fillColor: "#003279" },
subvalues: [
{ value: 1169, name: "Sandero" },
{ value: 576, name: "Duster" },
{ value: 622, name: "Jogger" },
{ value: 988, name: "Spring" },
{ value: 582, name: "Lodgy" }
]
},
{
value: 2900,
name: "Toyota",
style: { fillColor: "#eb0a1e" },
subvalues: [
{ value: 124, name: "Yaris" },
{ value: 1027, name: "Corolla" },
{ value: 427, name: "C-HR" },
{ value: 171, name: "RAV4" },
{ value: 1151, name: "Aygo X" }
]
},
{
value: 1211,
name: "Honda",
style: { fillColor: "#da215d" },
subvalues: [
{ value: 220, name: "Civic" },
{ value: 321, name: "CR-V" },
{ value: 257, name: "HR-V" },
{ value: 181, name: "Jazz" },
{ value: 232, name: "e:Ny1" }
]
},
{
value: 1351,
name: "Hyundai",
style: { fillColor: "#002c5f" },
subvalues: [
{ value: 89, name: "i10" },
{ value: 90, name: "i20" },
{ value: 229, name: "i30" },
{ value: 457, name: "Tucson" },
{ value: 97, name: "Kona" },
{ value: 389, name: "Bayon" }
]
},
{
value: 1639,
name: "Kia",
style: { fillColor: "#c4172c" },
subvalues: [
{ value: 423, name: "Ceed" },
{ value: 375, name: "Sportage" },
{ value: 347, name: "Picanto" },
{ value: 211, name: "Stonic" },
{ value: 283, name: "Niro" }
]
},
{
value: 1632,
name: "Opel",
style: { fillColor: "#ffd700" },
subvalues: [
{ value: 289, name: "Corsa" },
{ value: 369, name: "Astra" },
{ value: 398, name: "Mokka" },
{ value: 190, name: "Crossland" },
{ value: 386, name: "Grandland" }
]
},
{
value: 1354,
name: "Seat",
style: { fillColor: "#e50012" },
subvalues: [
{ value: 87, name: "Ibiza" },
{ value: 450, name: "Leon" },
{ value: 475, name: "Arona" },
{ value: 177, name: "Ateca" },
{ value: 165, name: "Tarraco" }
]
}
]
},
sortField: "value"
}
});
</script>Themes
Manually providing color values isn’t the only way to stylize your pie chart. You can use the theme property to apply a preset – convenient if you want to unify styling across multiple visuals in your project. By default, ZoomCharts flat theme will be used, but you can reference your own configuration object, or choose any of our prebuilt themes. For example, this is the same car sales chart, but with the dark theme:
<h3 align="center">Theme: Dark</h3>
<div id="example-dark"></div>
<script>
const chart = new ZoomCharts.PieChart({
container: "example-dark",
theme: PieChart.themes.dark,
data: {
preloaded: {
subvalues: [
{
value: 3906,
name: "Volkswagen",
subvalues: [
{ value: 154, name: "Golf" },
{ value: 867, name: "Tiguan" },
{ value: 232, name: "Polo" },
{ value: 1032, name: "Passat" },
{ value: 694, name: "ID.4" },
{ value: 927, name: "T-Roc" }
]
},
{
value: 2221,
name: "Peugeot",
subvalues: [
{ value: 102, name: "208" },
{ value: 778, name: "2008" },
{ value: 269, name: "308" },
{ value: 530, name: "3008" },
{ value: 542, name: "5008" }
]
},
{
value: 2326,
name: "Renault",
subvalues: [
{ value: 257, name: "Clio" },
{ value: 351, name: "Captur" },
{ value: 549, name: "Megane" },
{ value: 235, name: "Austral" },
{ value: 765, name: "Arkana" },
{ value: 169, name: "Twingo" }
]
},
{
value: 3294,
name: "BMW",
subvalues: [
{ value: 346, name: "3 Series" },
{ value: 479, name: "X1" },
{ value: 862, name: "1 Series" },
{ value: 626, name: "X3" },
{ value: 652, name: "5 Series" },
{ value: 329, name: "X5" }
]
},
{
value: 3110,
name: "Mercedes-Benz",
subvalues: [
{ value: 496, name: "A-Class" },
{ value: 667, name: "C-Class" },
{ value: 450, name: "GLA" },
{ value: 314, name: "EQA" },
{ value: 640, name: "GLC" },
{ value: 543, name: "EQB" }
]
},
{
value: 1587,
name: "Audi",
subvalues: [
{ value: 273, name: "A3" },
{ value: 111, name: "Q3" },
{ value: 665, name: "A4" },
{ value: 245, name: "Q2" },
{ value: 183, name: "Q5" },
{ value: 110, name: "A6" }
]
},
{
value: 2144,
name: "Skoda",
subvalues: [
{ value: 132, name: "Octavia" },
{ value: 992, name: "Fabia" },
{ value: 111, name: "Karoq" },
{ value: 181, name: "Superb" },
{ value: 104, name: "Kamiq" },
{ value: 624, name: "Enyaq" }
]
},
{
value: 1794,
name: "Fiat",
subvalues: [
{ value: 333, name: "500" },
{ value: 346, name: "Panda" },
{ value: 369, name: "Tipo" },
{ value: 327, name: "600e" },
{ value: 419, name: "Doblo" }
]
},
{
value: 3937,
name: "Dacia",
subvalues: [
{ value: 1169, name: "Sandero" },
{ value: 576, name: "Duster" },
{ value: 622, name: "Jogger" },
{ value: 988, name: "Spring" },
{ value: 582, name: "Lodgy" }
]
},
{
value: 2900,
name: "Toyota",
subvalues: [
{ value: 124, name: "Yaris" },
{ value: 1027, name: "Corolla" },
{ value: 427, name: "C-HR" },
{ value: 171, name: "RAV4" },
{ value: 1151, name: "Aygo X" }
]
},
{
value: 1211,
name: "Honda",
subvalues: [
{ value: 220, name: "Civic" },
{ value: 321, name: "CR-V" },
{ value: 257, name: "HR-V" },
{ value: 181, name: "Jazz" },
{ value: 232, name: "e:Ny1" }
]
},
{
value: 1351,
name: "Hyundai",
subvalues: [
{ value: 89, name: "i10" },
{ value: 90, name: "i20" },
{ value: 229, name: "i30" },
{ value: 457, name: "Tucson" },
{ value: 97, name: "Kona" },
{ value: 389, name: "Bayon" }
]
},
{
value: 1639,
name: "Kia",
subvalues: [
{ value: 423, name: "Ceed" },
{ value: 375, name: "Sportage" },
{ value: 347, name: "Picanto" },
{ value: 211, name: "Stonic" },
{ value: 283, name: "Niro" }
]
},
{
value: 1632,
name: "Opel",
subvalues: [
{ value: 289, name: "Corsa" },
{ value: 369, name: "Astra" },
{ value: 398, name: "Mokka" },
{ value: 190, name: "Crossland" },
{ value: 386, name: "Grandland" }
]
},
{
value: 1354,
name: "Seat",
subvalues: [
{ value: 87, name: "Ibiza" },
{ value: 450, name: "Leon" },
{ value: 475, name: "Arona" },
{ value: 177, name: "Ateca" },
{ value: 165, name: "Tarraco" }
]
}
]
},
sortField: "value"
}
});
</script>
Labels
By default, each slice will show a label outside of the slice that is connected with a thin line. It will display the category name and the percentage. The label settings are governed by the labels object, with some of the properties being:
- enabled: by default, labels will be enabled, but use false to disable them.
- insideLabel: by default, labels will be displayed outside of the pie chart; use always to move labels to the inside if there is not enough space outside, or append to show labels inside unless the slice is too small (in which case the label will be moved to outside).
- placement: choose between aligned (labels will be justified in two vertical columns on each side of the pie) or wrap.
- includeName and includePercent: use false if you wish to hide either part of the label content.
- connectors: by default, enabled; but use false if you wish to hide the connection lines between the pie and the label.
Click here to visit an example from our Gallery that showcases different label types – toggle between them to see the difference.
For additional customization, you can use label and insideLabel objects under slice->style, with things like alignment, background style (fill color, outline, etc.), text style (font, color, size etc.), margins and even images. You can also modify the label content with text property, for example, to display a suffix or prefix, or reference a value from your data.
Legends
In ZoomCharts JavaScript visualizations, legends are not just helpful visual aids for the user, but also a crucial navigation element – clicking them can drill down or select the slice (depending on your interaction settings; the default mode is “drilldown”).
You can configure them in legend object; use enabled: true to show the legend items (by default, they are disabled). Here’s what they will look like with default settings:
<h3 align="center">Legend enabled (default settings)</h3>
<div id="example6"></div>
<script>
const chart = new ZoomCharts.PieChart({
container: "example6",
labels: {enabled: false},
legend: {enabled: true},
data: {
preloaded: {
subvalues: [
{
value: 3906,
name: "Volkswagen",
subvalues: [
{ value: 154, name: "Golf" },
{ value: 867, name: "Tiguan" },
{ value: 232, name: "Polo" },
{ value: 1032, name: "Passat" },
{ value: 694, name: "ID.4" },
{ value: 927, name: "T-Roc" }
]
},
{
value: 2221,
name: "Peugeot",
subvalues: [
{ value: 102, name: "208" },
{ value: 778, name: "2008" },
{ value: 269, name: "308" },
{ value: 530, name: "3008" },
{ value: 542, name: "5008" }
]
},
{
value: 2326,
name: "Renault",
subvalues: [
{ value: 257, name: "Clio" },
{ value: 351, name: "Captur" },
{ value: 549, name: "Megane" },
{ value: 235, name: "Austral" },
{ value: 765, name: "Arkana" },
{ value: 169, name: "Twingo" }
]
},
{
value: 3294,
name: "BMW",
subvalues: [
{ value: 346, name: "3 Series" },
{ value: 479, name: "X1" },
{ value: 862, name: "1 Series" },
{ value: 626, name: "X3" },
{ value: 652, name: "5 Series" },
{ value: 329, name: "X5" }
]
},
{
value: 3110,
name: "Mercedes-Benz",
subvalues: [
{ value: 496, name: "A-Class" },
{ value: 667, name: "C-Class" },
{ value: 450, name: "GLA" },
{ value: 314, name: "EQA" },
{ value: 640, name: "GLC" },
{ value: 543, name: "EQB" }
]
},
{
value: 1587,
name: "Audi",
subvalues: [
{ value: 273, name: "A3" },
{ value: 111, name: "Q3" },
{ value: 665, name: "A4" },
{ value: 245, name: "Q2" },
{ value: 183, name: "Q5" },
{ value: 110, name: "A6" }
]
},
{
value: 2144,
name: "Skoda",
subvalues: [
{ value: 132, name: "Octavia" },
{ value: 992, name: "Fabia" },
{ value: 111, name: "Karoq" },
{ value: 181, name: "Superb" },
{ value: 104, name: "Kamiq" },
{ value: 624, name: "Enyaq" }
]
},
{
value: 1794,
name: "Fiat",
subvalues: [
{ value: 333, name: "500" },
{ value: 346, name: "Panda" },
{ value: 369, name: "Tipo" },
{ value: 327, name: "600e" },
{ value: 419, name: "Doblo" }
]
},
{
value: 3937,
name: "Dacia",
subvalues: [
{ value: 1169, name: "Sandero" },
{ value: 576, name: "Duster" },
{ value: 622, name: "Jogger" },
{ value: 988, name: "Spring" },
{ value: 582, name: "Lodgy" }
]
},
{
value: 2900,
name: "Toyota",
subvalues: [
{ value: 124, name: "Yaris" },
{ value: 1027, name: "Corolla" },
{ value: 427, name: "C-HR" },
{ value: 171, name: "RAV4" },
{ value: 1151, name: "Aygo X" }
]
},
{
value: 1211,
name: "Honda",
subvalues: [
{ value: 220, name: "Civic" },
{ value: 321, name: "CR-V" },
{ value: 257, name: "HR-V" },
{ value: 181, name: "Jazz" },
{ value: 232, name: "e:Ny1" }
]
},
{
value: 1351,
name: "Hyundai",
subvalues: [
{ value: 89, name: "i10" },
{ value: 90, name: "i20" },
{ value: 229, name: "i30" },
{ value: 457, name: "Tucson" },
{ value: 97, name: "Kona" },
{ value: 389, name: "Bayon" }
]
},
{
value: 1639,
name: "Kia",
subvalues: [
{ value: 423, name: "Ceed" },
{ value: 375, name: "Sportage" },
{ value: 347, name: "Picanto" },
{ value: 211, name: "Stonic" },
{ value: 283, name: "Niro" }
]
},
{
value: 1632,
name: "Opel",
subvalues: [
{ value: 289, name: "Corsa" },
{ value: 369, name: "Astra" },
{ value: 398, name: "Mokka" },
{ value: 190, name: "Crossland" },
{ value: 386, name: "Grandland" }
]
},
{
value: 1354,
name: "Seat",
subvalues: [
{ value: 87, name: "Ibiza" },
{ value: 450, name: "Leon" },
{ value: 475, name: "Arona" },
{ value: 177, name: "Ateca" },
{ value: 165, name: "Tarraco" }
]
}
]
},
sortField: "value"
},
pie: {
innerRadius: 0
}
});
</script>
There are various properties pertaining to their style, placement, alignment, and behavior. You can see the full list in the documentation page, but the main ones include:
- displaymode: choose between grid (legend items will be aligned in a grid) or inline (legend items will be placed responsively in the available space)
- panel: an object that may contain properties for customizing the legend panel placement, including:
- side (top, bottom, left, right): where to place the legend panel
- align (left, right, top, bottom, center, middle, fill): alignment of the panel
- location (outside, inside, external): dedicate a separate area just for legends (at the cost of available chart size), draw them within the chart area (with risk of overlapping), or carry them to an external HTML element.
- maxLineSymbols: the maximum permitted label length (default: 15 symbols)
- height and width: by default, legends panel will use all available space, but you can limit it to a custom value.
- text: an object for customizing the legend text appearance, including font, fill color, outline etc.
- marker: an object for customizing legend markers, including shape, size, alignment (‘left’ or ‘right’ in relation to text), and outline color.
In this example, we used inline display mode, placed them on the bottom of the chart, limited height, enabled scroll buttons, and customized font and markers. We used Monserrat from the Google Fonts library, which we referenced in the HTML.
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<h3 align="center">Customized legends</h3>
<p align="center">inline mode, scroll buttons, bottom placement, Montserrat 14px font, circle markers, etc.</p>
<div id="example7"></div>
<script>
const chart = new ZoomCharts.PieChart({
container: "example7",
labels: {
enabled: false
},
legend: {
enabled: true,
displayMode: "inline",
height: 25,
padding: 3,
panel: {
align: "left",
side: "bottom"
},
text: {
font: "14px Montserrat",
fillColor: "grey"
},
marker: {
shape: "circle",
lineColor: "grey"
},
scrollButtons: {
style: {
fillColor: "lightgrey",
hoverFillColor: "grey"
}
}
},
data: {
preloaded: {
subvalues: [
{
value: 3906,
name: "Volkswagen",
subvalues: [
{ value: 154, name: "Golf" },
{ value: 867, name: "Tiguan" },
{ value: 232, name: "Polo" },
{ value: 1032, name: "Passat" },
{ value: 694, name: "ID.4" },
{ value: 927, name: "T-Roc" }
]
},
{
value: 2221,
name: "Peugeot",
subvalues: [
{ value: 102, name: "208" },
{ value: 778, name: "2008" },
{ value: 269, name: "308" },
{ value: 530, name: "3008" },
{ value: 542, name: "5008" }
]
},
{
value: 2326,
name: "Renault",
subvalues: [
{ value: 257, name: "Clio" },
{ value: 351, name: "Captur" },
{ value: 549, name: "Megane" },
{ value: 235, name: "Austral" },
{ value: 765, name: "Arkana" },
{ value: 169, name: "Twingo" }
]
},
{
value: 3294,
name: "BMW",
subvalues: [
{ value: 346, name: "3 Series" },
{ value: 479, name: "X1" },
{ value: 862, name: "1 Series" },
{ value: 626, name: "X3" },
{ value: 652, name: "5 Series" },
{ value: 329, name: "X5" }
]
},
{
value: 3110,
name: "Mercedes-Benz",
subvalues: [
{ value: 496, name: "A-Class" },
{ value: 667, name: "C-Class" },
{ value: 450, name: "GLA" },
{ value: 314, name: "EQA" },
{ value: 640, name: "GLC" },
{ value: 543, name: "EQB" }
]
},
{
value: 1587,
name: "Audi",
subvalues: [
{ value: 273, name: "A3" },
{ value: 111, name: "Q3" },
{ value: 665, name: "A4" },
{ value: 245, name: "Q2" },
{ value: 183, name: "Q5" },
{ value: 110, name: "A6" }
]
},
{
value: 2144,
name: "Skoda",
subvalues: [
{ value: 132, name: "Octavia" },
{ value: 992, name: "Fabia" },
{ value: 111, name: "Karoq" },
{ value: 181, name: "Superb" },
{ value: 104, name: "Kamiq" },
{ value: 624, name: "Enyaq" }
]
},
{
value: 1794,
name: "Fiat",
subvalues: [
{ value: 333, name: "500" },
{ value: 346, name: "Panda" },
{ value: 369, name: "Tipo" },
{ value: 327, name: "600e" },
{ value: 419, name: "Doblo" }
]
},
{
value: 3937,
name: "Dacia",
subvalues: [
{ value: 1169, name: "Sandero" },
{ value: 576, name: "Duster" },
{ value: 622, name: "Jogger" },
{ value: 988, name: "Spring" },
{ value: 582, name: "Lodgy" }
]
},
{
value: 2900,
name: "Toyota",
subvalues: [
{ value: 124, name: "Yaris" },
{ value: 1027, name: "Corolla" },
{ value: 427, name: "C-HR" },
{ value: 171, name: "RAV4" },
{ value: 1151, name: "Aygo X" }
]
},
{
value: 1211,
name: "Honda",
subvalues: [
{ value: 220, name: "Civic" },
{ value: 321, name: "CR-V" },
{ value: 257, name: "HR-V" },
{ value: 181, name: "Jazz" },
{ value: 232, name: "e:Ny1" }
]
},
{
value: 1351,
name: "Hyundai",
subvalues: [
{ value: 89, name: "i10" },
{ value: 90, name: "i20" },
{ value: 229, name: "i30" },
{ value: 457, name: "Tucson" },
{ value: 97, name: "Kona" },
{ value: 389, name: "Bayon" }
]
},
{
value: 1639,
name: "Kia",
subvalues: [
{ value: 423, name: "Ceed" },
{ value: 375, name: "Sportage" },
{ value: 347, name: "Picanto" },
{ value: 211, name: "Stonic" },
{ value: 283, name: "Niro" }
]
},
{
value: 1632,
name: "Opel",
subvalues: [
{ value: 289, name: "Corsa" },
{ value: 369, name: "Astra" },
{ value: 398, name: "Mokka" },
{ value: 190, name: "Crossland" },
{ value: 386, name: "Grandland" }
]
},
{
value: 1354,
name: "Seat",
subvalues: [
{ value: 87, name: "Ibiza" },
{ value: 450, name: "Leon" },
{ value: 475, name: "Arona" },
{ value: 177, name: "Ateca" },
{ value: 165, name: "Tarraco" }
]
}
]
},
sortField: "value"
}
});
</script>Final Thoughts
We just scratched the surface of all the configuration options available in ZoomCharts PieChart. For most use cases, the out-of-the-box experience will provide all that is needed to create slick and interactive JavaScript data visualizations, but if you want to create a chart that is truly yours, feel free to explore the available properties in the documentation.
We also recommend exploring the Gallery to see various different configurations of our JavaScript charts in action, with code and live demos. Some highlights:
- Gauge with live data (showcases realtime data updates & limited startAngle/endAngle to create a gauge chart)
- Swipe slices to input data (showcases partialSwipe interaction)
- Web Traffic Analysis Dashboard with cross-filtering (integrates PieChart with other visuals)
- Donut chart on map (showcases charts-on-charts integration)
- PieChart events tester (shows event listeners real-time, you can use them to execute your own functions on certain events)
Start creating your own charts with the free trial – you will get full access to all five ZoomCharts components (PieChart, FacetChart, TimeChart, NetChart, GeoChart) for 30 days!
Want more info like this?
Subscribe to our newsletter and be the first to read our latest articles and expert data visualization tips!
