CODEWITHSUNDEEP
echartsbaidu
Chris Herring
Chris Herring

Reputation: 3665

Rounded bars in echarts

Is there are way to make the bars rounded in an ECharts chart such as the example here?

Upvotes: 2

Views: 3440

Answers (3)

Joosep Parts
Joosep Parts

Reputation: 6235

For more granual control for which corner is rouned by how much - borderRadius can be used.

borderRadius: 5, // consistently set the size of 4 rounded corners
borderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)

// Initialize the echarts instance based on the prepared dom
var myChart = echarts.init(document.getElementById('main'));

// Specify the configuration items and data for the chart
var option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E'],
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [
        10,
        22,
        28,
        {
          value: 43,
          itemStyle: {
            color: '#91cc75',
            shadowColor: '#91cc75',
            borderType: 'dashed',
            opacity: 0.5,
          },
        },
        49,
      ],
      itemStyle: {
        borderRadius : [50, 50, 0, 0], // Specify the border radius
        borderType: 'solid',
        borderColor: '#73c0de',
        shadowColor: '#5470c6',
        shadowBlur: 3,
      },
    },
  ],
};

// Display the chart using the configuration items and data just specified.
myChart.setOption(option);

Here is a working example: https://stackblitz.com/edit/js-7rkahr?file=index.js

Docs: https://echarts.apache.org/en/option.html#series-bar.itemStyle.borderRadius

Upvotes: 6

lissitz
lissitz

Reputation: 546

Use roundCap:true

Example

series: [{
        type: 'bar',
        data: [4, 3, 2, 1, 0],
        coordinateSystem: 'polar',
        name: 'Without Round Cap',
        color: 'rgba(200, 0, 0, 0.5)',
        itemStyle: {
            borderColor: 'red',
            borderWidth: 1
        }
    }, {
        type: 'bar',
        data: [4, 3, 2, 1, 0],
        coordinateSystem: 'polar',
        name: 'With Round Cap',
        roundCap: true,
        color: 'rgba(0, 200, 0, 0.5)',
        itemStyle: {
            borderColor: 'green',
            borderWidth: 1
        }
    }],

Upvotes: 2

David Semyonov
David Semyonov

Reputation: 19

You need to added css in that code.

How to make corners of progress bar round in css

I find solution here and it will works for you.

Upvotes: -3

Related Questions