Force Last Label on Category Axis

[MohitKandpal]

I am using label rotation of 45 degrees in my chart. As the width of the div containing the chart reduces, labels start to disappear which is correct behavior. But I want to ensure that last label of the category axis must always appear irrespective of the chart width.

I followed this tutorial - https://www.amcharts.com/docs/v4/tutorials/force-first-and-last-labels-on-axis/

But it only works for DateAxis and ValueAxis. I want to achieve this for Category Axis. Is there any way to achieve this ?

[xorspark]

It's possible but not as cleanly as the date or value axis. Category axes don't have any in-between values, so you're going to run into cases where part of the category is visible due to the zoom and the label won't be visible because it cuts off where the label is drawn. You can work around this by tweaking the range's locations property to shift the axis range label to be off center so that it is (usually) visible even when most of the category is zoomed out. For example:

maxRangeX.locations.category = .2
maxRangeX.locations.endCategory = .3

There isn't a way to check how much of a category is visible to fine-tune this dynamically.

Updating the label is straightforward since the axis position can be directly mapped to the category item using positionToCategory:

function updateXLabels() {
  maxRangeX.category = categoryAxis.positionToCategory(categoryAxis.end)
  maxRangeX.label.text = maxRangeX.category
}

Codepen

[MohitKandpal]

The suggested fix works for me. Thanks.

[MohitKandpal]

Hi Anthony,

The above specified solution is breaking when data points are less as in that case the last label is getting rendered twice. In the codepen shared by you when I pass 5 as parameter value for count I got this chart- [image: image.png] Ideally if last label has been rendered then it should not render again. This is most probably happening because of the axis range we are creating. Is their a way to create that axis range only if last label has not been rendered ?

Thanks & Regards, Mohit

On Sat, Nov 4, 2023 at 6:00 PM Anthony P @.***> wrote:

It's possible but not as cleanly as the date or value axis. Category axes don't have any in-between values, so you're going to run into cases where part of the category is visible due to the zoom and the label won't be visible because it cuts off where the label is drawn. You can work around this by tweaking the range's locations property https://www.amcharts.com/docs/v4/concepts/axes/axis-ranges/#Range_locations to shift the axis range label to be off center so that it is (usually) visible even when most of the category is zoomed out. For example:

maxRangeX.locations.category = .2 maxRangeX.locations.endCategory = .3

There isn't a way to check how much of a category is visible to fine-tune this dynamically.

Updating the label is straightforward since the axis position can be directly mapped to the category item using positionToCategory:

function updateXLabels() { maxRangeX.category = categoryAxis.positionToCategory(categoryAxis.end) maxRangeX.label.text = maxRangeX.category }

Codepen https://codepen.io/team/amcharts/pen/zYeozXV/64c70dadf4e69c29c308c1a4855462da?editors=0010

— Reply to this email directly, view it on GitHub https://github.com/amcharts/amcharts4/issues/4337#issuecomment-1793430610, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJA7KAOXVFBH6OOERUC2MO3YCYYP5AVCNFSM6AAAAAA636YYGSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJTGQZTANRRGA . You are receiving this because you authored the thread.Message ID: @.***>

[xorspark]

There isn't a way to detect whether an axis label is visible or not. You can decrease the maxLabelPosition to try to avoid rendering the last label generated by the axis.