Highcharts addSeries yAxis Label Formatting










1















I have a Highcharts chart that works great and has custom formatting for the yAxis labels using the following formatting.



yAxis: {
labels:
formatter: function ()
var newNumber = formatNumber(this.value, 1);
return newNumber;

;


However, when I dynamically add a series like below, the yAxis labels do not have the same custom formatting. It looks like they just end up using the default Highcharts number formatting.



chart.addSeries(
data: newData,
yAxis: newDataName
);


How can I make it so the dynamically added series has the same label number formatting as the originally loaded series?



Also, note that I need to name the dynamically added series ("newDataName") so that I can reference it again later to remove it.



And here is how the axis is added dynamically as well. Because to clarify, I am adding a series, but also adding an axis to display that series.



chart.addAxis(
id: theData,
title:
text: "newAxis"

);









share|improve this question
























  • I'm not sure this makes any sense... What is yAxis: newDataName? The axis labels are not defined within a series, which is what you seem to be adding.

    – Halvor Holsten Strand
    Nov 12 '18 at 20:10











  • @HalvorStrand - That is just the name for the series.

    – Kyle Kranzo
    Nov 12 '18 at 20:32












  • Look at this example. How is your code different? What is it you mean should be in yAxis in the addSeries? The actual axis labels are still formated according to your rule in the example I created.

    – Halvor Holsten Strand
    Nov 12 '18 at 20:35











  • @HalvorStrand That is what I assumed would happen. So according to my original custom formatting, numbers should be returned as either 50K, 2M, 7B, etc. So they would have the condensed formatting with the capital K, M, or B. However, the labels for dynamically added series are showing up as something like 5,000k. So it has a lowercase "k" and is not formatted correctly (5,000k would be 5M)... so I can tell that my custom formatting is not being applied. I also edited the original post so you could see how I am dynamically adding the axis as well.

    – Kyle Kranzo
    Nov 12 '18 at 20:43







  • 1





    @ewolden thanks, posted and edited!

    – Halvor Holsten Strand
    Nov 13 '18 at 9:47















1















I have a Highcharts chart that works great and has custom formatting for the yAxis labels using the following formatting.



yAxis: {
labels:
formatter: function ()
var newNumber = formatNumber(this.value, 1);
return newNumber;

;


However, when I dynamically add a series like below, the yAxis labels do not have the same custom formatting. It looks like they just end up using the default Highcharts number formatting.



chart.addSeries(
data: newData,
yAxis: newDataName
);


How can I make it so the dynamically added series has the same label number formatting as the originally loaded series?



Also, note that I need to name the dynamically added series ("newDataName") so that I can reference it again later to remove it.



And here is how the axis is added dynamically as well. Because to clarify, I am adding a series, but also adding an axis to display that series.



chart.addAxis(
id: theData,
title:
text: "newAxis"

);









share|improve this question
























  • I'm not sure this makes any sense... What is yAxis: newDataName? The axis labels are not defined within a series, which is what you seem to be adding.

    – Halvor Holsten Strand
    Nov 12 '18 at 20:10











  • @HalvorStrand - That is just the name for the series.

    – Kyle Kranzo
    Nov 12 '18 at 20:32












  • Look at this example. How is your code different? What is it you mean should be in yAxis in the addSeries? The actual axis labels are still formated according to your rule in the example I created.

    – Halvor Holsten Strand
    Nov 12 '18 at 20:35











  • @HalvorStrand That is what I assumed would happen. So according to my original custom formatting, numbers should be returned as either 50K, 2M, 7B, etc. So they would have the condensed formatting with the capital K, M, or B. However, the labels for dynamically added series are showing up as something like 5,000k. So it has a lowercase "k" and is not formatted correctly (5,000k would be 5M)... so I can tell that my custom formatting is not being applied. I also edited the original post so you could see how I am dynamically adding the axis as well.

    – Kyle Kranzo
    Nov 12 '18 at 20:43







  • 1





    @ewolden thanks, posted and edited!

    – Halvor Holsten Strand
    Nov 13 '18 at 9:47













1












1








1








I have a Highcharts chart that works great and has custom formatting for the yAxis labels using the following formatting.



yAxis: {
labels:
formatter: function ()
var newNumber = formatNumber(this.value, 1);
return newNumber;

;


However, when I dynamically add a series like below, the yAxis labels do not have the same custom formatting. It looks like they just end up using the default Highcharts number formatting.



chart.addSeries(
data: newData,
yAxis: newDataName
);


How can I make it so the dynamically added series has the same label number formatting as the originally loaded series?



Also, note that I need to name the dynamically added series ("newDataName") so that I can reference it again later to remove it.



And here is how the axis is added dynamically as well. Because to clarify, I am adding a series, but also adding an axis to display that series.



chart.addAxis(
id: theData,
title:
text: "newAxis"

);









share|improve this question
















I have a Highcharts chart that works great and has custom formatting for the yAxis labels using the following formatting.



yAxis: {
labels:
formatter: function ()
var newNumber = formatNumber(this.value, 1);
return newNumber;

;


However, when I dynamically add a series like below, the yAxis labels do not have the same custom formatting. It looks like they just end up using the default Highcharts number formatting.



chart.addSeries(
data: newData,
yAxis: newDataName
);


How can I make it so the dynamically added series has the same label number formatting as the originally loaded series?



Also, note that I need to name the dynamically added series ("newDataName") so that I can reference it again later to remove it.



And here is how the axis is added dynamically as well. Because to clarify, I am adding a series, but also adding an axis to display that series.



chart.addAxis(
id: theData,
title:
text: "newAxis"

);






highcharts






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 13 '18 at 9:47









Halvor Holsten Strand

15.1k145573




15.1k145573










asked Nov 12 '18 at 19:11









Kyle KranzoKyle Kranzo

62




62












  • I'm not sure this makes any sense... What is yAxis: newDataName? The axis labels are not defined within a series, which is what you seem to be adding.

    – Halvor Holsten Strand
    Nov 12 '18 at 20:10











  • @HalvorStrand - That is just the name for the series.

    – Kyle Kranzo
    Nov 12 '18 at 20:32












  • Look at this example. How is your code different? What is it you mean should be in yAxis in the addSeries? The actual axis labels are still formated according to your rule in the example I created.

    – Halvor Holsten Strand
    Nov 12 '18 at 20:35











  • @HalvorStrand That is what I assumed would happen. So according to my original custom formatting, numbers should be returned as either 50K, 2M, 7B, etc. So they would have the condensed formatting with the capital K, M, or B. However, the labels for dynamically added series are showing up as something like 5,000k. So it has a lowercase "k" and is not formatted correctly (5,000k would be 5M)... so I can tell that my custom formatting is not being applied. I also edited the original post so you could see how I am dynamically adding the axis as well.

    – Kyle Kranzo
    Nov 12 '18 at 20:43







  • 1





    @ewolden thanks, posted and edited!

    – Halvor Holsten Strand
    Nov 13 '18 at 9:47

















  • I'm not sure this makes any sense... What is yAxis: newDataName? The axis labels are not defined within a series, which is what you seem to be adding.

    – Halvor Holsten Strand
    Nov 12 '18 at 20:10











  • @HalvorStrand - That is just the name for the series.

    – Kyle Kranzo
    Nov 12 '18 at 20:32












  • Look at this example. How is your code different? What is it you mean should be in yAxis in the addSeries? The actual axis labels are still formated according to your rule in the example I created.

    – Halvor Holsten Strand
    Nov 12 '18 at 20:35











  • @HalvorStrand That is what I assumed would happen. So according to my original custom formatting, numbers should be returned as either 50K, 2M, 7B, etc. So they would have the condensed formatting with the capital K, M, or B. However, the labels for dynamically added series are showing up as something like 5,000k. So it has a lowercase "k" and is not formatted correctly (5,000k would be 5M)... so I can tell that my custom formatting is not being applied. I also edited the original post so you could see how I am dynamically adding the axis as well.

    – Kyle Kranzo
    Nov 12 '18 at 20:43







  • 1





    @ewolden thanks, posted and edited!

    – Halvor Holsten Strand
    Nov 13 '18 at 9:47
















I'm not sure this makes any sense... What is yAxis: newDataName? The axis labels are not defined within a series, which is what you seem to be adding.

– Halvor Holsten Strand
Nov 12 '18 at 20:10





I'm not sure this makes any sense... What is yAxis: newDataName? The axis labels are not defined within a series, which is what you seem to be adding.

– Halvor Holsten Strand
Nov 12 '18 at 20:10













@HalvorStrand - That is just the name for the series.

– Kyle Kranzo
Nov 12 '18 at 20:32






@HalvorStrand - That is just the name for the series.

– Kyle Kranzo
Nov 12 '18 at 20:32














Look at this example. How is your code different? What is it you mean should be in yAxis in the addSeries? The actual axis labels are still formated according to your rule in the example I created.

– Halvor Holsten Strand
Nov 12 '18 at 20:35





Look at this example. How is your code different? What is it you mean should be in yAxis in the addSeries? The actual axis labels are still formated according to your rule in the example I created.

– Halvor Holsten Strand
Nov 12 '18 at 20:35













@HalvorStrand That is what I assumed would happen. So according to my original custom formatting, numbers should be returned as either 50K, 2M, 7B, etc. So they would have the condensed formatting with the capital K, M, or B. However, the labels for dynamically added series are showing up as something like 5,000k. So it has a lowercase "k" and is not formatted correctly (5,000k would be 5M)... so I can tell that my custom formatting is not being applied. I also edited the original post so you could see how I am dynamically adding the axis as well.

– Kyle Kranzo
Nov 12 '18 at 20:43






@HalvorStrand That is what I assumed would happen. So according to my original custom formatting, numbers should be returned as either 50K, 2M, 7B, etc. So they would have the condensed formatting with the capital K, M, or B. However, the labels for dynamically added series are showing up as something like 5,000k. So it has a lowercase "k" and is not formatted correctly (5,000k would be 5M)... so I can tell that my custom formatting is not being applied. I also edited the original post so you could see how I am dynamically adding the axis as well.

– Kyle Kranzo
Nov 12 '18 at 20:43





1




1





@ewolden thanks, posted and edited!

– Halvor Holsten Strand
Nov 13 '18 at 9:47





@ewolden thanks, posted and edited!

– Halvor Holsten Strand
Nov 13 '18 at 9:47












1 Answer
1






active

oldest

votes


















1














Since you are dynamically adding both a series and a new axis that the series should be using, this axis also needs to include the formatter details. For example (JSFiddle):



// New axis
chart.addAxis(
id: 'new',
// Which also has the label formatter
labels:
formatter: function ()
return formatNumber(this.value, 1);

,
title:
text: "newAxis"

);

// New series which uses the axis
chart.addSeries(
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
yAxis: 'new'
);





share|improve this answer






















    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













    draft saved

    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53268619%2fhighcharts-addseries-yaxis-label-formatting%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    1














    Since you are dynamically adding both a series and a new axis that the series should be using, this axis also needs to include the formatter details. For example (JSFiddle):



    // New axis
    chart.addAxis(
    id: 'new',
    // Which also has the label formatter
    labels:
    formatter: function ()
    return formatNumber(this.value, 1);

    ,
    title:
    text: "newAxis"

    );

    // New series which uses the axis
    chart.addSeries(
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
    yAxis: 'new'
    );





    share|improve this answer



























      1














      Since you are dynamically adding both a series and a new axis that the series should be using, this axis also needs to include the formatter details. For example (JSFiddle):



      // New axis
      chart.addAxis(
      id: 'new',
      // Which also has the label formatter
      labels:
      formatter: function ()
      return formatNumber(this.value, 1);

      ,
      title:
      text: "newAxis"

      );

      // New series which uses the axis
      chart.addSeries(
      data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
      yAxis: 'new'
      );





      share|improve this answer

























        1












        1








        1







        Since you are dynamically adding both a series and a new axis that the series should be using, this axis also needs to include the formatter details. For example (JSFiddle):



        // New axis
        chart.addAxis(
        id: 'new',
        // Which also has the label formatter
        labels:
        formatter: function ()
        return formatNumber(this.value, 1);

        ,
        title:
        text: "newAxis"

        );

        // New series which uses the axis
        chart.addSeries(
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
        yAxis: 'new'
        );





        share|improve this answer













        Since you are dynamically adding both a series and a new axis that the series should be using, this axis also needs to include the formatter details. For example (JSFiddle):



        // New axis
        chart.addAxis(
        id: 'new',
        // Which also has the label formatter
        labels:
        formatter: function ()
        return formatNumber(this.value, 1);

        ,
        title:
        text: "newAxis"

        );

        // New series which uses the axis
        chart.addSeries(
        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
        yAxis: 'new'
        );






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 13 '18 at 9:46









        Halvor Holsten StrandHalvor Holsten Strand

        15.1k145573




        15.1k145573



























            draft saved

            draft discarded
















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid


            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.

            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53268619%2fhighcharts-addseries-yaxis-label-formatting%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Use pre created SQLite database for Android project in kotlin

            Darth Vader #20

            Ondo