massbudget
Posts: 3
Joined: Fri Nov 02, 2012 7:35 pm

Y-Axis Labels

Question about the labeling of axis points...

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..."

Image
jlbriggs
Posts: 1465
Joined: Tue Sep 21, 2010 2:33 pm

Re: Y-Axis Labels

You can control it yourself in the formatter function for the axis labels

http://jsfiddle.net/JVNjs/210/

Code: Select all

labels:{
            formatter:function(){
                return (this.value / 1000000000) + 'B';
            }
        }
Exactly how and when Highcharts chooses to switch from one measure to another I don't know, but you can find it in the source code.
I believe there is another recent thread around that will tell you where exactly to find it.
fiddles: http://jsfiddle.net/jlbriggs/J9JLr/
massbudget
Posts: 3
Joined: Fri Nov 02, 2012 7:35 pm

Re: Y-Axis Labels

I'm not sure that I can make the formatter function do all the work in this case. The trouble is that as part of the tool I'm developing, the values in the chart change pretty regularly. Sometime the axis labels need to be in the Billions, but other times they should be in the Millions (and sometimes they work fine).

Compare, for instance, these three views in the same tool:

http://massbudget.org/reports/tools/loc ... ycles.html
http://massbudget.org/reports/tools/loc ... Georgetown
http://massbudget.org/reports/tools/loc ... asthampton

In the first case, I'd want the axis labels to switch from "thousands of millions" to billions
In the second, to switch from "thousands of thousands" to millions.
In the third case, to stay as is

Is there a way to cover all cases with the formatter function, or do I need to track this down in the source?
jlbriggs
Posts: 1465
Joined: Tue Sep 21, 2010 2:33 pm

Re: Y-Axis Labels

You can handle this with some simple if statements:
http://jsfiddle.net/JVNjs/223/
fiddles: http://jsfiddle.net/jlbriggs/J9JLr/
massbudget
Posts: 3
Joined: Fri Nov 02, 2012 7:35 pm

Re: Y-Axis Labels

That works perfectly. Thanks for taking the time.

Evan
freddfdr
Posts: 4
Joined: Wed Jun 15, 2022 10:01 pm

Re: Y-Axis Labels

Hi, I ran into a similar problem whilst using highcharts with Wpdatatables on Wordpress. I'm trying to run a wpdatacharts callback to fix this but it does not work. Heres my code. Can you please help review?

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){
}
}
}

});
});
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Y-Axis Labels

Hi there,

Welcome to our forum and thank you for contacting us with your question!
Could you please describe what issues with yAxis.labels are you facing?
It seems that the solution posted by user @jlbriggs works just fine for large numbers.
@jlbriggs's solution: http://jsfiddle.net/BlackLabel/543juan9/

Also, please note that supporting WordPress and its plugins is beyond our scope, but if you are still facing some issues with your Highcharts code and can reproduce them in an online editor (i.e JSFiddle) feel free to post it here, and then I will be more than happy to work on it!

​If you have further inquiries, you may reach out to me at any time,
Best regards!
Kamil Musiałowski
Highcharts Developer
freddfdr
Posts: 4
Joined: Wed Jun 15, 2022 10:01 pm

Re: Y-Axis Labels

Hi Kamil,

Thank you for your response. I'm currenly using highcharts on Wordpress(wpdatatables). I'm having the same issue as described. I tried using the code below in my custom javascript but it does not work. The link to the chart I'm trying to change is here - Image

Code: Select all

jQuery(window).on('load', function(){
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
    wpDataChartsCallbacks[126] = function(obj){
        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;    }
    });
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Y-Axis Labels

Hello,

Thank you for your explanation. As I mentioned earlier, we as a support team are not familiar with the wpDataTables Plugin.
From what I can see in your code, you are missing the reference to an axis on which you want to manipulate the labels.
Please check the structure of the previous demos.

For example, if you want to change something in yAxis labels, you have to do it like here:

Code: Select all

yAxis: {
    labels: {
      formatter: function() {
        // Your custom formatter function
      }
    }
  },
Maybe this article will help you with the labels config: https://wpdatatables.com/faqmd/how-to-a ... ighcharts/

Best regards!
Kamil Musiałowski
Highcharts Developer
freddfdr
Posts: 4
Joined: Wed Jun 15, 2022 10:01 pm

Re: Y-Axis Labels

Thank you. I will check it out
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Y-Axis Labels

Sure thing. If you will have any problems with the Highcharts library, you are more than welcome to ask here.

Kind regards!
Kamil Musiałowski
Highcharts Developer
kelvok2014
Posts: 1
Joined: Thu Dec 08, 2022 1:35 pm

Re: Y-Axis Labels

Hi Kamil,

I'm currenly using highcharts on Wordpress with wpDatatables and I have also experienced the same issue as described.
Any solutions? I tried using this solution that you provided earlier but it does not work "https://wpdatatables.com/faqmd/how-to-a ... ighcharts/".
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Y-Axis Labels

Hi there,

Like I said in the previous post, we are not familiar with wpDatatables (as we don't have an official Highcharts Wordpress wrapper) so I'd suggest asking at a WordPress forum related to the wpDatatables.

Regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”