Stacked bar chart - border radius applied to last element of series only

[blueeDeveloper]

Description

Suppose i have a series as shown below. If "NOT TESTED" data is 0, then border radius should be applied to the previous series element. i.e. SKIP. That is not the case happening in my codepen.

series: [ { name: 'SUCCESS', data: result.success }, { name: 'FAILURE', data: result.failure }, { name: 'SKIP', data: result.skip }, { name: 'NOT TESTED', data: result.untested } ],

Expected Behavior

Stacked bar chart should have border radius to top most element in all scenarios. Even if last element of chart series is empty, border radius should be applied to the next last element.

Screenshots

1. As you can see, the border radius is absent when the last element of the series is 0.

2. When i apply below css, border radius gets applied to every series. I wanted it to get applied only the topmost.

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

Reproduction Link

CODEPEN LINK BELOW https://codepen.io/a166617/pen/NWgOQNe

[Tim260399]

I have the same problem by vue-apexchart

[blueeDeveloper]

I have the same problem by vue-apexchart

Hi @Tim260399 - have you raised a similar bug issue elsewhere ?

[brianlagunas]

As a workaround you can try using the new borderRadius feature that applies a border to all series by defining it as an array.

borderRadius: [5]

However, in this case do not use a very large border radius or it can impact the chart accuracy

[blueeDeveloper]

@brianlagunas thanks for suggesting the workaround. It somehow hides the border radius of the charts at the middle but the overall percentage bar shows reduced too and that will be very confusing for the end user. :(

for ex below. All 3 bars sums up to 80 but due to borderRadius: [5], the first 2 bars donot show that the total is 80.

[brianlagunas]

don't forget to remove the

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

I get this:

But yes, this will slightly impact the accuracy of the chart

[blueeDeveloper]

@brianlagunas - True, its similar to not having border radius. Can you please let us know if a fix will be available anytime soon ?

[alexprey]

Still an issue for 3.33.2

[danicaus]

Having the same problem here. Still an issue for 3.35.3.

[gyurielf]

And still in 3.36.0

[junedchhipa]

There is a new property

plotOptions: {
  bar: {
    borderRadiusApplication: "around", // "around" / "end" 
    borderRadiusWhenStacked: "last" // "all"/"last"
  }
}

Docs: https://apexcharts.com/docs/options/plotoptions/bar/#borderRadiusApplication

[gyurielf]

There is a new property

plotOptions: {
  bar: {
    borderRadiusApplication: "around", // "around" / "end" 
    borderRadiusWhenStacked: "last" // "all"/"last"
  }
}

Docs: https://apexcharts.com/docs/options/plotoptions/bar/#borderRadiusApplication

Yep, thy! I found it, a little while ago.

But, i think the part of the question is: on the first attached img, the second and 3rd colums should be rounded as well. Because those are last (shown) items.

[satishreddykoppella]

@gyurielf I have tried below plotOptions for stacked bar chart but didn't solve the problem. I don't see border radius applied. can you please let me know if it works for you ?

plotOptions: { bar: { borderRadiusApplication: "around", borderRadiusWhenStacked: "last" } }

[gyurielf]

@satishreddykoppella

https://codepen.io/gyurielf/pen/VwdPLQM

[satishreddykoppella]

@gyurielf I have edited details of codepen and attaching screenshot here Note:- I have edited the Product D data

• Product D can have zero for some index. In that case how can i apply border radius last product ( can be any Product Not necessarily Product D) in each bar graph.

[gyurielf]

@satishreddykoppella

That is the problem, we can't.

[developOleg250]

You can use next code

    plotOptions: {
        bar: {
          horizontal: false,
          borderRadius: 10,
          borderRadiusApplication: "end",
          borderRadiusWhenStacked: "last",

          dataLabels: {
            total: {
              enabled: true,
              style: {
                fontSize: "13px",
                fontWeight: 900,
              },
            },
          },
        },
      },

[satishreddykoppella]

You can use next code

    plotOptions: {
        bar: {
          horizontal: false,
          borderRadius: 10,
          borderRadiusApplication: "end",
          borderRadiusWhenStacked: "last",

          dataLabels: {
            total: {
              enabled: true,
              style: {
                fontSize: "13px",
                fontWeight: 900,
              },
            },
          },
        },
      },

@developOleg250 I have tried didn't work for me. Can you please share some implemented codepen link ?

[wentaoGather]

I also get the same issue here, is there any solution for this?

[Lunkobelix]

I got help from a friendly soul and this worked for me:

plotOptions:
    bar:
      horizontal: false
      borderRadius:
        - 5
        - 5
      borderRadiusApplication: end
      borderRadiusWhenStacked: all

[satishreddykoppella]

@Lunkobelix I have implemented the changes you suggested. But I could see some style issue. can you please share some implemented codepen link ?

[Lunkobelix]

I hope this example can help you.

https://pastebin.com/ZVeBfJku

[mizinin]

Same problem here. If last data set have a zero value, no border radius is applied. No working solution yet :(

@junedchhipa can you help with this?

[guillaume-caulier]

Same problem.

[jgwinner]

Why is this closed? We ran into the same issue.

If you use borderRadiusWhenStacked: "last" as proposed it looks weird, if any 'top' data value is 0. This is what we're trying to avoid.

Reproducible sample with the proposed solution (that didn't work for us) is at: https://codepen.io/JGwinner/pen/GRzPXEG

With:

         bar: {
            horizontal: false,
            endingShape: "rounded",
            borderRadius: 20,
            borderRadiusApplication: "end", // "around" / "end" 
            borderRadiusWhenStacked: "last" // "all"/"last"          
           },

[yevhenii-f]

I'd propose to reopen this issue with regards to latest comments. I'm facing the same issue and borderRadiusWhenStacked: "last" does not solve an issue if top data points contain 0 value.

[dima-kov]

still an issue

[fernandolangaro]

I used @brianlagunas css property to create a solution. This is how I did it, it works great, you might need to tweak it a bit to fit your needs:

first get the series of your chart: const seriesElements = document.querySelectorAll('#yourChartId .apexcharts-bar-series.apexcharts-plot-series .apexcharts-series')

then determine the length of series data, based on your first serie, running this: const seriesDataLength = seriesElements[0].querySelectorAll('.apexcharts-bar-area').length

finally iterate over all of them and set the border to the last one:

for (let i = 0; i < seriesDataLength; i++) {
  const lastElements = []

  seriesElements.forEach((serie) => {
    const bar = serie.querySelectorAll('.apexcharts-bar-area')[i]
    if (bar && bar.getAttribute('barHeight') !== '0') {
      lastElements.push(bar)
    }
  })

  const lastElement = lastElements[lastElements.length - 1]

  if (lastElement) {
    lastElement.setAttribute('clip-path', 'inset(0% 0% -100% 0% round 4px)')
  }
}

[mwinner313]

can any body help me with this?