Amcharts- how to align multiple series of circle bubbles horizontally

Question

I want to draw a heatmap with bubbles for different fields like the following picture which alignes horizontally for each year.

Here is the codepen (buble amcharts)

However, I still got stuck after reading a lot of docs at amcharts. I created 5 series in total for each field, using the following codes:

 let chart = am4core.create(title, am4charts.XYChart);
 chart.maskBullets = false;

// Add data
chart.data = [{
  "value1": 8.4,
  "value2": 1,
  "value3": 0,
  "quarter": "q1",
  "year": "2011"
}, {
   "value1": 13,
  "value2": 4,
  "value3": 0,
  "quarter": "q2",
  "year": "2011"
}, {
   "value1": 28,
  "value2": 13,
  "value3": 10,
  "quarter": "q3",
  "year": "2011"
}, {
   "value1": 5.6,
  "value2": 4,
  "value3": 1,
  "quarter": "q4",
  "year": "2011"
}, {
  "value1": 4,
  "value2": 12,
  "value3": 2,
  "quarter": "q1",
  "year": "2012"
}, {
   "value1": 16,
  "value2": 5,
  "value3": 3,
  "quarter": "q2",
  "year": "2012"
}, {
   "value1": 19,
  "value2": 8,
  "value3": 6,
  "quarter": "q3",
  "year": "2012"
}, {
  "value1": 8.4,
  "value2": 1,
  "value3": 0,
  "quarter": "q4",
  "year": "2012"
}, {
  "value1": 4,
  "value2": 12,
  "value3": 2,
  "quarter": "q1",
  "year": "2013"
}, {
   "value1": 16,
  "value2": 5,
  "value3": 3,
  "quarter": "q2",
  "year": "2013"
}, {
   "value1": 19,
  "value2": 8,
  "value3": 6,
  "quarter": "q3",
  "year": "2013"
}, {
  "value1": 8.4,
  "value2": 1,
  "value3": 0,
  "quarter": "q4",
  "year": "2013"
}
];

    let xAxis = chart.xAxes.push(new am4charts.CategoryAxis());

    let yAxis = chart.yAxes.push(new am4charts.CategoryAxis());

    yAxis.dataFields.category = "year";
    xAxis.dataFields.category = "quarter";
    
    // configure grid
    yAxis.renderer.grid.template.location = 0;
    xAxis.renderer.grid.template.location = 0;
    // configure labels
    xAxis.renderer.minGridDistance =30;
    
    yAxis.renderer.minGridDistance =30;
    xAxis.renderer.labels.template.location = 0.5;
    yAxis.renderer.labels.template.location=0.5;

    // alternating axis fills
    xAxis.renderer.axisFills.template.disabled = false;
    xAxis.renderer.axisFills.template.fillOpacity = 0.1;
    xAxis.renderer.axisFills.template.fill = am4core.color("grey");
 
 function createSeries(category, color, name):any {
      let series = chart.series.push(new am4charts.ColumnSeries());
      series.name = name;
      series.dataFields.categoryY = "year";
      series.dataFields.categoryX = "quarter";
      series.dataFields.value = category;
      series.columns.template.disabled = true;
      series.sequencedInterpolation = true;
      series.defaultState.transitionDuration = 3000;
      
      let circleBullet = series.bullets.push(new am4core.Circle());
      circleBullet.tooltipText = tooltiptext;
      circleBullet.fill = am4core.color(color);
      circleBullet.strokeOpacity = 0.2;
      circleBullet.fillOpacity = 0.8;
      circleBullet.y = 0.5;

      series.heatRules.push({property:"radius", target:circleBullet, min:1, max:12});
      return series;
    }

    let series1 = createSeries("value1","#ffc947","#Series-avgT");
    let series2 =  createSeries("value2","#f5a962","#Series-cT>30°C");
    let series3 = createSeries("value3","#3c8dad", "#Series-cT<0°C");
  
 

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>

The series shift above like the following picture. How can I get them align the y axis ? Thank you very much.

Answer 1

I posted this question also in Amcharts in github. Someone helped me with a walkaround trick. Instead of y axis als category axis, it's better to push y axis als value axis. then we can set the value of y axis.

yAxis.maxPrecision = 0
yAxis.min = 2010.5
yAxis.max = 2013.5
yAxis.strictMinMax = true;

The link of this issue is following: question in amcharts