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.