Grouped Stacked Bar Chart - border radius applied only to last element of series

[adilvalizada]

I have an issue about border at Grouped Stacked bar chart. I can't add border radius at all bar column.

[Mahdisaghroun]

@adilvalizada Could you please share your code so I can take a closer look and help you out?

[adilvalizada]

export const stackedComboConfigOptions = ({ dynamicSeries, }: ChartOptionsType) => { return { chart: { id: 'basic-bar', stacked: true, toolbar: { show: false, }, }, stroke: { width: dynamicSeries?.map((series) => (series as SeriesItem)?.type === 'line' ? 5 : 1, ), }, plotOptions: { bar: { columnWidth: '90%', // Adjust this value to control the width of bars horizontal: false, borderRadius: 10, borderRadiusApplication: 'end', // "around" / "end" borderRadiusWhenStacked: 'last', // "all"/"last" colors: { backgroundBarOpacity: 1, }, }, }, yaxis: { min: stackedComboMinMax(dynamicSeries).minValue, max: stackedComboMinMax(dynamicSeries).maxValue, tickAmount: 5, labels: { maxWidth: 160, align: 'left', formatter(value: number) { return convertToKAndM(value); }, style: { padding: '10px', fontFamily: styles.fontFamily, fontSize: '14px', fontWeight: '400', }, }, }, }; };

[adilvalizada]

Thanks for your reply, I would be grateful if you could help me.

[web-cloudy]

Hi, @adilvalizada

As an expert, I can say no problem. Could you share your code?
I will take only 30 mins.

Good luck :)

[adilvalizada]

export const stackedComboConfigOptions = ({ dynamicSeries, }: ChartOptionsType) => { return { chart: { id: 'basic-bar', stacked: true, toolbar: { show: false, }, }, stroke: { width: dynamicSeries?.map((series) => (series as SeriesItem)?.type === 'line' ? 5 : 1, ), }, plotOptions: { bar: { columnWidth: '90%', // Adjust this value to control the width of bars horizontal: false, borderRadius: 10, borderRadiusApplication: 'end', // "around" / "end" borderRadiusWhenStacked: 'last', // "all"/"last" colors: { backgroundBarOpacity: 1, }, }, }, yaxis: { min: stackedComboMinMax(dynamicSeries).minValue, max: stackedComboMinMax(dynamicSeries).maxValue, tickAmount: 5, labels: { maxWidth: 160, align: 'left', formatter(value: number) { return convertToKAndM(value); }, style: { padding: '10px', fontFamily: styles.fontFamily, fontSize: '14px', fontWeight: '400', }, }, }, }; };

[adilvalizada]

Hi Thanks for response , i am using this graphs (https://apexcharts.com/react-chart-demos/column-charts/grouped-stacked-columns/) i need solution for this. do you have an idea? how can i add border on this graph?

[Awais95-Dev]

Hi, @adilvalizada
I have solution to this. See the attachment, Is that what you want?

[adilvalizada]

Hi , Thanks for response, i need solution for grouped stacked bar (appexchartjs) https://apexcharts.com/react-chart-demos/column-charts/grouped-stacked-columns/