Comments (21)
done in #1075
from plotly.js.
@AdnanBoota you might just need layout.bargap
Plotly.newPlot(gd, [{
x: ['2017-01-02', '2017-01-03', '2017-01-04'],
y: [2, 4, 3],
type: 'bar'
}], {bargap: 0})
but if you really do need explicit widths on a date axis, you can specify them as milliseconds:
Plotly.newPlot(gd, [{
x: ['2017-01-02', '2017-01-03', '2017-01-04'],
y: [2, 4, 3],
type: 'bar',
width: 1000*3600*23 // 23 hours
}])
from plotly.js.
Adding these three attributes sounds like the way to go.
I like thickness
better than width
. base
and offset
are as good as it gets I think.
Adding attribute aces @cldougl @chriddyp for their input.
from plotly.js.
[...] I reckon I'll have to create a setPosition for each mode. I think it'll make setPostion more readable.
great 👍
(I guess I'd have to move poffset to each point)
That's correct.
on stack/relative mode, if width is set, what would be the alignment? left-aligned?
I'd vote for left-aligned. This is probably what most users would expect.
in stack/relative mode, if offset or width are set, do we allow adjacent bars to overlap?
Yes, allowing overlap is fine. We shouldn't try to be too magical when users set offset
and width
.
How would this work when the data are categories?
At the moment, data-referenced annotations on categorical axes are placed using their calculated
coordinates (which are integers corresponding to each category position - see example: http://codepen.io/etpinard/pen/qaxBQv). So, I'd vote for keeping the same semantics for bar width
.
from plotly.js.
@n-riesco I agree with @etpinard on all points except
on stack/relative mode, if width is set, what would be the alignment? left-aligned?
I'd vote for left-aligned. This is probably what most users would expect.
Most or all of the rest of the user-facing bar positioning is centered, so I'd keep it that way.
from plotly.js.
barweight
or thickness
maybe?
from plotly.js.
barweight
orthickness
maybe?
barweight
seems ambiguous to me, I almost expect it to mean how opaque it is or something. thickness
could be OK, though somehow I associate that with lines (even though we use width
for line thickness. go figure.)
from plotly.js.
👍 for adding these attributes! base
and offset
seem pretty clear to me. Right off the bat thickness
seems like more of a stylistic attribute than one that would represent data like in the irregular-width bars. width
makes sense to me, but that could be just because I saw irregular-width bars.
from plotly.js.
👍 from me as well. With this I could correctly convert ggplot2's geom_bar()
in all cases.
from plotly.js.
Is this feature implemented?
from plotly.js.
@krishna-agarwal no. We close issues as soon as a feature is implemented (or a bug is fixed).
from plotly.js.
@alexcjohnson I'm working on this issue and on #475. I wanted to check with you whether I understand base
and offset
correctly.
This is how I understand it: if a trace sets either base
or offset
, the trace is excluded from the barmode
machinery;. i.e. we would position the trace as if barmode
was overlay
and then shift horizontally and vertically according to base
and offset
. Is this correct?
from plotly.js.
This is how I understand it: if a trace sets either base or offset, the trace is excluded from the barmode machinery;. i.e. we would position the trace as if barmode was overlay and then shift horizontally and vertically according to base and offset. Is this correct?
That's how I see it. 👍
from plotly.js.
@n-riesco I think it could be useful to treat the different aspects separately. So with barmode='group'
, normally base
is 0 and width
and offset
are set automatically per trace in the group. But if you only provide an explicit base
, you could still get the automatic width
and offset
, which could be useful for a multiple waterfall plot, where you want to show components adding and subtracting vertically to arrive at a total, but still grouped horizontally. For example: http://wiki.analytica.com/images/b/b3/Waterfall_chart_example.png
In barmode='stack'
the case is not so clear to me... why would you want to tweak width
or offset
while retaining automatic base
from the stacking? Maybe you want skinny bars stacked on top of fat bars? Dunno, but I don't see a reason to forbid it. Same in 'group'
mode if you want to use the offset
machinery but explicitly override width
... would be weird but I think it's clear what the intent of the user is in this case.
BUT it does seem like if you override the key attribute that's aggregated per trace (base
in 'stack'
mode, offset
in 'group'
mode) then you're right, that trace should get removed from the aggregation and treated as 'overlay'
so the other traces stack or group without it.
from plotly.js.
@alexcjohnson If base
, offset
and width
are allowed to interact with the group
, stack
and relative
modes. I reckon I'll have to create a setPosition
for each mode. This isn't a problem. In fact, I think it'll make setPostion
more readable.
Here are a few more questions about the interactions with barmode
:
- in
group
mode, ifwidth
is set, the algorithm to computeoffset
needs to account for this setting. Currently, theoffset
is set per trace and stored int.poffset
, whereaswidth
in this spec can be set per point (I guess I'd have to movepoffset
to each point). - in
stack
/relative
mode, ifwidth
is set, what would be the alignment? left-aligned? - in
stack
/relative
mode, ifoffset
orwidth
are set, do we allow adjacent bars to overlap?
Another question about width
. This spec says the width is given in position units. How would this work when the data are categories?
from plotly.js.
While playing with mock images for this feature, I noticed that it's a bad idea to set base
if any of the bar sizes is negative, because a bar with a custom base b
and size -s
, is indistinguishable from a bar with custom size b-s
and size s
.
Negative bar sizes are already an issue in stack
barmode (I guess this is the reason why the barmode relative
was introduced).
At the moment plotly.js does nothing about negative bar sizes in stack
mode, and so I've opted to do nothing when when base
is set. Shall we do anything about it? Perhaps add a note in the description of the base
attribute?
from plotly.js.
It's true that this is in general ambiguous, though there are two reasons I think we should allow it:
- In context it's often clear - for example in the waterfall example above, the depreciation, O&M, and tax bars would generally be negative but using the preceding subtotal as the base, and having that subtotal right next to it, it's clear which end of the bar is its start and which its end.
- Our hover text should still show up at the end no matter what. Doesn't help viewers of the static plot, but that will disambiguate it for online viewers.
from plotly.js.
Can i increase the bar widths with the x axis type as "date"?
The idea is to have a single bar value (with large width) for multiple hours on time series.
Right now i am doing it on the numerical values, but i want to implement it on time series. Please check and let me know what is best solution for this implementation.
from plotly.js.
@alexcjohnson Using the above code bar width is fixed, but tooltip is misplaced.
https://codepen.io/saimaparveen/pen/zRKXge
You have any fix for tooltip also?
from plotly.js.
@saimaparveen you can use layout.hovermode: 'closest'
. We should really just make that the default (see #778) but you're right that in this particular case, there's no reason hovermode: 'x'
should move the hover label way out there. I'll make a new issue for it so it doesn't get lost in this closed issue.
from plotly.js.
Any plans to implement this same functionality for box type?
It would provide a better workaround to do grouping for #78 and #2097 via explicit width and offset with boxmode 'overlay' since boxmode 'group' is not working with a second y-axis.
The current workaround referenced in #78 still leaves a ghost trace and the group spacing shows a gap where the hidden trace is (between the yaxis and yaxis2 plot groupings), explicit offset and width could adjust them perfectly and without needing a 'dummy' trace...
from plotly.js.
Related Issues (20)
- 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
- Heatmap text not visible when z values are None
- SVG Accessibility - Screenreader needs
- hovermode='x-unified' hover info contains data point with a different x-value
- Treemap titles are not centered when multi-line name used
- Heatmap text over cells with missing data displayed as zeros!
- Tooltip value display incorrent HOT 6
- BUILDING.md: minor typo and some Markdown syntax errors
- Reference line for nominal values
- Missing Chrome on CircleCI HOT 1
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.