A function to generate rounded-edge bar charts in Plotly

plotly-bar-rounded-edge-chart.js

var hr_bar_data = {{hr_bar_data|safe}}; // Django template language syntax

var bar_trace = {
    x: [],
    y: [],
    name: 'HR Bar',
    orientation: 'h',
    marker: {
      color: '#5058B8',
      width: 1
    },
    type: 'bar',
    text:[],
    //textposition: 'outside',
    //texttemplate: '%{text}',
    hoverinfo: 'none'
  };

hr_bar_data.forEach((i) => bar_trace.x.push(i.value))
hr_bar_data.forEach((i) => bar_trace.y.push(i.gender))
//hr_bar_data.forEach((i) => bar_trace.text.push(`${i.percentage}%`))

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 }
    }
  }


var chart_data = [bar_trace, generate_bar_trace_radius_chart(bar_trace, 15)];

var layout = {
        height: 50,
        margin: { r: 50, t: 0, l: 60, b: 0, },
        xaxis: { tickangle: 0,  showticklabels: false, showgrid: false, zeroline: false, scaleratio:0.5, constraintoward:'left' },
        yaxis: { gridwith: 0, linewidth: 10, linecolor: 'white'},
        barmode: 'stack',
        bargap: 0.4,
        showlegend:false,
        annotations: [],


    };
   
   
Plotly.newPlot('hr-bar-chart', chart_data, layout, {displayModeBar: false, responsive:true, staticPlot: true});

I have been using Plotly for more than 2 years. Generally, I am like that when I get requests to create rounded-edge bar charts, I postpone the requests. Today, I couldn't postpone :D I had to create a rounded-edge bar chart. I found this solution to create them: adding scatter charts on bar charts.

In the first picture, you see the rounded-edge bar charts. I am also eager to learn new approaches to handle this problem. If you have and share your techniques, I will be appreciated it. Happy charting!