# Ui problem with d3 bar chart

**URL:** <https://forum.freecodecamp.org/t/ui-problem-with-d3-bar-chart/61210>\
**Category:** General\
**Created:** [December 2, 2016, 5:06am UTC](https://forum.freecodecamp.org/t/ui-problem-with-d3-bar-chart/61210 "2016-12-02T05:06:28Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mones-cse](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/mones-cse/32/1736_2.png) [@mones-cse](https://forum.freecodecamp.org/u/mones-cse)\
**Post date:** [December 2, 2016, 5:06am UTC](https://forum.freecodecamp.org/t/ui-problem-with-d3-bar-chart/61210/1 "2016-12-02T05:06:28Z")

</div>

so this my data visualization project

> **[bar chart 2](https://codepen.io/m1s/pen/xRpzoo?editors=0110)**
>
> ...

  
the problem i currently facing is when i zoom the chrome browser 110% the bar chart is smooth like this  
 ![](https://global.discourse-cdn.com/freecodecamp/original/3X/0/4/04f337e336593bf86b96ac4e9bc237b09fbcf772.jpg)  
but when the browser is 100% zoom it shows some small white line between the bars like this

 ![](https://global.discourse-cdn.com/freecodecamp/original/3X/a/3/a3b84c56566c64b1bd0f02f7a674f07a1596c93c.jpg)

what could possibly caused this type of problem ?

---

<div class="post-metadata">

**Author:** ![pnahratow](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/pnahratow/32/164104_2.png) [@pnahratow](https://forum.freecodecamp.org/u/pnahratow)\
**Post date:** [December 2, 2016, 7:46am UTC](https://forum.freecodecamp.org/t/ui-problem-with-d3-bar-chart/61210/2 "2016-12-02T07:46:13Z")

</div>

To have no gaps your maxwidth would have to be evenly divisible by your totalData. I suspect floating point inaccuracies. You could try to set the barwidht to 1+maxWidth/totalData if you always want it smooth or substract 1 if you always want the gap.

---

<div class="post-metadata">

**Author:** ![mones-cse](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/mones-cse/32/1736_2.png) [@mones-cse](https://forum.freecodecamp.org/u/mones-cse)\
**Post date:** [December 2, 2016, 9:22am UTC](https://forum.freecodecamp.org/t/ui-problem-with-d3-bar-chart/61210/3 "2016-12-02T09:22:22Z")

</div>

wow man great catch  
it didnt even occur in my head  
i just use Math.round() its works just fine

thanks for taking look at the code .

---

<div class="post-metadata">

**Author:** ![jwilkins.oboe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jwilkins.oboe/32/179497_2.png) [@jwilkins.oboe](https://forum.freecodecamp.org/u/jwilkins.oboe)\
**Post date:** [January 16, 2021, 6:10am UTC](https://forum.freecodecamp.org/t/ui-problem-with-d3-bar-chart/61210/4 "2021-01-16T06:10:10Z")

</div>