Charts are the best tool to communicate a large amount of information graphically, in a simple and easy way. A basic and simple chart example is bar charts. These charts consist of rectangular bars, that help compare and differentiate data. Here, we are using Pluscharts, a JavaScript charting library, to build bar 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, ‘bar-chart-example’.
<div id=”bar-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:
The next step will be writing a JavaScript code to set up a bar chart, as given below.
// Bar chart example
pluscharts.draw({
drawOn : ‘#bar-chart-example’,
type: “bar”,
dataset : {
data: [10, 20, 30, 40, 50],
backgroundColor: “#7d85df”, //can be array or single color
borderColor: “#2430b6”,
borderWidth: 2,
label: [“Jan”,”Feb”,”Mar”,”Apr”,”May”],
legendLabel: “Visitors”
},
options : {
barPadding: .5,
text: {
display: true,
color: “#6c478c”
},
axes: {
x: {
display: true,
min: 0,
max: 100
},
y: {
display: true
}
},
legends: {
display: true,
width: 20,
height: 20
},
size: {
width: ‘container’, //give ‘container’ if you want width and height of initiated container
height: ‘400’
}
}
});
As long as it looks, this is just a simple set of code to construct a chart and plot the data we input. Let us break this code line by line to make it easier to understand.
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 the argument to the draw() function.
drawOn : ‘#bar-chart-example’,
The drawOn element is used to indicate the element where the chart is to be generated.
type: “bar”,
The type of chart to be drawn is specified in the type element.
dataset : {
data: [10, 20, 30, 40, 50],
backgroundColor: “#7d85df”, //can be array or single color
borderColor: “#2430b6”,
borderWidth: 2,
label: [“Jan”,”Feb”,”Mar”,”Apr”,”May”],
legendLabel: “Visitors”
}
The dataset is where we specify, the data and outlook of the chart. The following are the data that comes under dataset: the data values, the border color, the background color, the border width, the labels and the legend labels.
options : {
barPadding: .5,
text: {
display: true,
color: “#6c478c”
},
axes: {
x: {
display: true,
min: 0,
max: 100
},
y: {
display: true
}
},
legends: {
display: true,
width: 20,
height: 20
},
size: {
width: ‘container’, //give ‘container’ if you want width and height of initiated container
height: ‘400’
}
}
Options are where the whole customization of the chart is done. Here, we specify the bar padding and the colors of the bars representing the data. As the bar padding value increases, the width of the bar decreases. The color can be specified directly or a specific color code can be written.
Recommended Reading: All About Bar Charts And Their Uses
The minimum and maximum points on x and y-axis are indicated. The display function is used to indicate the axis visibility. If the display says true, the axes are visible. If the display says false, the axes are not visible. There are also options to set the visibility and dimensions of legends.
The total size of the chart can also be customized here. Instead of a number, ‘container’ can be given in as a value, when there is a need to set the chart to the same width and height as its initiated container.
Hence, we have discussed all the steps involved in the making of a Bar chart using Pluscharts.
