commodore64
Posts: 9
Joined: Fri Aug 19, 2022 3:51 pm

DataLabels Positions on columns

Hi everyone,
I wanted to ask a question. I found some solutions, but it doesnt work for me.
I tried this, found in StackOverflow :
https://jsfiddle.net/7bzy06gt/5/

I want to put first datalabel on top and second in middle
Because when i get two same datas, it becomes unreadable.

I tried this


series: {
dataLabels: {
formatter: function () {
// Pour les écrans du CA Mensuel, valeurs en avec une decimale et %
if (this.series.userOptions?.custom.dataLabelTop) {
return '<span class="dataLabel" style="position: relative; top:30px">' +
Highcharts.numberFormat(this.y, 1) + ' %' + '</span>';
} else if (this.series.userOptions?.custom.isPercentage) {
return Highcharts.numberFormat(this.y, 1) + ' %';
} else { return this.y; }
}
}
}

This doesnt work for me, i dont understand why.
I would like to put first on TOP and the second datalabel in MIDDLE of Columns.


Thanks a lot !!
commodore64
Posts: 9
Joined: Fri Aug 19, 2022 3:51 pm

Re: DataLabels Positions on columns

Hello,

Or Maybe somone knows how I could access to the series.datalabels.y within the formatter function, e.g. something like this :

dataLabels: {
enabled: true,
crop: true,
useHTML: true,
overflow: 'justify',
style: {
fontSize: '7',
fontWeight: 'bold',
color: 'white',
},
y: 10,
formatter: function () {
if (this.series.userOptions?.custom.dataLabelTop) {
return this.series.datalabels.y = 20; ----- > didnt get it :-(
} else { return this.y; }
}
},


thanks !
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: DataLabels Positions on columns

Hi commodore64!
Thanks for contacting us with your question!

I'm sorry but I think I'm missing something. Could you please show a little bit more light on the matter to help me understand it? It would be best to show some images of how would you like to place your dataLabels.

To access the dataLabels.y you can get it in the formatter function by this.point and then you can get the dataLabel/dataLabels object, but be careful, because formatter callback function is fired before dataLabel initialization, so sometimes it could be better to add some custom JS logic to chart load/render events to be sure, that every object is obtainable.

Article: https://www.highcharts.com/blog/tutoria ... ts-events/

I am looking for your response.
Regards!
Hubert Kozik
Highcharts Developer
commodore64
Posts: 9
Joined: Fri Aug 19, 2022 3:51 pm

Re: DataLabels Positions on columns

Hello,

I put a picture of what I wanted to do and what I did, i get the first datalabel on top of first column, and second in middle.

I did this : I passed an array in datalabels

export const PLOT_OPTIONS: PlotOptions = {
series: {
marker: {
enabled: false,
radius: 0,
},
negativeColor: '#eb0505',
dataLabels: [{
enabled: true,
inside: true,
crop: true,
overflow: 'justify',
style: {
fontSize: '7',
fontWeight: 'bold',
color: 'white',
},
align: 'center',
verticalAlign: 'top',
formatter: function () {
// Top of Column
if (this.series.userOptions?.custom.dataLabelTop) {
return Highcharts.numberFormat(this.y, 1) + ' %';
}
}
},
{
enabled: true,
inside: true,
crop: true,
overflow: 'justify',
style: {
fontSize: '7',
fontWeight: 'bold',
color: 'white',
},
align: 'center',
verticalAlign: 'middle',
formatter: function () {
// Middle of Column
if (this.series.userOptions?.custom.dataLabelMiddle) {
return Highcharts.numberFormat(this.y, 1) + ' %';
}
}
},
{
enabled: true,
inside: true,
crop: true,
overflow: 'justify',
style: {
fontSize: '7',
fontWeight: 'bold',
color: 'white',
},
formatter: function () {
// Just return as it is
if (!this.series.userOptions?.custom.dataLabelMiddle && !this.series.userOptions?.custom.dataLabelTop) {
return this.y;
}
}
}],
},
};
highcharts_columns_datalabels.PNG
highcharts_columns_datalabels.PNG (55.81 KiB) Viewed 250 times
But I would like to do this Inside Formatter Function.

Thanks.
commodore64
Posts: 9
Joined: Fri Aug 19, 2022 3:51 pm

Re: DataLabels Positions on columns

Hello,

Thank you
I Used Object.Datalabels in formatter like this it works !

formatter: function (object: Highcharts.DataLabelsOptions) {
if (this.series.userOptions?.custom.dataLabelTop) {
// on top
object.y = -60;
return Highcharts.numberFormat(this.y, 1) + ' %';
} else if (this.series.userOptions?.custom.dataLabelMiddle) {
// In middle
object.y = 0;
return Highcharts.numberFormat(this.y, 1) + ' %';
} else {
return this.y;
}
}
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: DataLabels Positions on columns

That's great to hear! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer
commodore64
Posts: 9
Joined: Fri Aug 19, 2022 3:51 pm

Re: DataLabels Positions on columns

Hi again,
much Better this last one :

formatter: function (object: Highcharts.DataLabelsOptions) {
if (this.series.userOptions?.custom.dataLabelTop && this.y !== 0) {
// Datalabels on Top of column
object.align = 'center',
object.verticalAlign = 'top';
return Highcharts.numberFormat(this.y, 1) + ' %';
} else if (this.series.userOptions?.custom.dataLabelMiddle && this.y !== 0) {
// Datalabels on middle of column
object.align = 'center',
object.verticalAlign = 'middle';
return Highcharts.numberFormat(this.y, 1) + ' %';
} else {
// Pour les écrans du CA Hebdo MPAP, valeurs brutes
return this.y;
}
}


Thanks !
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: DataLabels Positions on columns

commodore64, thank you for contributing to our forum! Maybe someone will face a similar problem as you and will find here a solution. We appreciate your help and effort :)
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”