Highcharts addSeries yAxis Label Formatting
up vote
1
down vote
favorite
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 at 9:47
Halvor Strand
14.7k145372
asked Nov 12 at 19:11
Kyle Kranzo
62
|
show 2 more comments
up vote
1
down vote
favorite
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 at 9:47
Halvor Strand
14.7k145372
asked Nov 12 at 19:11
Kyle 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 Strand
Nov 12 at 20:10
@HalvorStrand - That is just the name for the series.
– Kyle Kranzo
Nov 12 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 Strand
Nov 12 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 at 20:43
1
@ewolden thanks, posted and edited!
– Halvor Strand
Nov 13 at 9:47
|
show 2 more comments
up vote
1
down vote
favorite
up vote
1
down vote
favorite
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 at 9:47
Halvor Strand
14.7k145372
asked Nov 12 at 19:11
Kyle 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 at 9:47
Halvor Strand
14.7k145372
asked Nov 12 at 19:11
Kyle Kranzo
62
edited Nov 13 at 9:47
Halvor Strand
14.7k145372
asked Nov 12 at 19:11
Kyle Kranzo
62
edited Nov 13 at 9:47
Halvor Strand
14.7k145372
edited Nov 13 at 9:47
Halvor Strand
14.7k145372
edited Nov 13 at 9:47
Halvor Strand
14.7k145372
14.7k145372
asked Nov 12 at 19:11
Kyle Kranzo
62
asked Nov 12 at 19:11
Kyle Kranzo
62
asked Nov 12 at 19:11
Kyle 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 Strand
Nov 12 at 20:10
@HalvorStrand - That is just the name for the series.
– Kyle Kranzo
Nov 12 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 Strand
Nov 12 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 at 20:43
1
@ewolden thanks, posted and edited!
– Halvor Strand
Nov 13 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 Strand
Nov 12 at 20:10
@HalvorStrand - That is just the name for the series.
– Kyle Kranzo
Nov 12 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 Strand
Nov 12 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 at 20:43
1
@ewolden thanks, posted and edited!
– Halvor Strand
Nov 13 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 Strand
Nov 12 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 Strand
Nov 12 at 20:10
@HalvorStrand - That is just the name for the series.
– Kyle Kranzo
Nov 12 at 20:32
@HalvorStrand - That is just the name for the series.
– Kyle Kranzo
Nov 12 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 Strand
Nov 12 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 Strand
Nov 12 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 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 at 20:43
1
1
@ewolden thanks, posted and edited!
– Halvor Strand
Nov 13 at 9:47
@ewolden thanks, posted and edited!
– Halvor Strand
Nov 13 at 9:47
|
show 2 more comments
1 Answer
1
active
oldest
votes
up vote
1
down vote
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 at 9:46
Halvor Strand
14.7k145372
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
up vote
1
down vote
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 at 9:46
Halvor Strand
14.7k145372
add a comment |
up vote
1
down vote
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 at 9:46
Halvor Strand
14.7k145372
add a comment |
up vote
1
down vote
up vote
1
down vote
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 at 9:46
Halvor Strand
14.7k145372
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 at 9:46
Halvor Strand
14.7k145372
answered Nov 13 at 9:46
Halvor Strand
14.7k145372
answered Nov 13 at 9:46
Halvor Strand
14.7k145372
answered Nov 13 at 9:46
Halvor Strand
14.7k145372
14.7k145372
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 Strand
Nov 12 at 20:10
@HalvorStrand - That is just the name for the series.
– Kyle Kranzo
Nov 12 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 Strand
Nov 12 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 at 20:43
1
@ewolden thanks, posted and edited!
– Halvor Strand
Nov 13 at 9:47