Create Interactive Charts Using Plotly.js, Part 3: Bar Charts

Create Interactive Charts Using Plotly.js, Part 3: Bar Charts

In our last tutorial, you learned how to create line charts in Plotly.js. Every aspect of line charts, like the data to be plotted and the shape or color of the line connecting the plotted points, can be controlled using a set of attributes. Plotly.js allows you to create bar charts in a similar manner. 

In this tutorial, you will learn how to create different kinds of bar charts using Plotly.js. I will also discuss how to control the appearance of these charts, like the bar color and width, using specific attributes.

Before going further, I would like to mention that you can also create some basic bar charts using Chart.js. If you don't plan on using any of the fancy features of Plotly.js, using a lightweight library makes more sense.

Creating Your First Bar Chart

You can plot a bar chart in Plotly.js by setting the value of the type attribute to bar. The rest of the tasks, like creating a trace object or providing the data to be plotted, are similar to the process of creating line charts. Here is the code you need to create a basic bar chart in Plotly.

var barDiv = document.getElementById('bar-chart');

var traceA = {
  x: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
  y: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
  type: 'bar'
};

var data = [traceA];

var layout = {
  title:'Density of Planets (kg/m3)'
};

Plotly.plot( barDiv, data, layout );

Here is the chart created by the above code. The planet density data has been taken from the Planetary Fact Sheet provided by NASA. 

Creating Stacked, Grouped, and Relative Bar Charts

If you need to represent more complex data in the form of a chart, you can use the barmode attribute available in Plotly to do so. This attribute can be set to stack, group, overlay, and relative. It's usually helpful if you want to plot multiple bar traces with related information.

The stack value creates stacked bar charts in which bars representing the subgroups of the entity are placed on top of each other to form a single column. All the bars within a subgroup have different colors that show the individual contribution of that section to the whole entity. The combined length of the stacked bars represents the total size of that entity.

Here is some code that stacks the GDP contribution of the top eight countries together. The Nominal GDP sector composition data has been taken from Wikipedia.

var barDiv = document.getElementById('bar-chart');

var primaryGDP = {
  x: ["United States", "China", "Japan", "Germany", "United Kingdom", "France", "India", "Italy"],
  y: [215364, 964772, 56764, 27959, 18549, 47277, 391672, 37050],
  type: 'bar',
  name: 'Agricultural Sector'
};

var secondaryGDP = {
  x: ["United States", "China", "Japan", "Germany", "United Kingdom", "France", "India", "Italy"],
  y: [3427876, 4464876, 1300833, 982067, 556477, 455355, 580755, 448305],
  type: 'bar',
  name: 'Industrial Sector'
};

var tertiaryGDP = {
  x: ["United States", "China", "Japan", "Germany", "United Kingdom", "France", "India", "Italy"],
  y: [14303756, 5788633, 3377434, 2484874, 2074864, 1985647, 1280813, 1367145],
  type: 'bar',
  name: 'Service Sector'
};

var data = [primaryGDP, secondaryGDP, tertiaryGDP];

var layout = {
  title:'Nominal GDP Sector Composition of Top 8 Countries',
  barmode: 'stack'
};

Plotly.plot( barDiv, data, layout );

The stacking order for the subgroups depends on the order in which the data was passed to the function.

Setting the barmode to overlay will place the individual bars in subgroups over one another. While this mode can be useful for direct comparisons, you should be careful with it because it will hide shorter bars that were passed earlier in the plot() function. 

The following chart has been created with barmode set to overlay. You can now easily compare the GDP contribution of a single sector across all countries with ease. It is worth noting that all the bars of a single country now start from the bottom. This makes a few observations very easy to spot. For example, it is now very clear that GDP of service sector > GDP of industrial sector > GDP of agricultural sector in all of the top eight countries. 

At the current scale, it is impossible to properly see the contribution of the agricultural sector in the GDP of Germany, United Kingdom, and France. The ability of Plotly.js to zoom in can prove very useful in such cases. You can zoom in as much as you want, and the chart will still be very sharp.

Instead of stacking all the bars of a subgroup on top of each other, you can also place them together to form a group. You will have to set the barmode to group to create grouped charts. Keep in mind that providing too much information in grouped charts can make them hard to read. 

