How to add rounded corners for amcharts?

Question

I am creating an amchart. It contains some chart data, for this I want to make rounded corners for both sides of chart.

It is working when I added first element in all charts data.

I have included codepen link what I have tried. https://codepen.io/meeravali_shaik/pen/xobPOB

Thanks in advance.

chart.data = [{
 "country": "Lithuania",
  "research": 501.9,
  "marketing": 250,
  "sales": 199
}
, {
   "country": "Republic",
   //"research": 301.9,   // if commented radius is not effecting
   "marketing": 222,
   "sales": 251
 }

Answer 1

You need to find the first element in your cornerRadius1 method. I used a flag variable to get only the first bar of the stacked bar chart. Check out the following:

 am4core.useTheme(am4themes_animated); am4core.useTheme(am4themes_dataviz); // Create chart instance var chart = am4core.create("chartdiv", am4charts.XYChart); // Add data chart.data = [{ "country": "Lithuania", "research": 501.9, "marketing": 250, "sales": 199 } , { "country": "Republic", //"research": 301.9, "marketing": 222, "sales": 251 } ]; // Create axes var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis()); categoryAxis.dataFields.category = "country"; categoryAxis.title.text = "Local country offices"; categoryAxis.renderer.grid.template.location = 0; categoryAxis.renderer.minGridDistance = 20; var valueAxis = chart.xAxes.push(new am4charts.ValueAxis()); valueAxis.title.text = "Expenditure (M)"; // Create series var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.valueX = "research"; series.dataFields.categoryY = "country"; series.name = "Research"; series.tooltipText = "{name}: [bold]{valueY}[/]"; series.stacked = true; series.columns.template.column.adapter.add("cornerRadiusTopLeft", cornerRadius1); series.columns.template.column.adapter.add("cornerRadiusBottomLeft", cornerRadius1); series.columns.template.column.adapter.add("cornerRadiusBottomRight", cornerRadius); series.columns.template.column.adapter.add("cornerRadiusTopRight", cornerRadius); var series2 = chart.series.push(new am4charts.ColumnSeries()); series2.dataFields.valueX = "marketing"; series2.dataFields.categoryY = "country"; series2.name = "Marketing"; series2.tooltipText = "{name}: [bold]{valueY}[/]"; series2.stacked = true; series2.columns.template.column.adapter.add("cornerRadiusTopLeft", cornerRadius1); series2.columns.template.column.adapter.add("cornerRadiusBottomLeft", cornerRadius1); series2.columns.template.column.adapter.add("cornerRadiusBottomRight", cornerRadius); series2.columns.template.column.adapter.add("cornerRadiusTopRight", cornerRadius); var series3 = chart.series.push(new am4charts.ColumnSeries()); series3.dataFields.valueX = "sales"; series3.dataFields.categoryY = "country"; series3.name = "Sales"; series3.tooltipText = "{name}: [bold]{valueY}[/]"; series3.stacked = true; series3.columns.template.column.adapter.add("cornerRadiusTopLeft", cornerRadius1); series3.columns.template.column.adapter.add("cornerRadiusBottomLeft", cornerRadius1); series3.columns.template.column.adapter.add("cornerRadiusBottomRight", cornerRadius); series3.columns.template.column.adapter.add("cornerRadiusTopRight", cornerRadius); // Add cursor chart.cursor = new am4charts.XYCursor(); function cornerRadius(radius, item) { var dataItem = item.dataItem; // Find the last series in this stack var lastSeries; chart.series.each(function(s) { if (dataItem.dataContext[s.dataFields.valueX] && !s.isHidden && !s.isHiding) { lastSeries = s; } }); // If current series is the one, use rounded corner dataItem.component == lastSeries ? 100 : radius; return dataItem.component == lastSeries ? 10 : radius; } function cornerRadius1(radius, item) { var dataItem = item.dataItem; // Find the last series in this stack var firstSeries = chart.series.values[0]; // If current series is the one, use rounded corner var flag = false; chart.series.each(function(s) { if (dataItem.dataContext[s.dataFields.valueX] && !s.isHidden && !s.isHiding && !flag) { firstSeries = s; flag = true; } }); dataItem.component == firstSeries ? 100 : radius; // console.log(dataItem) return dataItem.component == firstSeries ? 10 : radius; } chart.legend = new am4charts.Legend(); 

 body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 9pt; } #chartdiv { width: 100%; height: 401px; } 

 <script src="http://www.amcharts.com/lib/4/core.js"></script> <script src="http://www.amcharts.com/lib/4/charts.js"></script> <script src="http://www.amcharts.com/lib/4/themes/animated.js"></script> <script src="http://www.amcharts.com/lib/4/themes/dataviz.js"></script> <body> <div id="chartdiv"></div> </body>