"Y-Axis Labels" (#3065303) / TMS-Plugins

‘Fred started the conversation

June 14, 2022 at 4:55pm

I often find that highcharts will set labels like "3000 M" or "1500 K", rather than shifting up to "3 B" or 1.5 M" Is there a way to change this? Just so you have an example, I've included a picture of a bar chart with the y-axis auto-labelled "0m, 500m, 1000m, 1500m,..." rather than "0b, .5b, 1b, 1.5b..."

I tried using the below code but it does not work

jQuery(window).on('load', function(){
Highcharts.setOptions({
labels:{
formatter:function(){
if(this.value >= 1000000000000){
return (this.value / 1000000000000) + 'T';
}
else if(this.value >= 1000000000){
return (this.value / 1000000000) + 'B';
}
else if(this.value >= 1000000) {
return (this.value / 1000000) + 'M';
}
else if(this.value >= 1000) {
return (this.value / 1000) + 'K';
}
else {
return this.value;
}
}
}

});
});

‘Fred replied

June 14, 2022 at 4:57pm

If you look at the attachment, the values are written in thousands. How can I solve this?

1,819

Miloš replied

June 14, 2022 at 6:38pm

Hi, Fred

Thanks for reaching out to us

Chart engines do not inherit the number format you set up in wpDataTables, and there are no built-in options to change the number format in the chart, but you can use wpdatachart callbacks. Every chart exposes several options that customize its look and feel. Charts usually support custom options appropriate to that visualization.

For example, you can take a look at this example and see how we changed the number format in HighCharts.

Please note that using wpDataChart or wpDataTables callbacks requires a certain level of programming skills, and included support refers only to advice.

Kind Regards,

Miloš Jovanović
[email protected]

Rate my support

You can try wpDataTables add-ons before purchasing on these sandbox sites:

Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables

‘Fred replied

June 15, 2022 at 9:59pm

Thank you for your reply Milos.

I tried running the code below but it did not work

jQuery(window).on('load', function(){
Highcharts.setOptions({
lang: {
numericSymbols:["k", "M", "B", "T", "P", "E"]
}

});



});
jQuery(window).on('load', function(){
Highcharts.setOptions({
labels:{
formatter:function(){
if(this.value >= 1000000000000){
return (this.value / 1000000000000) + 'T';
}
else if(this.value >= 1000000000){
return (this.value / 1000000000) + 'B';
}
else if(this.value >= 1000000) {
return (this.value / 1000000) + 'M';
}
else if(this.value >= 1000) {
return (this.value / 1000) + 'K';
}
else {
return this.value;
}
if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
wpDataChartsCallbacks[126] = function(obj){
}
}
}

});
});