amcharts4 icon indicating copy to clipboard operation
amcharts4 copied to clipboard

In race chart there is some labels are missing

Open faizan-naeemm opened this issue 5 months ago • 9 comments

I am plotting amcharts 4 Race Chart. The problem I am getting is that some times there are some labels which does not appear . label missing

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);
  });

`

faizan-naeemm avatar Jan 18 '24 09:01 faizan-naeemm