Clustering groups of non-clustered columns
This demo shows how we can separate non-clustered columns into separate non-overlapping groups, using their “data item locations”.
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);
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.data = [ { category: "One", value1: 10, value2: 5, value3: 15, value4: 25 }, { category: "Two", value1: 14, value2: 3, value3: 13, value4: 7 }];
chart.colors.step = 2;chart.padding(30, 30, 10, 30);
chart.legend = new am4charts.Legend();chart.legend.itemContainers.template.cursorOverStyle = am4core.MouseCursorStyle.pointer;
var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());categoryAxis.dataFields.category = "category";categoryAxis.renderer.minGridDistance = 60;categoryAxis.renderer.grid.template.location = 0;categoryAxis.interactionsEnabled = false;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());valueAxis.strictMinMax = true;valueAxis.calculateTotals = true;
valueAxis.renderer.minGridDistance = 20;valueAxis.renderer.minWidth = 35;valueAxis.min = 0;
var series1 = chart.series.push(new am4charts.ColumnSeries());series1.columns.template.tooltipText = "{name}: {valueY.totalPercent.formatNumber('#.00')}%";series1.columns.template.column.strokeOpacity = 1;series1.name = "Series 1";series1.dataFields.categoryX = "category";series1.dataFields.valueY = "value1";series1.dataItems.template.locations.categoryX = 0.5;series1.tooltip.pointerOrientation = "vertical";series1.tooltip.dy = -20;series1.cursorHoverEnabled = false;series1.clustered = false;
var series2 = chart.series.push(series1.clone());series2.name = "Series 2";series2.dataFields.valueY = "value2";series2.fill = chart.colors.next();series2.stroke = series2.fill;series2.cursorHoverEnabled = false;series2.clustered = false;
var series3 = chart.series.push(series1.clone());series3.name = "Series 3";series3.dataFields.valueY = "value3";series3.fill = chart.colors.next();series3.stroke = series3.fill;series3.cursorHoverEnabled = false;series3.clustered = false;
var series4 = chart.series.push(series1.clone());series4.name = "Series 3";series4.dataFields.valueY = "value4";series4.fill = chart.colors.next();series4.stroke = series4.fill;series4.cursorHoverEnabled = false;series4.clustered = false;
chart.scrollbarX = new am4core.Scrollbar();
chart.cursor = new am4charts.XYCursor();chart.cursor.behavior = "panX";
series1.columns.template.width = am4core.percent(40);series2.columns.template.width = am4core.percent(20);
series3.columns.template.width = am4core.percent(40);series4.columns.template.width = am4core.percent(20);
series1.dataItems.template.locations.categoryX = 0.25;series2.dataItems.template.locations.categoryX = 0.25;
series3.dataItems.template.locations.categoryX = 0.75;series4.dataItems.template.locations.categoryX = 0.75;<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;}clustering-groups-of-non-clustered-columns