Hello guys today, I am going to show you how to create a vertical grouped bar chart using d3v6 by using JSON data example. You know it is very time consuming to create a interactive bar chart and it is not really available out there.
Recently on one of my projects I created a new, yet interactive bar-chart which can create grouped bar chart with any number bar inside one axis group which you can see in the image above.
I have shared the copy of my chart in this link in GitHub. You can download it from here.
Below, I will explain all the details on how to pass data into it and load the chart according to your data.
D3 Interactive Grouped Bar Chart With JSON Data Example
As you know it is very a hectic task to take all day and write a chart with D3. Some of your might find examples around d3 sample gallery but it is not kind of like what we always expect.
I have also wrote a article recently in creating a simplest grouped bar chart using d3 in my recent post. So this time its interactive grouped bar chart which looks professional.
So, taking those things in mind I crafted my own way of creating vertical grouped bar chart with d3v6 with the ability to configure by using the external parameters. I believe you have downloaded the copy of my chart and had look into the methods I have created on it.
The main method that draws a chart is called
createChart(); which takes an data as an parameter. It’s JSON structure looks like below.
You can call
createChart() from anywhere in the script or may be you in your use case, when you click something and render different kind of data, you can just invoke your function prepare JSON data like above and feed it to
createChart(); function and call it. The chart will automatically render on your screen.
So, let’s say made the chart once and you want it to use every possible places without having to change the code of native chart you had made. So to do that everything should be params based and totally configurable. So what I have done is made it totally params based.
The thing that you would like to do like changing bar colors. Changing the color of xaxis labels adding backgrounds, and changing the number of ticks according to the nature of your data and adding vertical labels to the yaxis, adding background shadows and much much more. They are totally configurable outside of chart.
I introduced a new object called
INPUT_ATTRIBUTES which have tons of parameters I would explain below and how to use it so, that you can get the interactive chart as you have seen on this post image on top of screen. So, let’s get going
Specify height of the bar chart.
Margin is basically the spaces that you would like to set around your SVG container and bar chart. It has 4 options as
top, left, right bottom which you can customize chart spacing according yo our needs.
This is the space below the x-axis. You can set the number of height starting just below the x-axis. By default its value is
35. It is the normal spacing that I have added but you can change it else you don’t have to override any of its value.
Inner Padding is the padding between the each x-axis group. You can change it to have more spaces between the x-axis bars. The default value is
0.1. Value range from
0.1 to 1 on average.
Outer Padding is padding that starts with first bar of the graph and ends last bar of the graph. That means it will squeeze your bars. Use inner padding and outer padding in combine to adjust your graph to your liking. The default value is
Series Inner Padding is the padding between the each of the bars between the bars of each x-axis. You can make it thin or fat depending upon your requirement. Defualt value is
Reduce Bar Width value is generally the value that is divided by the total number of bars to adjust it in x-axis. Later you can adjust it more using series inner padding, outer padding and series Inner padding to adjust the way in your liking. Be careful while changing its inner value. Its default value is
Y Axis label is the type
string. Pass the name that you would like to display vertical label on left side of y-axis You can pass it null for not to display it.
No of ticks represents the number of value that you would like to display on y-axis. It generally displays on the gap of
1000 or 100 depending upon the value. But if you provide noOfTicks it will display 5 values calculating the difference from the values of your data. Default value is
This tick format represents the value representation. Is it either in dollars or rupees or an count or values per thousand or %. By default the value is
'$' but you can change it and display according to your nature of data.
Domain is the representation of value starting from
0. It is in array format
[0, 10000]. You can pass it externally else it will calculate the domain on range based on your JSON data.
Rotate offset value for x-axis labels. It will determine when you want to rotate the x-axis label when you bars are many of you want to squeeze your screen resolution. The default value is [0, 0] is array format. Tinker with it to see the changes in chart.
It is the
boolean value and is
true by default. If you don’t want your x-axis to rotate set it to false.
isChartWithNoAxis & isChartWithNoXAxis
Sometime all you need is to display bars only no x-axis no y axis no axis nothing. So in that case you just have to set
isRotateXAxis label to
false and these two to
Set the color stroke for x-axis label background. It is string type and default is
To make bar chart more elegant and professional we have added alternate background color covering entire y-axis height of single x-axis. So provide the color code of your own liking by providing value in array. The default color code is
It controls whether to show alternative background color in the graph or not. It is
boolean, So default value is
false. Set it to
Generally alternate background is transparent so sometime opacity needs to be customized according to the user. So we have added this feature to set the opacity of alternate background color in which default value is
It shows the total value of bar on top of each bar. Well it is heavily customize the the width of the value is higher than the bar it hides and if its fits it displays value. It is also controlled by
boolean value. It is
false by default.
That is it with grouped bar chart with JSON data example. If you are happy with the chart made here, make sure to share it on social media platforms.