Comments (11)
Bug confirmed. Thanks very much for providing a jsbin example.
After some investigation, the bug seems to be only present in 1-data pt histogram
traces.
Possible workaround: modify all the 1-data pt histogram traces to bars with y: [1]
.
from plotly.js.
The browser vs download difference here is really one of rounding and a peculiarity of how we have to draw bar charts. With bargap=0
(as is the default for histograms) or when you stack bars (also the case here) we need to disable antialiasing (css shape-rendering: crispEdges;
) otherwise you get horrible artifacts where bars meet. But then when you draw with low resolution, some items simply disappear.
It's kind of an interesting question actually, what we should do with bar widths in this plot. We don't currently have any way to explicitly set the width of bars in a bar chart / histogram, they just get set as wide as they can with the constraints that 1) they're all the same within one trace, 2) they don't overlap each other within one trace, and 3) if barmode
is 'stack'
or 'group'
, all the traces get the same bar width.
In this plot you've explicitly set bin widths, which SHOULD be the same as the bar widths if we want to interpret histograms in the normal way. BUT because barmode='stack'
all the widths have to be the same, so we have conflicting demands. What to do?
from plotly.js.
@etpinard you still want to call this a bug? I suppose could imagine a rule like "if we're going to rasterize, AND a bar (stack) has width < 1 px AND there's no bar to draw on at least one side of it, expand it to at least one px width. But that's super complicated and I still think it sounds sketchy - what if for example the plot is a comb, consisting of 0.1 px bars separated by 0.1 px? Then you have to figure out that there's a bar near (but not quite touching) and not expand so much that you overlap it... and even then you give a misleading picture, because it would look like the space is filled when really it's only half full.
The real problem here seems to me the conflicting demands on bar widths. How do we handle grouped or stacked histograms with explicitly different bin widths? I'd almost like to make that an error, but at the very least we should let the user know somehow, and harmonize them before binning, not during plotting, so we can ensure that bin width and bar width are always the same.
from plotly.js.
The thing is, those bins are the ones use by plotly by default. I didn't specified them I juste took the data directly from plotly in my example. Which is related to #50
See: https://jsbin.com/gugerelemu/1/edit?js,console,output
That's why the image output is exactly the same even when no bin size is specified.
from plotly.js.
My question might be naive, but does the downloaded image necessary needs to be the same size as the displayed plot?
from plotly.js.
yup, #50 is the crux - what we should really be doing here is calculating the histogram autobins taking all histogram traces into account at the same time. Then you'd probably get a bin size of 1 or 2 and this would all be moot.
From the plot.ly workspace you can download your image at arbitrary (higher) resolution, but the version on the plot itself is not so full featured.
from plotly.js.
Any chance this might change in the future? That's quite a big limitation..
from plotly.js.
@alexcjohnson @ni-hil
you still want to call this a bug?
No. This issues that @ni-hil pointed out are now split into #50 and #83 .
yup, #50 is the crux - what we should really be doing here is calculating the histogram autobins taking all histogram traces into account at the same time.
We would have to be careful here. Calculating histogram autobins from all traces might break some plots that maneuver around that problem.
from plotly.js.
Migrated part of this discussion to #50 and @etpinard opened #83 with another part - is there anything left here or should we close it?
from plotly.js.
I guess there is nothing more. Fixing #50 should fix this, so I'm closing.
from plotly.js.
Hello folks,
I'm still encountering this issue.
I'm drawing bar charts and some of the bars are missing.
Any ideas how to fix it?
Thanks,
from plotly.js.
Related Issues (20)
- Mismatch between legend and line colors when using uppercase css colors HOT 1
- Item toggle behavior when using multiple legends HOT 8
- insiderange on multiple overlaid axes edge case
- [Feature Request] Adding a Button to Copy Image to Clipboard HOT 1
- BUG: standoff causes axis title position to break if no tick labels
- Shapes - fill to infinity/-infinity
- Adding a dendrogram to heatmaps
- Smith Chart (scattersmith) pan & zoom functionality HOT 2
- axes range not working. Range is +-1, data is 0->1.6e10 HOT 3
- ScatterGL throws ` TypeError: r[v] is undefined` when using frames HOT 1
- Clicks are sometimes missed with clickmode layout key HOT 4
- Tooltip pointer (triangle) not correctly positioned with hovermode 'x'
- Plotly chart conflict with touchstart / touchmove event to scroll smartphone screen HOT 1
- [BUG] Rangeslider won't reset after zooming out HOT 1
- Inconsistent behavior when providing an array of marker sizes in "markers" mode on scatter3D
- hoverdistance broken in 3D scatter plots; hover radius vs click radius?
- `scattergl` line plots no longer working after upgrading to 2.29.1 HOT 3
- Combining rangemode tozero and tickformat set to "," produces unexpected results
- REOPENING BUG - pie chart hover label hidden
- Hoverlabel overlaps each other
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from plotly.js.