Area charts are like line charts, the difference being that the area between the x-axis and line is filled with color or pattern. Let us discuss the steps to draw an area 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, ‘area-chart-example’.
<div id=”area-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 simple JavaScript code is set together to build an area chart.
/*Area chart example */
pluscharts.draw({
drawOn : “#area-chart-example”,
type: “area”,
dataset : {
data: [
{
x: 10,
y: 20
},
{
x: 20,
y: 50
},
{
x: 30,
y: 30
},
{
x: 40,
y: 10
},
{
x: 50,
y: 100
},
{
x: 60,
y: 80
}
],
lineColor: “#e46161”,
lineWidth: 2,
fillColor: “#d8aabe”,
legendLabel: “visitors”
},
options: {
text: {
display: true,
color: “#6c478c”
},
points: {
display: true,
color: “#e46161”,
radius: 3
},
axes: {
x: {
display: true,
scale: 3,
min: 0,
max: 100
},
y: {
display: true,
scale: 3,
min: 0,
max: 100
}
},
legends: {
display: true,
width: 20,
height: 20
},
size: {
width: ‘container’, //give ‘container’ if you want width and height of initiated container
height: ‘400’
}
}
})
To understand this code better, let us look at each part of it separately.
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 : ‘#area-chart-example’,
The drawOn element is used to indicate the element where chart is to be generated.
type: “area”,
In the type element, indicate the type of chart to be drawn.
dataset: {
data: [
{
x: 10,
y: 20
},
{
x: 20,
y: 50
},
{
x: 30,
y: 30
},
{
x: 40,
y: 10
},
{
x: 50,
y: 100
},
{
x: 60,
y: 80
}
],
lineColor: “#e46161”,
lineWidth: 2,
fillColor: “#d8aabe”,
legendLabel: “visitors”
}
The dataset is where the data required by the chart is input. The x and y values, line color, line width, fill color and legend labels are also specified.
options: {
text: {
display: true,
color: “#6c478c”
},
points: {
display: true,
color: “#e46161”,
radius: 3
},
axes: {
x: {
display: true,
scale: 3,
min: 0,
max: 100
},
y: {
display: true,
scale: 3,
min: 0,
max: 100
}
},
legends: {
display: true,
width: 20,
height: 20
},
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
Options are used for further customization of the chart. The display, color, and radius of text and points are specified. The scale of the x and y-axis is set along with a display option. The visibility and dimension of legends are set. The size of the chart can be adjusted and ‘container’ can be given in as a value when there’s a need to set the chart to the same dimension as its initiated container.
