How to remove spaces between bar in grouped bar charts ?

156 views
Skip to first unread message

Shikha Agrawal

unread,
May 26, 2020, 2:39:17 PM5/26/20
to d3-js
I am facing the issue in removing the space between bars If the bar data is 0 or null in grouped bar chart. I want to remove the space for red series, which doesn't contain any data in vanilla.

Is It really possible in d3 js ?


82890160-5edac700-9f69-11ea-883b-7085a7d5e3fe.png


Spandan Chatterjee

unread,
May 26, 2020, 2:51:56 PM5/26/20
to d3...@googlegroups.com
Filter and remove all the items whose values are 0 || null from the series before plotting the graph.


--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/d3-js/d8ce4a52-4edd-41fe-bcfe-e13a3f2fc680%40googlegroups.com.

Shikha Agrawal

unread,
May 26, 2020, 2:54:42 PM5/26/20
to d3-js
could you please provide any link or code snippet that can help us to resolve this issue. 

On Wednesday, May 27, 2020 at 12:21:56 AM UTC+5:30, Spandz wrote:
Filter and remove all the items whose values are 0 || null from the series before plotting the graph.


On Tue, May 26, 2020 at 11:39 AM Shikha Agrawal <shikhaag...@gmail.com> wrote:
I am facing the issue in removing the space between bars If the bar data is 0 or null in grouped bar chart. I want to remove the space for red series, which doesn't contain any data in vanilla.

Is It really possible in d3 js ?


82890160-5edac700-9f69-11ea-883b-7085a7d5e3fe.png


--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3...@googlegroups.com.

Spandan Chatterjee

unread,
May 26, 2020, 2:59:28 PM5/26/20
to d3...@googlegroups.com
share a jsfiddle or codepen with your snippet - that will help to suggest further.

To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/d3-js/e15d877c-d423-4ea9-96e5-2fc99fe44e71%40googlegroups.com.


--
- Spandan

Shikha Agrawal

unread,
May 26, 2020, 3:03:02 PM5/26/20
to d3-js
Sure, here is my jsfiddle :  http://jsfiddle.net/L7vprwy1/1/

in this i want to remove space between two bars if data is 0 or null.



On Wednesday, May 27, 2020 at 12:29:28 AM UTC+5:30, Spandz wrote:
share a jsfiddle or codepen with your snippet - that will help to suggest further.

On Tue, May 26, 2020 at 11:54 AM Shikha Agrawal <shikhaag...@gmail.com> wrote:
could you please provide any link or code snippet that can help us to resolve this issue. 

On Wednesday, May 27, 2020 at 12:21:56 AM UTC+5:30, Spandz wrote:
Filter and remove all the items whose values are 0 || null from the series before plotting the graph.


On Tue, May 26, 2020 at 11:39 AM Shikha Agrawal <shikhaag...@gmail.com> wrote:
I am facing the issue in removing the space between bars If the bar data is 0 or null in grouped bar chart. I want to remove the space for red series, which doesn't contain any data in vanilla.

Is It really possible in d3 js ?


82890160-5edac700-9f69-11ea-883b-7085a7d5e3fe.png


--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/d3-js/d8ce4a52-4edd-41fe-bcfe-e13a3f2fc680%40googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3...@googlegroups.com.

Alan Carwile

unread,
May 26, 2020, 3:28:16 PM5/26/20
to d3...@googlegroups.com
From looking at the samples, I would suggest keeping the column but making it very short.  Then it would not appear to be a gap in the data, but rather a very low value.  if the data value truly is zero, draw it with a very short height, like 2 or 5 pixels.
    <rect x="21" y="450" width="18" height="0" fill="#8a89a6"></rect>
If you remove the column it would look odd, in my opinion, as if the age-group doesn't exist.  The age-group exists even if there are no members.

You're already using a no-height rectangle or gap between the states or flavors, which is why it's important that the zero-members data points look very different.

Hope this helps.  I employed something like this for a bandwidth graph to avoid the appearance of outages when there were just no bytes transmitted/received.
Alan

To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/d3-js/bab690a2-fc0e-4a60-a623-68676349ba4c%40googlegroups.com.

Shijo c j

unread,
Oct 25, 2023, 8:49:07 AM10/25/23
to d3-js
Did you get any answer for this. Even I am facing same issue. Can anyone help on this.
Reply all
Reply to author
Forward
0 new messages