如何使3轴垂直的amChart列

Question

I want to create vertical clustered column chart using amChart with 3 axis.

I already made the horizontal design like this code shown below, my question is... how can i make this chart vertical?

As far as i know (googling), amChart can easily do this by rotating the labels . my question is... where should i put this "rotate": true ? i'm not familiar with javascript. Anyone can help?

any help will be very much appreciate.

 /** * --------------------------------------- * 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 begin am4core.useTheme(am4themes_animated); // Themes end // Create chart instance var chart = am4core.create("chartdiv", am4charts.XYChart); // Add data chart.data = [{ "year": 2005, "income": 23.5, "expenses": 18.1, "cumi" : 13 },{ "year": 2006, "income": 26.2, "expenses": 22.8, "cumi" : 13 },{ "year": 2007, "income": 30.1, "expenses": 23.9, "cumi" : 13 },{ "year": 2008, "income": 29.5, "expenses": 25.1, "cumi" : 13 },{ "year": 2009, "income": 24.6, "expenses": 25, "cumi" : 13 }]; // Create axes var 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 series function 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.columns.template.height = am4core.percent(100); series.sequencedInterpolation = true; var valueLabel = series.bullets.push(new am4charts.LabelBullet()); valueLabel.label.text = "{valueX}"; valueLabel.label.horizontalCenter = "left"; valueLabel.label.dx = 10; valueLabel.label.hideOversized = false; valueLabel.label.truncate = false; var categoryLabel = series.bullets.push(new am4charts.LabelBullet()); categoryLabel.label.text = "{name}"; categoryLabel.label.horizontalCenter = "right"; categoryLabel.label.dx = -10; categoryLabel.label.fill = am4core.color("#fff"); categoryLabel.label.hideOversized = false; categoryLabel.label.truncate = false; } createSeries("income", "Income"); createSeries("expenses", "Expenses"); createSeries("cumi", "Cumi"); 

 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; } 

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

Answer 1

You will need to replace chart.yAxes for chart.xAxes and chart.xAxes for chart.yAxes .

Essentially CategoryAxis needs to go to xAxes and ValueAxis needs to go to yAxes .

You will also need to change valueX for valueY and categoryY for categoryX :

series.dataFields.valueY = field;
series.dataFields.categoryX = "year";

There few other changes on the example below. I recommend you to check more about axes in the documentation .

 /** * --------------------------------------- * 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 begin am4core.useTheme(am4themes_animated); // Themes end // Create chart instance var chart = am4core.create("chartdiv", am4charts.XYChart); // Add data chart.data = [{ "year": 2005, "income": 23.5, "expenses": 18.1, "cumi" : 13 },{ "year": 2006, "income": 26.2, "expenses": 22.8, "cumi" : 13 },{ "year": 2007, "income": 30.1, "expenses": 23.9, "cumi" : 13 },{ "year": 2008, "income": 29.5, "expenses": 25.1, "cumi" : 13 },{ "year": 2009, "income": 24.6, "expenses": 25, "cumi" : 13 }]; // Create axes var categoryAxis = chart.xAxes.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.yAxes.push(new am4charts.ValueAxis()); valueAxis.renderer.opposite = true; // Create series function createSeries(field, name) { var series = chart.series.push(new am4charts.ColumnSeries()); series.dataFields.valueY = field; series.dataFields.categoryX = "year"; series.name = name; series.columns.template.tooltipText = "{name}: [bold]{valueX}[/]"; series.columns.template.height = am4core.percent(100); series.sequencedInterpolation = true; var valueLabel = series.bullets.push(new am4charts.LabelBullet()); valueLabel.label.text = "{valueX}"; valueLabel.label.verticalCenter = "bottom"; valueLabel.label.dx = 10; valueLabel.label.hideOversized = false; valueLabel.label.truncate = false; var categoryLabel = series.bullets.push(new am4charts.LabelBullet()); categoryLabel.label.text = "{name}"; categoryLabel.label.verticalCenter = "top"; categoryLabel.label.dx = -10; categoryLabel.label.hideOversized = false; categoryLabel.label.truncate = false; categoryLabel.label.rotation = -90; } createSeries("income", "Income"); createSeries("expenses", "Expenses"); createSeries("cumi", "Cumi"); 

 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; } 

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