datalabel being clipped/cutted

[batata004]

Please, check this minimal chart js code to reproduce this problem:

https://www.quemfazsite.com.br/temp/teste.php

Take a look at the righest point labeled "Giassiiiiii". You will see it is cutted/clipped:

I would like the datalabel to only show up if it's not gonna be clipped/cutted, I mean: only show the datalabel if it fits entirely inside the graph. If it does not fit entirely, then dont show it (I prefer not showing than displaying something clipped/cutted).

I tried using setting clip to true/false, I tried messing with clamp and anchor but nothing works.

Thank a lot.

[frederikhors]

Did you find a way?

[stockiNail]

@batata004 @frederikhors AFAIK this issue is related to missing space from chart area end and the canvas end.

To be able to show the label, you could:

1. add to chart option the layout.padding option, adding space (in pixels, below I put 60 but it depends on your use cases) to the right of chart area (which will be smaller)

options: {
    layout: {
        padding: {
            right: 60;
        }
    }
    ...
}

2. set clip: false to datalabels plugin.

It should work.

[stockiNail]

Another possible solution is to use align options as scriptable, where you can check if is the last item of the dataset and in yes, the align callback should return 'left'. Similar control can be done for the first label (setting right), to avoid to set clip and to reduce the size of chart area.

[batata004]

@stockiNail First of all, thank you for your solution. It worked but:

1. the number 60 at the padding right is "hardcoded", if the last label is really small then it would not even be necessary to use padding right. If the last label has too many letters, then the padding right will have to be more than 60.

2. this padding right reduce the available area that could be used by the chart itself;

Later, you made another comment that I think is a great idea! Aligning the first label to the right and the last label to the left might solve the problem! The problem is that I am a beginner user with chartjs and I have no idea how to create a custom function to set align based on each point of the graph. Would you mind pointing me in the right direction?

[batata004]

I discovered! Here is the code.

				align:function(context) {

					if (context.dataIndex === 0) {

						return "right";

					}
					else if (context.dataIndex === context.dataset.data.length - 1) {

						return "left";

					}
					else{

						return "bottom";

					}

				},

Anyway, it would be nice for this to be already implemented when clip is set to false.

[stockiNail]

1. the number 60 at the padding right is "hardcoded", if the last label is really small then it would not even be necessary to use padding right. If the last label has too many letters, then the padding right will have to be more than 60.

@batata004 I don't like hard coded config as well, mainly if you are using a responsive ui. Nevertheless be aware that many Chart.js options (and also on the plugins/controllers) can be scriptable.

In the documentation, when you see the table with all possible options, there is a column where is indicated if they are scriptable or not. And then there is a section where the input arguments of the callback are explained (usually there is a context).

Chart.js: https://www.chartjs.org/docs/latest/general/options.html#scriptable-options
Datalabels: https://chartjs-plugin-datalabels.netlify.app/guide/options.html#scriptable-options

That said, the padding option in layout of Chart.js can be scriptable as well, therefore the space around the chart can be dynamically calculated.

About the code (that's my personal opinion therefore you can ignore) you could avoid all else:

align: function(context) {
    if (context.dataIndex === 0) {
        return "right";
    }
    if (context.dataIndex === context.dataset.data.length - 1) {
        return "left";
    }
    return "bottom";
},

Anyway, it would be nice for this to be already implemented when clip is set to false.

Usually the clip option (same in chart.js and other plugins) is set to false to avoid to override important chart layers like scales, legend, title, and to mantain the added components (for instance labels, annotations) in chart area. It depends on the use case.

[stockiNail]

@batata004 feel free to close the issue if the solution is ok for your stand point..

[batata004]

@stockiNail thanks for all the explanation, now I understand a lot better this awesome library and its customization power (like the scriptable configurations). My only complain is that if clip is set to false then chartjs should try to fit all labels inside the chart area (honoring the preferred align, anchor... the user setted) without the need for the user to "hack" padding, alignments... If the user sets clip:false and the the label of the last point is too long to fit in the chart area, then chartjs could implement a logic in order to "bring" that label back to the chart area (for example, moving the label of the last point to the left until it fits - if it does not fit, then dont display the label since clip is set to false - which means dont clip, so if you dont want to clip a label that does not fit, then dont show it)

Do you think this implementation could be possible in the future inside chartjs or am I dreaming too far? After reading your opinion about this, I will close the thread so you can reply to it.

[stockiNail]

@stockiNail thanks for all the explanation, now I understand a lot better this awesome library and its customization power (like the scriptable configurations). My only complain is that if clip is set to false then chartjs should try to fit all labels inside the chart area (honoring the preferred align, anchor... the user setted) without the need for the user to "hack" padding, alignments... If the user sets clip:false and the the label of the last point is too long to fit in the chart area, then chartjs could implement a logic in order to "bring" that label back to the chart area (for example, moving the label of the last point to the left until it fits - if it does not fit, then dont display the label since clip is set to false - which means dont clip, so if you dont want to clip a label that does not fit, then dont show it)

@batata004 I understand what you meant. Probably this could be an enhancement even if not simple, I guess.

Do you think this implementation could be possible in the future inside chartjs or am I dreaming too far?

I image there is a big refactoring for that implementation. I'm collaborating in another plugin (annotation) and the behavior is the same of this one and knowing quite well that code, I can say it could be a long task, time consuming and with an uncertain result.
That said, I'm just a user and small contributor of datalabels. Maybe @simonbrunel could give an useful feedback (more than mine) about that!

[batata004]

@stockiNail Thanks for all the information you provided and indeed this might not be an easy feature to implement, and it looks like too few people would care about it. Better focus the contributor's time in things that matters the most. Thank you a lot for you attention, I wish you a happy 2025 year!

[stockiNail]

@batata004 thank you very much and all the best for new year you too!