Option to prevent non-zero bar chart values from vanishing #4604

miqh · 2020-02-26T08:08:56Z

Hello,

When using the bar chart, I noticed if the difference between the smallest and largest values is large enough then the bars corresponding to small values completely vanish. I haven't probed too deeply into the bar chart implementation, but I'm guessing this has to do with how the combination of the value scale and available pixels to plot the bar chart essentially erases insignificant bar chart values.

In my particular use case, it's crucial that any non-zero bar chart values remain visually apparent (e.g. single pixel height bar) because the apparent absence might mislead users into thinking that a data point has no value at all.

I haven't been able to find any bar chart configuration properties that might help me with this either. Is this an option that can be introduced? Or perhaps there's a workaround I'm unaware of?

An example to demonstrate this effect:

<!DOCTYPE html>
<html>
  <head>
    <title>Plotly.js Example</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <button id="button">Increase Last Value</button>
    <div id="plot"></div>
    <script src="src/index.js"></script>
  </body>
</html>

import Plotly from "plotly.js";

const data = [
  {
    y: [0, 1, 2, 3, 100, 10000],
    type: "bar"
  }
];

const plot = document.getElementById("plot");
const button = document.getElementById("button");

Plotly.newPlot(plot, data);

button.addEventListener("click", () => {
  data[0].y[data[0].y.length - 1] *= 10;
  Plotly.newPlot(plot, data);
});

Here's a CodeSandbox setup with the above.

#2941 seems to express a somewhat similar request. However, in my case, I make no distinction between 0 and null—I'd view both as "zero" bar chart values.

The text was updated successfully, but these errors were encountered:

archmoj · 2020-02-26T15:40:56Z

Thanks for using plotly.
You could set marker.line.width similar to this demo.
For questions like this in future we appreciate if you use the community website at https://community.plot.ly

miqh · 2020-02-26T22:37:05Z

@archmoj, thanks for setting up that demo, but it wasn't exactly what I was after.

In the demo, every bar chart value (even zero) has a visible bar height. I specifically indicated that in the latter case, it's desirable to have no visual indication of a bar.

However, I can still see a workaround for my case from your suggestion since you've opted to close the issue.

For anybody else landing on this issue in the future, one solution is to use the array form for marker.line.width and to simply map from your actual y values to either 0 or 1 based on whether a y value is non-zero. However, if you also need to deal with negative y values, then this won't work without some additional hackery (i.e. possibly needing to use arbitrary base adjustments).

archmoj · 2020-02-26T22:43:29Z

In the demo, every bar chart value (even zero) has a visible bar height. I specifically indicated that in the latter case, it's desirable to have no visual indication of a bar.

You may also consider passing null instead of zero values similar to this demo.

archmoj closed this as completed Feb 26, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Option to prevent non-zero bar chart values from vanishing #4604

Option to prevent non-zero bar chart values from vanishing #4604

miqh commented Feb 26, 2020 •

edited

Loading

archmoj commented Feb 26, 2020

miqh commented Feb 26, 2020

archmoj commented Feb 26, 2020

Option to prevent non-zero bar chart values from vanishing #4604

Option to prevent non-zero bar chart values from vanishing #4604

Comments

miqh commented Feb 26, 2020 • edited Loading

archmoj commented Feb 26, 2020

miqh commented Feb 26, 2020

archmoj commented Feb 26, 2020

miqh commented Feb 26, 2020 •

edited

Loading