Search code examples
javascriptaxis-labelsgantt-chartamcharts4

amchart last label on dateAxis is not visible properly

I have an issue when displaying a Gantt chart using the latest amcharts version 4. Not able to see the last label when the start and end dates are close. If I use the long duration then I can see the last label on the date axis.

enter image description here

Date axis properties used below:

    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    dateAxis.renderer.minGridDistance = 70;
    dateAxis.baseInterval = { count: 1, timeUnit: "day" };
    dateAxis.renderer.tooltipLocation = 0;
    dateAxis.cursorTooltipEnabled = false;
    dateAxis.strictMinMax = true;

Chart data:

data = [ {
  "category": "",
  "start": "2015-03-25",
  "end": "2015-05-09",
  "color": "#1DB329",
  "task": "Active base license"
}, {
  "category": "",
  "start": "2015-05-09",
  "end": "2015-05-24",
  "color": "#FFC048",
  "task": "Warning period"
}];

Codepen https://codepen.io/prashantbiradar92/pen/abpOVap

Solution

  • If you need to see the last label at the edge of the chart, set a paddingRight value to an appropriate value so you can see the last label, for example:

    chart.paddingRight = 50;

    Alternatively, if you don't need to see the final label, you can adjust the axis' maxPosition to hide it as documented here:

    dateAxis.renderer.maxLabelPosition = 0.95;