amcharts4
amcharts4 copied to clipboard
In race chart there is some labels are missing
I am plotting amcharts 4 Race Chart. The problem I am getting is that some times there are some labels which does not appear .
as in the attached file you can see.
this is my code
` function createSeries() {
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.categoryY = "EntityName";
series.dataFields.valueX = "EntValue";
series.tooltipText = "{valueX.value}";
series.columns.template.strokeOpacity = 0;
series.columns.template.column.cornerRadiusBottomRight = 5;
series.columns.template.column.cornerRadiusTopRight = 5;
series.interpolationDuration = stepDuration;
series.interpolationEasing = am4core.ease.linear;
var labelBullet = series.bullets.push(new am4charts.LabelBullet());
labelBullet.label.horizontalCenter = "left"; //--Default value in documentation is right. left is to show the value outside bar
labelBullet.label.text =
"{values.valueX.workingValue.formatNumber('#.0as')}";
labelBullet.label.textAlign = "end";
labelBullet.label.dx = 5; //--Default value is -10. -10 will show the value inside bar end
labelBullet.label.truncate = false;
labelBullet.label.wrap = false;
labelBullet.label.maxWidth = 200;
//--✅ End: Bar Lenght
labelBullet.label.fontSize = ismobile == 1 ? 12 : 15;
chart.zoomOutButton.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) {
//--use below return if do not want to use BarColors colors
return chart.colors.getIndex(target.dataItem.index);
});
return series;
}
var series = createSeries();
var year = maxYear;
label.text = year.toString();
var interval;
function play() {
interval = setInterval(function(){
nextYear();
}, stepDuration)
nextYear();
}
function stop() {
if (interval) {
clearInterval(interval);
}
}
function nextYear() {
year--
if (year < minYear) {
year = maxYear;
}
var newData = allData[year];
var itemsWithNonZero = 0;
for (var i = 0; i < chart.data.length; i++) {
chart.data[i].EntValue = newData[i].EntValue;
if (chart.data[i].EntValue > 0) {
itemsWithNonZero++;
}
}
if (year == maxYear) {
series.interpolationDuration = stepDuration / 4;
valueAxis.rangeChangeDuration = stepDuration / 4;
}
else {
series.interpolationDuration = stepDuration;
valueAxis.rangeChangeDuration = stepDuration;
}
chart.invalidateRawData();
label.text = year.toString();
categoryAxis.zoom({ start: 0, end: itemsWithNonZero / categoryAxis.dataItems.length });
}
categoryAxis.sortBySeries = series;
chart.data = JSON.parse(JSON.stringify(allData[year]));
categoryAxis.zoom({ start: 0, end: 1 / chart.data.length });
if (languageId == 1) {
chart.rtl = true;
}
chart.events.on('ready', () => {
year = maxYear + 1
nextYear();
setTimeout(function () {
playButton.isActive = true; // this starts interval
}, 4000);
});
`