amcharts yaxis multiseries synchronization

Question

Good evening, I have a multi-series graphic, with 5 series and I need to synchronize the axes and, all with the same axis, but in the code I have I don't know how to do it, could someone help me please? This code is working but without syncronization. Thank you

My code is:

 function createAxisAndSeries(field, name, opposite, bullet) {
  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
   var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = field;
  series.dataFields.categoryX = "mesdia";
  series.strokeWidth = 2;
  series.yAxis = valueAxis;
  series.name = name;
  series.minBulletDistance = 10;

  var interfaceColors = new am4core.InterfaceColorSet();

  switch(bullet) {
    case "triangle":
      valueAxis.renderer.line.disabled = true; //disables axis line
      valueAxis.renderer.labels.template.disabled = true; //disables labels
      valueAxis.renderer.grid.template.disabled = true;  //disables grid
      var bullet = series.bullets.push(new am4charts.Bullet());
      bullet.horizontalCenter = "middle";
      bullet.verticalCenter = "middle";

      var triangle = bullet.createChild(am4core.Triangle);
      triangle.stroke = interfaceColors.getFor("background");
      triangle.strokeWidth = 2;
      triangle.direction = "top";
      break;
    case "rectangle":
      valueAxis.renderer.line.disabled = true; //disables axis line
      valueAxis.renderer.labels.template.disabled = true; //disables labels
      valueAxis.renderer.grid.template.disabled = true;  //disables grid
      var bullet = series.bullets.push(new am4charts.Bullet());
      bullet.horizontalCenter = "middle";
      bullet.verticalCenter = "middle";

      var rectangle = bullet.createChild(am4core.Rectangle);
      rectangle.stroke = interfaceColors.getFor("background");
      rectangle.strokeWidth = 2;
      break;
    default:
      var bullet = series.bullets.push(new am4charts.CircleBullet());
      bullet.circle.stroke = interfaceColors.getFor("background");
      bullet.circle.strokeWidth = 2;
      break;
  }

  valueAxis.renderer.line.stroke = series.stroke;
  valueAxis.renderer.labels.template.fill = series.stroke;
  valueAxis.renderer.opposite = opposite;
  valueAxis.renderer.grid.template.disabled = true;
}

createAxisAndSeries("a2020", "2020", false, "default");
createAxisAndSeries("a2019", "2019", false, "circle");
createAxisAndSeries("a2018", "2018", false, "triangle");
createAxisAndSeries("a2017", "2017", false, "rectangle");
createAxisAndSeries("a2016", "2016", false, "rectangle");

score 0 · Answer 1 · answered Jun 09 '20 at 21:05

I figure out how to do what I need.. I must change the code like this

function createAxisAndSeries(field, name, opposite, bullet) {
  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  **if(chart.yAxes.indexOf(valueAxis) != 0){
    valueAxis.syncWithAxis = chart.yAxes.getIndex(0);
  }**
  //valueAxis.disabled=true;
  var series = chart.series.push(new am4charts.LineSeries());
  series.dataFields.valueY = field;
  series.dataFields.categoryX = "mesdia";
  series.strokeWidth = 2;
  **series.yAxis = chart.yAxes.getIndex(0);**
  series.name = name;
  series.tooltipText = "{name}: [bold]{valueY}[/]";
  series.minBulletDistance = 10;

amcharts yaxis multiseries synchronization

1 Answers1