Rounded-Edge Bar Charts in Plotly

2 min readOct 16, 2022


A JavaScript function for generating rounded-edge bar charts in Plotly.js

Hi everyone. In this text, I will write about a technique that I invented accidentally while I was trying to create rounded-edge bar charts. Probably, I am not the only one who uses this technique. It doesn’t matter who invented the method, it anyway solved my problems very well.

Image by Author

Generally, I postpone the request when I get one request to create rounded-edge bar charts. However, I couldn’t postpone creating one last week. And while trying, I found this method to draw a scatter plot on the bar chart with the same colour. In order to handle that, I have created a JavaScript method: generate_bar_trace_radius_chart.

Also, you can see it in a practical example.

Basically, this function does that to put scatter dots on each bar with the defined size.

var generate_bar_trace_radius_chart = (bar_trace, size = null, color = null) => {    return {      x: [ => e)],      y: [ => e)],      mode: 'markers',      type: 'scatter',      marker: { size: size === null ? bar_trace.marker.size : size, color: color === null ? bar_trace.marker.color : color }    }  }

Actually, there are some points to improve this function. When the bar chart is stacked, you need to generate a new data structure to put the dots on the farthest top of the bar chart. I also handled this for one of my clients. However, I didn’t put the solution on Codepen or Gist.

Hopefully, this will help you to create rounded-edge bar charts.

Kind regards




Lifelong learner & Developer. I use technology that helps me.