2024-02-02-rounded-bars.html

---
name: Rounded Corners on Bars
language: plotly_js
suite: bar
order: 9
sitemap: false
arrangement: horizontal
markdown_content: |
  To create rounded corners on bars, set `barcornerradius` on the layout to a number of pixels, or a string with a percentage of the bar width, for example, 25%.
  You can also configure traces individually with `marker.cornerradius` on the trace.
---

var trace1 = {
  x: ['South Korea', 'China', 'Canada'],
  y: [24, 10, 9],
  name: 'Gold',
  type: 'bar',
};

var trace2 = {
  x: ['South Korea', 'China', 'Canada'],
  y: [13, 15, 12],
  name: 'Silver',
  type: 'bar',
};

var trace3 = {
  x: ['South Korea', 'China', 'Canada'],
  y: [11, 8, 12],
  name: 'Bronze',
  type: 'bar',
};

var data = [trace1, trace2, trace3];

var layout = {
  scattermode: 'group',
  title: {
    text: 'Grouped by Country'
  },
  xaxis: {
    title: {
      text: 'Country'
    }
  },
  yaxis: {
    title: {
      text: 'Medals'
    }
  },
  barcornerradius: 15,
};

Plotly.newPlot('myDiv', data, layout);