You can control the space between bars from different categories as well as bars within a subgroup using the bargap and bargroupgap attributes respectively. Up to this point, the bars were all drawn in order to plot the actual GDP numbers. However, you can use the barnorm parameter to draw the bars in terms of percentages or fractions. When barnorm is set to percentage or fraction, the total contribution of the main category is calculated, and then a percentage is allotted to individual bars based on the subgroup value.

For example, the service sector contributes about 79.7% to the total GDP of United States. This means that the bar for service sector in case of United states will be drawn up to the 79.7 mark. All these attributes discussed in this paragraph are specified in the layout object. Here is an example of the layout object that specifies all these parameters.

var layout = {
  title:'Nominal GDP Sector Composition of Top 8 Countries',
  barmode: 'group',
  bargap: 0.25,
  bargroupgap: 0.1,
  barnorm: 'percent'
};

The final barmode value called relative is useful when you are plotting a group of traces with both negative and positive values. In this case, the positive values are drawn above the axis and negative values are drawn below the axis.

Changing the Bar Color, Width, Text, and Other Attributes

It is possible to change the color of bars in a trace using the color attribute nested inside the marker parameter. The color and width of the bar outline can be changed in a similar manner. These options are nested inside the line attribute, which itself is nested inside marker. Each of these options can be supplied either as a single value to specify the color and width of all the bars in a trace at once or as an array to specify a different color or width for individual bars.

Another important attribute that you might find useful is base. It allows you to specify the position where the base of a bar is drawn. It can be helpful in certain situations where you are posting relative values that need to be offset to show the right result. 

Additional information can be provided about a specific bar or plotted point using the text attribute. The position of the text can be specified using inside, outside, auto, and none. When inside is used, the text will be positioned inside the bar near its end. The text itself can be scaled and rotated so that it fits properly inside the bar. When outside is used, the text will be placed outside the bar near its end. In this case, the text will only be scaled. When no value has been set for the hovertext attribute, the value of text is shown inside the hover labels as well. 

You can also use different font families for text lying inside as well as outside the bar using the insidetextfont and outsidetextfont attributes.

Here is an example of using all these attributes to create a chart that plots the relative speed of different vehicles, with a single moving vehicle as a reference.

var barDiv = document.getElementById('bar-chart');
var lightGreen = 'rgba(0,255,50,0.6)';
var redShade   = 'rgba(255,50,0,0.6)';

var traceA = {
  x: ["Car A", "Car B", "Car C", "Car D", "Car E", "Car F", "Car G", "Car H"],
  y: [100, 80, 40, 160, 75, 93, 8, 125],
  type: 'bar',
  text: ['','','','Overspeeding','','Overspeeding','','Overspeeding'],
  textposition: 'inside',
  width: 0.8,
  base: [-40, 10, 50, -45, 0, 15, 60, -20],
  marker: {
    color: [lightGreen, lightGreen, lightGreen, redShade, lightGreen, redShade, lightGreen, redShade],
    line: {
      color: 'black',
      width: 1
    }
  }
};

var data = [traceA];

var layout = {
  title:'Speed of Cars (km/hr)',
  yaxis: {
    dtick: 15
  }
};

Plotly.plot( barDiv, data, layout );

As you can see, I have passed the base and color values as an array. When vehicles are going in the same direction, they appear to be moving slower, so we need to add the speed of our own vehicle as a base value to get the actual speed. 

When vehicles are going in the opposite direction, they appear to be moving fast, so we need to subtract the speed of our own vehicle to get an accurate result. This allows us to show additional information about the speed of our own vehicle on the same plot. The following CodePen example shows the final chart plotted by the above code.

Conclusion

This tutorial showed you how to create a variety of bar charts in Plotly.js using the barmode attribute. You also learned how to customize the appearance of individual bars in a chart using a specific set of attributes. I have tried to cover all the commonly used attributes of bar charts in the tutorial. 

However, there are still a few additional attributes that you can read about in the bar trace reference section on Plotly. Some attributes that I have explained in the tutorial are missing from the reference section, but they can be found in the source files of the library if you are interested in learning more about them.

If you have any questions or suggestions related to this tutorial, feel free to let me know in the comments.