Chart with multiple CategoryAxis
This simple demo shows an XYChart where each series uses own CategoryAxis with completely different categories.
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: "Category A-1", category2: "Category B-1", value: 450, value2: 950 }, { category: "Category A-2", category2: "Category B-2", value: 1200, value2: 600 }, { category: "Category A-3", category2: "Category B-3", value: 1850, value2: 1200 }];
// Create axesvar categoryAxis1 = chart.xAxes.push(new am4charts.CategoryAxis());categoryAxis1.dataFields.category = "category";categoryAxis1.renderer.grid.template.location = 0;
var categoryAxis2 = chart.xAxes.push(new am4charts.CategoryAxis());categoryAxis2.dataFields.category = "category2";categoryAxis2.renderer.grid.template.location = 0;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create seriesvar series1 = chart.series.push(new am4charts.LineSeries());series1.dataFields.valueY = "value";series1.dataFields.categoryX = "category";series1.strokeWidth = 3;series1.xAxis = categoryAxis1;
var series2 = chart.series.push(new am4charts.LineSeries());series2.dataFields.valueY = "value2";series2.dataFields.categoryX = "category2";series2.strokeWidth = 3;series2.xAxis = categoryAxis2;<div id="chartdiv"></div>@import url("https://fonts.googleapis.com/css?family=Archivo+Narrow");
body { font-family: "Archivo Narrow";}
#chartdiv { width: 100%; height: 250px;}multiple-category-axes