Using adapters to apply corner radii based on value
Below are two demos that use adapters to modify radii of the ColumnSeries columns based on their value.
Vertical columns
Section titled “Vertical columns”Open in:New tab
/** * --------------------------------------- * This demo was created using amCharts 4. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v4/ * --------------------------------------- */
am4core.useTheme(am4themes_animated);
// Create chart instancevar chart = am4core.create("chartdiv", am4charts.XYChart);
// Add datachart.data = [ { category: "Research", value: 450 }, { category: "Marketing", value: -1200 }, { category: "Distribution", value: 1850 }];
// Create axesvar categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());categoryAxis.dataFields.category = "category";categoryAxis.renderer.grid.template.location = 0;//categoryAxis.renderer.minGridDistance = 30;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create seriesvar series = chart.series.push(new am4charts.ColumnSeries());series.dataFields.valueY = "value";series.dataFields.categoryX = "category";
var columnTemplate = series.columns.template.column;
columnTemplate.adapter.add("cornerRadiusTopLeft", function (radius, target) { return target.dataItem.valueY > 0 ? 10 : 0;});
columnTemplate.adapter.add("cornerRadiusTopRight", function (radius, target) { return target.dataItem.valueY > 0 ? 10 : 0;});
columnTemplate.adapter.add("cornerRadiusBottomLeft", function (radius, target) { return target.dataItem.valueY < 0 ? 10 : 0;});
columnTemplate.adapter.add("cornerRadiusBottomRight", function (radius, target) { return target.dataItem.valueY < 0 ? 10 : 0;});<div id="chartdiv"></div>body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
#chartdiv { width: 100%; height: 500px;}using-adapters-to-tailor-corner-radii-for-positive-and-negatHorizontal bars
Section titled “Horizontal bars”Open in:New tab
/** * --------------------------------------- * This demo was created using amCharts 4. * * For more information visit: * https://www.amcharts.com/ * * Documentation is available at: * https://www.amcharts.com/docs/v4/ * --------------------------------------- */
// Themes beginam4core.useTheme(am4themes_animated);// Themes end
// Create chart instancevar chart = am4core.create("chartdiv", am4charts.XYChart);
// Add datachart.data = [ { year: 2005, income: 23.5, expenses: 18.1 }, { year: 2006, income: -26.2, expenses: -22.8 }, { year: 2007, income: 30.1, expenses: 23.9 }, { year: 2008, income: 29.5, expenses: 25.1 }, { year: 2009, income: -24.6, expenses: -25 }];
// Create axesvar categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());categoryAxis.dataFields.category = "year";categoryAxis.numberFormatter.numberFormat = "#";categoryAxis.renderer.inversed = true;categoryAxis.renderer.grid.template.location = 0;categoryAxis.renderer.cellStartLocation = 0.1;categoryAxis.renderer.cellEndLocation = 0.9;
var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());valueAxis.renderer.opposite = true;
// Create seriesfunction createSeries(field, name) { var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.valueX = field; series.dataFields.categoryY = "year"; series.name = name; series.columns.template.tooltipText = "{name}: [bold]{valueX}[/]"; series.sequencedInterpolation = true;
series.columns.template.column.adapter.add("cornerRadiusTopLeft", function (radius, target) { return target.dataItem && target.dataItem.valueX < 0 ? 15 : 0; }); series.columns.template.column.adapter.add("cornerRadiusBottomLeft", function (radius, target) { return target.dataItem && target.dataItem.valueX < 0 ? 15 : 0; });
series.columns.template.column.adapter.add("cornerRadiusTopRight", function (radius, target) { return target.dataItem && target.dataItem.valueX < 0 ? 0 : 15; }); series.columns.template.column.adapter.add("cornerRadiusBottomRight", function (radius, target) { return target.dataItem && target.dataItem.valueX < 0 ? 0 : 15; });}
createSeries("income", "Income");createSeries("expenses", "Expenses");<div id="chartdiv"></div>body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}
#chartdiv { width: 100%; height: 500px;}using-adapters-to-apply-corner-radii-based-on-value