Apexcharts.js: Stacked bar chart border radius

[marghoobahmad0344]

Bug report

Codepen

click on given link to view the issue this codepen
issue on reactjs this codepen

Explanation

• I want to make only top border rounded instead of each stack entity
• here is every stack stack entity shows rounded border
• No error message

[IsaacSomething]

For vertical columns

.apexcharts-bar-series.apexcharts-plot-series  .apexcharts-series path {
    clip-path: inset(0% 0% -11% 0% round 8px);
}

For horizontal bars

.apexcharts-bar-series.apexcharts-plot-series  .apexcharts-series path {
    clip-path: inset(0% 0% 0% -5% round 8px);
}

Disable the animations

chart: {
    height: 380,
     animations: {
          enabled: false
     },
}

---

EDIT
Since v3.26.0, there is a new property for border-radius

plotOptions: {
  bar: {
    borderRadius: 5
  }
}

[praneetloke]

@IsaacSomething your suggestion mostly works until I hover over the bar and it looks like this:

[IsaacSomething]

@praneetloke I think you might have to remove the hover state and active state. It should still show the tooltip

```

states: {
hover: {
filter: {
type: 'none',
}
},
active: {
filter: {
type: 'none',
}
},
}

[praneetloke]

Ah gotcha. Unfortunately, that won't work for me. I'd like to keep the hover state for accessibility reasons.

[junedchhipa]

Since v3.26.0, there is a new property for border-radius

plotOptions: {
  bar: {
    borderRadius: 5
  }
}