highcharts.js - Dynamic Label Color
Is it possible to change the label color when gauge color changes?
Here is my js fiddle - the requirement is to color the number the same way as the gauge:
http://jsfiddle.net/e76o9otk/735/
dataLabels: {
format: '<div style="margin-top: -15.5px; text-align:center"><span style="font-size:10px;color:' +
Highcharts.getOptions().colors[0] + '">{y}</span><br/>' +
'</div>'
}
javascript css highcharts colors label
asked Nov 13 '18 at 12:40
ddelicddelic
326
add a comment |
Is it possible to change the label color when gauge color changes?
Here is my js fiddle - the requirement is to color the number the same way as the gauge:
http://jsfiddle.net/e76o9otk/735/
dataLabels: {
format: '<div style="margin-top: -15.5px; text-align:center"><span style="font-size:10px;color:' +
Highcharts.getOptions().colors[0] + '">{y}</span><br/>' +
'</div>'
}
javascript css highcharts colors label
asked Nov 13 '18 at 12:40
ddelicddelic
326
add a comment |
Is it possible to change the label color when gauge color changes?
Here is my js fiddle - the requirement is to color the number the same way as the gauge:
http://jsfiddle.net/e76o9otk/735/
dataLabels: {
format: '<div style="margin-top: -15.5px; text-align:center"><span style="font-size:10px;color:' +
Highcharts.getOptions().colors[0] + '">{y}</span><br/>' +
'</div>'
}
javascript css highcharts colors label
asked Nov 13 '18 at 12:40
ddelicddelic
326
Is it possible to change the label color when gauge color changes?
Here is my js fiddle - the requirement is to color the number the same way as the gauge:
http://jsfiddle.net/e76o9otk/735/
dataLabels: {
format: '<div style="margin-top: -15.5px; text-align:center"><span style="font-size:10px;color:' +
Highcharts.getOptions().colors[0] + '">{y}</span><br/>' +
'</div>'
}
javascript css highcharts colors label
javascript css highcharts colors label
asked Nov 13 '18 at 12:40
ddelicddelic
326
asked Nov 13 '18 at 12:40
ddelicddelic
326
asked Nov 13 '18 at 12:40
ddelicddelic
326
asked Nov 13 '18 at 12:40
ddelicddelic
326
asked Nov 13 '18 at 12:40
ddelicddelic
326
326
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Use the formatter callback function to include logic in the label text like this:
dataLabels: {
formatter: function() {
let color = ''
if (this.y > 50) {
color = '#55BF3B' //green
} else if (this.y > 10) {
color = '#DDDF0D' //yellow
} else {
color = '#DF5353' //red
}
return '<div style="margin-top: -15.5px; text-align:center"><span style="font-size:10px;color:' + color + '">' + this.y + '</span><br/>' + '</div>'
},
}
Working JSFiddle example: http://jsfiddle.net/ewolden/x6j1ywdb/
If you want the dataLabel to be a gradient, you can implement (or borrow) a gradient function, such as this one: Programmatically Lighten or Darken a hex color (or rgb, and blend colors)
Working JSFiddle example: (with gradient dataLabels): http://jsfiddle.net/ewolden/x6j1ywdb/12/
answered Nov 13 '18 at 12:50
ewoldenewolden
4,21031225
Thanks ewolden! This is great approach, but I was thinking to match the label color completely - because between for values 10 and 50 the gauge color will be gradient between red and yellow - just put the value 25 in your example and you will see what I mean. - I guess I have to implement the logic for gradient color, right?
– ddelic
Nov 13 '18 at 13:24
Glad to help. I see your point, I updated the answer with a gradient example now. The gradient function is from a very well written answer that I linked.
– ewolden
Nov 13 '18 at 13:52
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%2f53281222%2fhighcharts-js-dynamic-label-color%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
Use the formatter callback function to include logic in the label text like this:
dataLabels: {
formatter: function() {
let color = ''
if (this.y > 50) {
color = '#55BF3B' //green
} else if (this.y > 10) {
color = '#DDDF0D' //yellow
} else {
color = '#DF5353' //red
}
return '<div style="margin-top: -15.5px; text-align:center"><span style="font-size:10px;color:' + color + '">' + this.y + '</span><br/>' + '</div>'
},
}
Working JSFiddle example: http://jsfiddle.net/ewolden/x6j1ywdb/
If you want the dataLabel to be a gradient, you can implement (or borrow) a gradient function, such as this one: Programmatically Lighten or Darken a hex color (or rgb, and blend colors)
Working JSFiddle example: (with gradient dataLabels): http://jsfiddle.net/ewolden/x6j1ywdb/12/
answered Nov 13 '18 at 12:50
ewoldenewolden
4,21031225
Thanks ewolden! This is great approach, but I was thinking to match the label color completely - because between for values 10 and 50 the gauge color will be gradient between red and yellow - just put the value 25 in your example and you will see what I mean. - I guess I have to implement the logic for gradient color, right?
– ddelic
Nov 13 '18 at 13:24
Glad to help. I see your point, I updated the answer with a gradient example now. The gradient function is from a very well written answer that I linked.
– ewolden
Nov 13 '18 at 13:52
add a comment |
Use the formatter callback function to include logic in the label text like this:
dataLabels: {
formatter: function() {
let color = ''
if (this.y > 50) {
color = '#55BF3B' //green
} else if (this.y > 10) {
color = '#DDDF0D' //yellow
} else {
color = '#DF5353' //red
}
return '<div style="margin-top: -15.5px; text-align:center"><span style="font-size:10px;color:' + color + '">' + this.y + '</span><br/>' + '</div>'
},
}
Working JSFiddle example: http://jsfiddle.net/ewolden/x6j1ywdb/
If you want the dataLabel to be a gradient, you can implement (or borrow) a gradient function, such as this one: Programmatically Lighten or Darken a hex color (or rgb, and blend colors)
Working JSFiddle example: (with gradient dataLabels): http://jsfiddle.net/ewolden/x6j1ywdb/12/
answered Nov 13 '18 at 12:50
ewoldenewolden
4,21031225
Thanks ewolden! This is great approach, but I was thinking to match the label color completely - because between for values 10 and 50 the gauge color will be gradient between red and yellow - just put the value 25 in your example and you will see what I mean. - I guess I have to implement the logic for gradient color, right?
– ddelic
Nov 13 '18 at 13:24
Glad to help. I see your point, I updated the answer with a gradient example now. The gradient function is from a very well written answer that I linked.
– ewolden
Nov 13 '18 at 13:52
add a comment |
Use the formatter callback function to include logic in the label text like this:
dataLabels: {
formatter: function() {
let color = ''
if (this.y > 50) {
color = '#55BF3B' //green
} else if (this.y > 10) {
color = '#DDDF0D' //yellow
} else {
color = '#DF5353' //red
}
return '<div style="margin-top: -15.5px; text-align:center"><span style="font-size:10px;color:' + color + '">' + this.y + '</span><br/>' + '</div>'
},
}
Working JSFiddle example: http://jsfiddle.net/ewolden/x6j1ywdb/
If you want the dataLabel to be a gradient, you can implement (or borrow) a gradient function, such as this one: Programmatically Lighten or Darken a hex color (or rgb, and blend colors)
Working JSFiddle example: (with gradient dataLabels): http://jsfiddle.net/ewolden/x6j1ywdb/12/
answered Nov 13 '18 at 12:50
ewoldenewolden
4,21031225
Use the formatter callback function to include logic in the label text like this:
dataLabels: {
formatter: function() {
let color = ''
if (this.y > 50) {
color = '#55BF3B' //green
} else if (this.y > 10) {
color = '#DDDF0D' //yellow
} else {
color = '#DF5353' //red
}
return '<div style="margin-top: -15.5px; text-align:center"><span style="font-size:10px;color:' + color + '">' + this.y + '</span><br/>' + '</div>'
},
}
Working JSFiddle example: http://jsfiddle.net/ewolden/x6j1ywdb/
If you want the dataLabel to be a gradient, you can implement (or borrow) a gradient function, such as this one: Programmatically Lighten or Darken a hex color (or rgb, and blend colors)
Working JSFiddle example: (with gradient dataLabels): http://jsfiddle.net/ewolden/x6j1ywdb/12/
answered Nov 13 '18 at 12:50
ewoldenewolden
4,21031225
edited Nov 13 '18 at 13:51
answered Nov 13 '18 at 12:50
ewoldenewolden
4,21031225
answered Nov 13 '18 at 12:50
ewoldenewolden
4,21031225
answered Nov 13 '18 at 12:50
ewoldenewolden
4,21031225
4,21031225
Thanks ewolden! This is great approach, but I was thinking to match the label color completely - because between for values 10 and 50 the gauge color will be gradient between red and yellow - just put the value 25 in your example and you will see what I mean. - I guess I have to implement the logic for gradient color, right?
– ddelic
Nov 13 '18 at 13:24
Glad to help. I see your point, I updated the answer with a gradient example now. The gradient function is from a very well written answer that I linked.
– ewolden
Nov 13 '18 at 13:52
add a comment |
Thanks ewolden! This is great approach, but I was thinking to match the label color completely - because between for values 10 and 50 the gauge color will be gradient between red and yellow - just put the value 25 in your example and you will see what I mean. - I guess I have to implement the logic for gradient color, right?
– ddelic
Nov 13 '18 at 13:24
Glad to help. I see your point, I updated the answer with a gradient example now. The gradient function is from a very well written answer that I linked.
– ewolden
Nov 13 '18 at 13:52
Thanks ewolden! This is great approach, but I was thinking to match the label color completely - because between for values 10 and 50 the gauge color will be gradient between red and yellow - just put the value 25 in your example and you will see what I mean. - I guess I have to implement the logic for gradient color, right?
– ddelic
Nov 13 '18 at 13:24
Thanks ewolden! This is great approach, but I was thinking to match the label color completely - because between for values 10 and 50 the gauge color will be gradient between red and yellow - just put the value 25 in your example and you will see what I mean. - I guess I have to implement the logic for gradient color, right?
– ddelic
Nov 13 '18 at 13:24
Glad to help. I see your point, I updated the answer with a gradient example now. The gradient function is from a very well written answer that I linked.
– ewolden
Nov 13 '18 at 13:52
Glad to help. I see your point, I updated the answer with a gradient example now. The gradient function is from a very well written answer that I linked.
– ewolden
Nov 13 '18 at 13:52
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.
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%2f53281222%2fhighcharts-js-dynamic-label-color%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
