Pie charts are the most fun chart to draw and to broadcast whole-to-part relationship. Here are steps showing how to create a pie chart using Pluscharts, a JavaScript charting library to build charts.
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, ‘pie-chart-example’.
<div id=”pie-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 set together to build a pie chart.
//Pie chart example
pluscharts.draw({
drawOn : “#pie-chart-example”,
type: “pie”,
dataset : {
data: [30,60,70],
backgroundColor: [“#6182ce”, “#d18a96”, “#81c0a7”],
borderColor: “#ffffff”,
borderWidth: 2,
label: [“IE”, “Chrome”, “Firefox”]
},
options: {
text: {
display: true,
color: “#fdfdfd”,
position From Edge: 60
},
legends: {
display: true
},
size: {
width: ‘container’, //give ‘container’ if you want width and height of the initiated container
height: ‘400’
}
}
})
Let’s break this code down to understand it better.
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 : ‘#pie-chart-example’,
The drawOn element is used to indicate the element where the chart is to be generated.
type: “pie”,
The type of chart to be drawn is indicated in the type element.
dataset: {
data: [30,60,70],
backgroundColor: [“#6182ce”, “#d18a96”, “#81c0a7”],
borderColor: “#ffffff”,
borderWidth: 2,
label: [“IE”, “Chrome”, “Firefox”]
}
Dataset is where the customization of the chart is done. The data, background color, border color, border width, and labels are specified.
options: {
text: {
display: true,
color: “#fdfdfd”,
position From Edge: 60
},
legends: {
display: true
},
size: {
width: ‘container’, //give ‘container’ if you want the width and height of the initiated container
height: ‘400’
}
}
Also read: How To Create Area Charts Using Pluscharts
Options are used to provide further customization in the outlook of the chart. The text color, position from the edge and a display option is provided. The visibility and dimensions of legends can be set. The size of the chart can be adjusted with adjusting the width and height and instead of values ‘container’ can be given in to set the chart to its initiated container dimension.
