Remove empty bar space in Group bar chart using Plot.ly javascript?

Question

I have rendered a group bar chart with 3 bars in each group. But some times one or two bars could be empty. In that case, It's occupying space for ALL THREE bars. How can I remove this 0 height bar's space? I have used width: 0.1 and bargap: 0.6

Source link https://codepen.io/blacmoon/pen/MRqQoj

For ex: Check the 1997 in X, Its having one bar value. But occupied 3bars space.

Answer 1

Late to this, but maybe it will help someone. If you want the graph to show the "Rest of World" value in the same position, you need to provide a value for China and China Nation. If there is no value, put null so plotly knows there is no value. Put 0 if the value is in fact 0 which will show a slight bump where the bar would be see the difference in this Codepen for 1997.

Relevant parts:

var trace2 = {
  x: [1995, 1998, 1996, 1997, 1999, 2000, 2001, 2002, 2003],
  y: [0, 16, 0, null, 13, 10, 11, 0,0,0],
  name: 'China',

var trace3 = {
  x: [1997, 1998, 1999, 2000,2001, 2002, 2003],
  y: [0, 16, 13, 10, 11, 0,0,0],
  name: 'China Nation',