Some times small values on large graph scales are not plotting

[SK4492]

Description

As we can see positive & negative axis values are same.
1st data point data1=10 & data2=-100 here data1 value 10 is not displaying on chart.
2nd data point data1=100 & data2=-10 here data2 values -10 is plotted on graph.

I know plotting small values on large scale graph is not possible and that is accepted behavior.
But in above case with same scale with same value one data point is visible and another is not this is misleading when we have comparison graph of data1 & data2 (i.e. comparing 100 with 10).
Is there any way to handled this.

Steps to check or reproduce

// base css
import "billboard.js/dist/theme/insight.css";
import bb from "billboard.js";

// for ESM environment, need to import modules as:
// import bb, {bar} from "billboard.js";

var chart = bb.generate({
  data: {
    columns: [
	["data1", 10, 100, 1000, 2000, 2000, 1000],
	["data2", -100, -10, -2000, -1000, -2000, -1000]
    ],
    type: "bar", // for ESM specify as: bar()
  },
  bindto: "#barChart_1"
});

[netil]

Hi @SK4492, can you provide with full reproducible option?
I can't reproduce the issue with the option you provided.

• https://jsfiddle.net/netil/5gvbLjqc/

[SK4492]

Hi @netil ,
If you remove height of the chart i.e.
const chart = bb.generate({ data: { columns: [ ["data1", 10, 100, 1000, 2000, 2000, 1000], ["data2", -100, -10, -2000, -1000, -2000, -1000] ], type: "bar" }, });

or try with Height=350
const chart = bb.generate({ size: { height: 350 }, data: { columns: [ ["data1", 10, 100, 1000, 2000, 2000, 1000], ["data2", -100, -10, -2000, -1000, -2000, -1000] ], type: "bar" }, });

Chart height will impact for data level display but why its different for same data value.

[netil]

Tested with and without specifying size.height option, and both cases rendering 10 and -10 data values' heights were same.

From the screenshot you shared looks value 10 isn't visible, but I couldn't reproduce the issue from the below examples. Also tested on Safari and FF, they also resulted same.

• without specifying width: https://jsfiddle.net/netil/5gvbLjqc/14/

• width:350px: https://jsfiddle.net/netil/5gvbLjqc/13/

[SK4492]

@netil, cloud you please try with below data values
["data1", 10, 100, 1000, 2000, 2000, 1000],
["data2", -100, -10, -2000, -1000, -2000, -1000]

I am able to simulate with these values ,

This I am seeing only for some case not for all
And in my case data1 is either 0/+ve & data2 is either 0/-ve only

And Thanks for the quick updates.

[netil]

@SK4492, I already tested with the data example. Just changed the order to facilitate to point element from the browser devtool.

Here are with the data order as you pointed, but I couldn't reproduce the issue. Also tested on FF and Safari as well.

• with height=350 option: https://jsfiddle.net/netil/5gvbLjqc/16/

• without height option: https://jsfiddle.net/netil/5gvbLjqc/17/

Can you try on different browser? From the source code perspective, there's no different logic for rendering positive and negative values.

[watnab]

https://jsfiddle.net/netil/5gvbLjqc/17/

---

Chrome 113.0.5672.127

<path class="bb-shape bb-shape-0 bb-bar bb-bar-0" d="M25.53333333333333,133V132.45 H63.33333333333333 V133z" style="fill: rgb(0, 199, 60);"></path>
<path class="bb-shape bb-shape-1 bb-bar bb-bar-1" d="M190,133V133.55 H227.8 V133z" style="fill: rgb(250, 113, 113);"></path>

---

Firefox 113.0.2

<path class="bb-shape bb-shape-0 bb-bar bb-bar-0" style="fill: rgb(0, 199, 60);" d="M25.53333333333333,132V131.45416666666668 H63.33333333333333 V132z"></path>
<path class="bb-shape bb-shape-1 bb-bar bb-bar-1" style="fill: rgb(250, 113, 113);" d="M190,132V132.54583333333332 H227.8 V132z"></path>

---

It seems SVG rendering issue.

[netil]

@watnab, thanks for the checks.

I tested on following versions(MacOS), and none of them rendered incorrectly.

• Chrome
  • 113.0.5672.126
  • 116.0.5800.0 (canary)
• Firefox
  • 113.0.2 
• Safari
  • 16.4(18615.1.26.110.1)
• Edge
  • 113.0.1774.57

What OS you're using it? @SK4492 @watnab

[watnab]

What OS you're using it?

Windows 10 Pro
22H2
19045.2965

[netil]

confirmed the issue. It's happening on windows and can be reproduced in various browsers.

[watnab]

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering

shape-rendering

Note:
As a presentation attribute,
shape-rendering can be used as a CSS property.

geometricPrecision

• add attribute -> won't work?
  <path ... shape-rendering="geometricPrecision" />
• set css property -> work? (but blurred?)
  path.bb-shape-0.bb-bar-0 { shape-rendering: geometricprecision; }

[netil]

@SK4492 @watnab here's workaround

• https://jsfiddle.net/netil/5gvbLjqc/19

From the base and themes css file, every path elements applies shape-rendering:crispEdge for rendering hints.
I guess on Windows, setting crispEdge is causing this issue.

I'll be considering updating shape-rendering:crispEdge to shape-rendering:auto to prevent unexpected rendering issue.