Highcharts addSeries yAxis Label Formatting
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
edited Nov 13 '18 at 9:47
Halvor Holsten Strand
14.7k145473
asked Nov 12 '18 at 19:11
Kyle KranzoKyle Kranzo
62
|
show 2 more comments
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
edited Nov 13 '18 at 9:47
Halvor Holsten Strand
14.7k145473
asked Nov 12 '18 at 19:11
Kyle KranzoKyle Kranzo
62
I'm not sure this makes any sense... What isyAxis: 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 inyAxisin theaddSeries? 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
|
show 2 more comments
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
edited Nov 13 '18 at 9:47
Halvor Holsten Strand
14.7k145473
asked Nov 12 '18 at 19:11
Kyle KranzoKyle Kranzo
62
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
highcharts
edited Nov 13 '18 at 9:47
Halvor Holsten Strand
14.7k145473
asked Nov 12 '18 at 19:11
Kyle KranzoKyle Kranzo
62
edited Nov 13 '18 at 9:47
Halvor Holsten Strand
14.7k145473
asked Nov 12 '18 at 19:11
Kyle KranzoKyle Kranzo
62
edited Nov 13 '18 at 9:47
Halvor Holsten Strand
14.7k145473
edited Nov 13 '18 at 9:47
Halvor Holsten Strand
14.7k145473
edited Nov 13 '18 at 9:47
Halvor Holsten Strand
14.7k145473
14.7k145473
asked Nov 12 '18 at 19:11
Kyle KranzoKyle Kranzo
62
asked Nov 12 '18 at 19:11
Kyle KranzoKyle Kranzo
62
asked Nov 12 '18 at 19:11
Kyle KranzoKyle Kranzo
62
62
I'm not sure this makes any sense... What isyAxis: 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 inyAxisin theaddSeries? 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
|
show 2 more comments
I'm not sure this makes any sense... What isyAxis: 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 inyAxisin theaddSeries? 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
|
show 2 more comments
1 Answer
1
active
oldest
votes
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'
});
answered Nov 13 '18 at 9:46
Halvor Holsten StrandHalvor Holsten Strand
14.7k145473
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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'
});
answered Nov 13 '18 at 9:46
Halvor Holsten StrandHalvor Holsten Strand
14.7k145473
add a comment |
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'
});
answered Nov 13 '18 at 9:46
Halvor Holsten StrandHalvor Holsten Strand
14.7k145473
add a comment |
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'
});
answered Nov 13 '18 at 9:46
Halvor Holsten StrandHalvor Holsten Strand
14.7k145473
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'
});
answered Nov 13 '18 at 9:46
Halvor Holsten StrandHalvor Holsten Strand
14.7k145473
answered Nov 13 '18 at 9:46
Halvor Holsten StrandHalvor Holsten Strand
14.7k145473
answered Nov 13 '18 at 9:46
Halvor Holsten StrandHalvor Holsten Strand
14.7k145473
answered Nov 13 '18 at 9:46
Halvor Holsten StrandHalvor Holsten Strand
14.7k145473
14.7k145473
add a comment |
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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
yAxisin theaddSeries? 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