Donut charts are similar to Pie charts. They are hollow in the middle to add additional information. Here we are going to create a Donut chart using Pluscharts.
Step 1:
Create an element, where you want to render your chart, using the following code.
For example, here we create an element with id, ‘donut-chart-example’.
<div id=”donut-chart-example”></div>
Now, since the pluscharts library is built upon d3, we load d3 first and then pluscharts, using the following scripts.
<script src=”https://d3js.org/d3.v5.min.js”></script>
<script src=”path-to/src/pluscharts.js”></script>
Step 2:
A JavaScript code is built to construct a donut chart.
/* Donut chart example */
pluscharts.draw({
drawOn : “#donut-chart-example”,
type: “donut”,
dataset : {
data: [70,80,50],
backgroundColor: [“#324e8f”, “#9c4a64”, “#20b98e”],
label: [“Web”, “Mobile”, “Plugins”]
},
options: {
width: 80,
text: {
display: true,
color: “#f6f6f6”,
position From Edge: 40
},
legends: {
display: true
},
size: {
width: ‘container’, //give ‘container’ if you want width and height of the initiated container
height: ‘400’
}
}
})
To make this code even more simple, let us break it into parts for better understanding.
pluscharts.draw
({ })
This function is used to initiate the chart. Under this draw function, we pass the details of the chart including the data and options as an argument to the draw() function.
drawOn : ‘#donut-chart-example’,
The drawOn element is used to indicate the element where the chart is to be generated.
type: “donut”,
The type of chart to be drawn is specified in the type element.
dataset: {
data: [70,80,50],
backgroundColor: [“#324e8f”, “#9c4a64”, “#20b98e”],
label: [“Web”, “Mobile”, “Plugins”]
}
The dataset is where the data and outlook of the chart are given. The data values, background color, and labels are specified here.
options: {
width: 80,
text: {
display: true,
color: “#f6f6f6”,
position From Edge: 40
}
legends: {
display: true
}
size: {
width: ‘container’, //give ‘container’ if you want width and height of the initiated container
height: ‘400’
}
}
Recommended Reading: Line Chart using PHP and JS
This element is for customization of the chart. Here, we have the option to adjust the display, color, and position of the text. The visibility and dimension of legends can be set. The total width and height of the chart can be adjusted. ‘Container’ can be set instead of value when there is a need to set the dimension of the chart same as its initiated container.
