Amcharts: Multiple category axis grid alignment issue in Column series chart

Viewed 146

I am trying to create horizontal column series chart having multiple category axis. Both categories are not aligned with same grid lines.

I am tried below but still same issue. categoryAxis1.syncWithAxis = categoryAxis;

Need help to resolve this.

Please refer below link https://jsfiddle.net/8e0hqa6b/2/

/**
 * ---------------------------------------
 * 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

var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.padding(40, 40, 40, 40);
chart.topAxesContainer.layout = "horizontal";
chart.topAxesContainer.reverseOrder = false;

var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis());
/* categoryAxis.renderer.grid.template.location = 0; */
categoryAxis.dataFields.category = "network";
/* categoryAxis.renderer.minGridDistance = 1; */
categoryAxis.renderer.inversed = true;
categoryAxis.renderer.grid.template.disabled = true;
categoryAxis.layout = "absolute";
categoryAxis.renderer.labels.template.align = 'left';

// Set up axis title
categoryAxis.title.text = "Accounts";
categoryAxis.title.rotation = 0;
categoryAxis.title.align = "left";
categoryAxis.title.valign = "top";
categoryAxis.title.dy = -22;
categoryAxis.title.fontWeight = 500;

var categoryAxis1 = chart.yAxes.push(new am4charts.CategoryAxis());
categoryAxis1.dataFields.category = "MAU1";
categoryAxis1.renderer.inversed = true;
categoryAxis1.renderer.grid.template.disabled = true;
categoryAxis1.layout = "absolute";
categoryAxis1.renderer.labels.template.align = 'right';
categoryAxis1.syncWithAxis = categoryAxis;
// Set up axis title
categoryAxis1.title.text = "Amount";
categoryAxis1.title.rotation = 0;
categoryAxis1.title.align = "right";
categoryAxis1.title.valign = "top";
categoryAxis1.title.dy = -22;
categoryAxis1.title.fontWeight = 500;


var interfaceColors = new am4core.InterfaceColorSet();
var positiveColor = interfaceColors.getFor("positive");
var negativeColor = interfaceColors.getFor("negative");

var valueAxis = chart.xAxes.push(new am4charts.ValueAxis());
valueAxis.renderer.opposite = true;
valueAxis.min = 0;
valueAxis.renderer.labels.template.disabled = true;
valueAxis.renderer.grid.template.disabled = true;
valueAxis.renderer.baseGrid.disabled = true;


var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryY = "network";
series.dataFields.valueX = "MAU";
series.yAxis = categoryAxis;
series.tooltipText = "{valueX.value}"
series.columns.template.strokeOpacity = 0;
series.columns.template.column.cornerRadiusBottomRight = 2;
series.columns.template.column.cornerRadiusTopRight = 2;
/* series.columns.template.column.dy = -6 */

var series1 = chart.series.push(new am4charts.ColumnSeries());
series1.dataFields.categoryY = "MAU1";
series1.dataFields.valueX = "MAU";
series1.yAxis = categoryAxis1;
series1.tooltipText = "{valueX.value}"
series1.columns.template.disabled = true;

// as by default columns of the same series are of the same color, we add adapter which takes colors from chart.colors color set
/* series.columns.template.adapter.add("fill", function(fill, target){
  return chart.colors.getIndex(target.dataItem.index);
}); */
/* categoryAxis1.sortBySeries = series; */
/* categoryAxis.sortBySeries = series; */

chart.data = [{
    "network": "Facebook",
    "MAU": 2255250000,
    "MAU1": 2255250000
  },
  {
    "network": "Google+",
    "MAU": 430000000,
    "MAU1": 430000000
  },
  {
    "network": "Instagram",
    "MAU": 1000000000,
    "MAU1": 1000000000
  },
  {
    "network": "Pinterest",
    "MAU": 246500000,
    "MAU1": 246500000
  },
  {
    "network": "Reddit",
    "MAU": 355000000,
    "MAU1": 355000000
  },
  {
    "network": "TikTok",
    "MAU": 500000000,
    "MAU1": 500000000
  },
  {
    "network": "Tumblr",
    "MAU": 624000000,
    "MAU1": 624000000
  },
  {
    "network": "Twitter",
    "MAU": 329500000,
    "MAU1": 329500000
  },
  {
    "network": "WeChat",
    "MAU": 1000000000,
    "MAU1": 1000000000
  }
]

0 Answers
Related