Column charts are the same as bar charts and consist of rectangular bars, that help compares and differentiates data. Here, we are using Pluscharts, a JavaScript charting library, to build column charts. Let’s discuss the steps involved in the same.
Step 1:
Create an element in the space where you want to render your column chart, using the following code.
<div id=”column-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:
Write down a JavaScript code to create a column chart.
// column chart example
pluscharts.draw({
drawOn : ‘#column-chart-example’,
type: “column”,
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”,”Jun”],
legend: “Visitors”
},
options : {
barPadding: 5,
barWidth: 15,
text: {
display: true,
color: “#6c478c”
},
axes: {
x: {
display: true,
min: 0,
max: 100
},
y: {
display: true,
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 make this code even more simple, let’s break it down in parts.
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 : ‘#column-chart-example’,
The drawOn element is used to indicate the element where the chart is to be generated.
type: “column”,
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”,”Jun”],
legend: “Visitors”
},
After that, we write down the dataset, where we specify data and appearance of the chart. The data values, the border color, the background color, the border width, the labels and the legend labels are specified under dataset.
options : {
barPadding: 5,
barWidth: 15,
text: {
display: true,
color: “#6c478c”
},
axes: {
x: {
display: true,
min: 0,
max: 100
},
y: {
display: true,
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’
}
}
Options are where all the customization of the chart is done. The bar padding and width, along with the color of the bars are specified. The RGB value or color code can be used to indicate the required color or default value will be set on its own. The x and y-axis minimum and maximum points are set, with an option of putting them on display or not. There are also options to set the visibility and dimensions of legends.
Recommended Reading: How to create Bar charts using Pluscharts
The size of the chart is set also here. The width and height can be set to ‘container’, indicating the size is the same as its initiated container.
Hence, we have discussed all the steps involved in making of a Column chart using Pluscharts.
