Plotly.js: Feature request: rounded corners for trace bars

[Andrucis]

This is a request to pass attributes to trace bar component to adjust bar corner roundness.
That way bar visual variety would be extended.
Each bar corners roundness could individually adjusted with percentage value from 0 to 1 where 1 is full circle arc.

Attribute could be passed like this:
"cornerroundness": { "bottomleft": 0.3, "bottomright": 0, "topleft": 0.3, "topright": 0 }

Maximum arc radius could be set to least wide bar edge width divided by two otherwise there could arise visual problems with bar.
Visually that would result that bars would be able to look like this:

[alexcjohnson]

The dataviz purist in me is a little squeamish - the area of the bar, the most important component of its visual weight, loses proportionality with the data value, and lacking a straight line at the end it's hard to compare two similar bars and tell which is bigger. But you're right that it's a pleasant effect, we'd entertain a PR about this.

[etpinard]

What happens when bars are stacked?

[Andrucis]

@etpinard the stacking part is a problem. Basically, one way is to manually handle it when passing data object by ensuring appropriate round corners are only on data bars that are on top or on the bottom of the stack. Of course, this isn't ideal since bar can be in different positions in different stacks. Which limits the use of round corners on stacked bars.
Another solution would be automatically omit roundness of the bar depending on its position in bar stack. But as I understand it's not quite possible at the moment to know whether there will be a bar on top or on the bottom at the moment of drawing individual bar. Also, it would require to pass bar roundness attribute to all potential data bars that could end up on stack top or the bottom.

[Andrucis]

I checked out how currently bar stacking is working and based on that added stack position calculation logic which, then is used to check whether corners need to be rounded. Which results in something like seen in the picture below.

Also experimenting with corner roundness I found out that it's is best to use the smallest edge of all the bars, to calculate max corner radius so all the bars look similar and there aren't any cases where taller bars look more round than very small bars. Now bars would look like this instead of the one like you can see in the top comment

[brivvirs]

What is the status of this feature request?

[etpinard]

status: discussion needed.

[jhodges10]

Any updates on this?

[brivvirs]

Any updates on this?

Unfortunately no

[jamesmfriedman]

+1. I need this as well. Much more subtle but there is a need to fit charts into a brand.

[jyotishmandeori]

Any updates?

[Jonathan-MW]

I would say rounded corners are essential for professional graphs. As Steve Jobs would have said: "Even something as basic as a traffic sign has rounded corners".

For now I'll use shapes with plotly.py:
https://plot.ly/~empet/14945/shapes-that-are-filled-rectangle/#/

[alexcjohnson]

FWIW the shape solution doesn't need two overlaid shapes - just take out the extra M steps between the Q and L portions. See for example https://codepen.io/alexcjohnson/pen/dErOaK?editors=0010

[empet]

@alexcjohnson Thanks for this simple solution to round the corners.

@Jonathan-MW I updated this notebook https://plot.ly/~empet/14945 defining the path like in the above pen.

[Romu-C]

Any updates? This an important feature and not optional if you want to fit your chart to a design system brand.

[BrianRuizy]

Any update, 7mo later?
Though it is a very niche demand, I would love to see this feature come alive. Just noticed, even the latest Plotly logo uses rounded bars.

[mdriesch]

I'd also appreciate to see this feature.

[prykon]

2.5 years later and still no round corners...please add this feature! :,(

[nicolaskruchten]

We'd be happy to work with someone who wants to implement this and get it merged in but it's not on our roadmap at the moment :)

[BrianRuizy]

@nicolaskruchten, what would be the ideal approach to implementing this change?

[nicolaskruchten]

Hi @BrianRuizy !

The first step would be to propose one or more new attributes in the Plotly.js schema to control this new behaviour. Something like "a new attribute cornerradius under bar.marker which accepts integers and defaults to 0" or similar. Usually this results in a bit of discussion around a spec, like "what about stacks? what about groups? what about histogram traces or waterfall traces?" etc.

Once we can agree to a 'spec' like this, it's usually a question of figuring out a test plan and then writing the code. The test plan will involve some static image tests that prove the new attribute works and some Jasmine tests to prove that it can work when turned on and off via react() and restyle and that it behaves correctly under various corner-case situations (i.e. bars that go negative etc).

[jackparmer]

This issue has been tagged with NEEDS SPON$OR

A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.

Sponsorship range: $15k-$20k

What Sponsorship includes:

• Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
• Tests for this feature
• Long-term support (continued support of this feature in the latest version of Plotly.js)
• Documentation at plotly.com/javascript
• Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
• Possibility of integrating this feature with Dash
• Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
• Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.