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.
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: [...bar_trace.x.map(e => e)], y: [...bar_trace.y.map(e => 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
