Issue with AMCharts Series not appearing when The data has less than 3 values

Viewed 494

I am using AMCharts4 in a WordPress Project, everything works fine, but I am having a weird issue when I filter the data, let me show what's happening with images:

  • With All the data (Works 100% fine) Image Working Fine

-Filtering the data (More than 2 results works fine 100%)

Filtering Data working

  • Filtering the data (2 or Less results not showing the Scores, here is the bug)

enter image description here

See how it's not showing the respective scores as the 2 first images.

The question here is how do I make those scores appear? I have tried commented lines of code in my funcions but nothing seems to work.

You could reproduce the issue in this link selecting the Australia or Brazil location for example

And see my function here

labelBullet = series.bullets.push(new am4charts.LabelBullet())
labelBullet.label.horizontalCenter = "left";
labelBullet.label.dx = 10;
labelBullet.label.text = "{values.valueX.workingValue.formatNumber('#.')}";
labelBullet.locationX = 1;
1 Answers

The issue is in your usage of labelBullet.locationX = 1;. If you take a look at am4 Bullets documentation:

There's one caveat, though. For bullets, locationY property means the relative vertical position in the whole height of the column. That means that if our scale would not start at zero, it would be not in the direct center of the currently visible portion of the column.

As you are using inverted chart, same applies to locationX in your case. Meaning, label position is relative to the scale.

To fix the issue you can either set min for value axis to 0, as in this jsfiddle using:

valueAxis.min = 0;

or as mentioned in the document, push labels directly into column series template, as in this jsfiddle.

label = series.columns.template.createChild(am4core.Label);
label.text = "{values.valueX.workingValue.formatNumber('#.')}";
label.align = "left";
label.valign = "middle";
label.zIndex = 2;
Related