Highcharts addSeries yAxis Label Formatting

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"
    }
});

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
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
@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

Halvor Holsten Strand Halvor Holsten Strand · Accepted Answer · 2018-11-13T09:46:39

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'
});

Highcharts addSeries yAxis Label Formatting

1 Answers