Stacked axes with CategoryAxis between them
This demo shows how we can place a CategoryAxis between two stacked ValueAxis.
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 = [ { ldd: "A01", negative: 72, positive: 20, group: "A" }, { ldd: "A02", negative: 42, positive: 44, group: "A" }, { ldd: "A03", negative: 58, positive: 18, group: "A" },
{ ldd: "B01", negative: 75, positive: 28, group: "B" }, { ldd: "B02", negative: 72, positive: 24, group: "B" }, { ldd: "B03", negative: 42, positive: 44, group: "B" }, { ldd: "B04", negative: 58, positive: 18, group: "B" }, { ldd: "B05", negative: 75, positive: 28, group: "B" }, { ldd: "B06", negative: 72, positive: 24, group: "B" }, { ldd: "B07", negative: 42, positive: 44, group: "B" }, { ldd: "B08", negative: 58, positive: 18, group: "B" },
{ ldd: "C01", negative: 75, positive: 28, group: "C" }, { ldd: "C02", negative: 72, positive: 24, group: "C" }, { ldd: "C03", negative: 42, positive: 44, group: "C" }, { ldd: "C04", negative: 58, positive: 18, group: "C" }, { ldd: "C05", negative: 75, positive: 28, group: "C" }];
// Create axesvar categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());categoryAxis.dataFields.category = "ldd";categoryAxis.renderer.grid.template.location = 0;categoryAxis.renderer.minGridDistance = 30;categoryAxis.parent = chart.plotContainer;categoryAxis.valign = "middle";
// Points négatifsvar negativeValueAxis = chart.yAxes.push(new am4charts.ValueAxis());negativeValueAxis.min = 0;negativeValueAxis.max = 100;negativeValueAxis.renderer.labels.template.html = "{value}%";negativeValueAxis.marginBottom = 15;
var negativeSeries = chart.series.push(new am4charts.ColumnSeries());negativeSeries.dataFields.valueY = "negative";negativeSeries.dataFields.categoryX = "ldd";negativeSeries.name = "Negative points";negativeSeries.tooltipText = "{negative}";negativeSeries.stroke = 0;negativeSeries.yAxis = negativeValueAxis;negativeSeries.columns.template.fill = am4core.color("#f43a29");negativeSeries.clustered = false;
// Points positifsvar positiveValueAxis = chart.yAxes.push(new am4charts.ValueAxis());positiveValueAxis.min = 0;positiveValueAxis.max = 100;positiveValueAxis.renderer.inversed = true;positiveValueAxis.renderer.labels.template.html = "{value}%";positiveValueAxis.marginTop = 15;
var positiveSeries = chart.series.push(new am4charts.ColumnSeries());positiveSeries.dataFields.valueY = "positive";positiveSeries.dataFields.categoryX = "ldd";positiveSeries.name = "Negative points";positiveSeries.tooltipText = "{positive}";positiveSeries.stroke = 0;positiveSeries.yAxis = positiveValueAxis;positiveSeries.columns.template.fill = am4core.color("#39833c");positiveSeries.clustered = false;
chart.leftAxesContainer.layout = "vertical";<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: 350px;}stacked-axes-with-categoryaxis-between-them