Mixing
TooltipItems's xLabel and yLabel on Chart.js, what do they mean, where they come from?
I'm using, chart.js and im trying to use the tooltip callback.
I have some basic data, and when i print the content of tooltipItems
i see it prints an object like this:
xLabel: "Group1", yLabel: 60, index: 0, datasetIndex: 0, x: 10 and so on
What i don't understand is.. why does xLabel is "Group1" and yLabel is 60
"groupOne" was never defined as xLabel.. nor yLabel as 60
Plus in the documentation it says they both should be a string and here xLabel is a String and yLabel a number...
https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-item-interface
So im very confused what is wrong with this?
Here is the options and data:
const data = {
labels: ['Group1', 'Group2'],
datasets: [
{
label: 'label1',
fillColor: 'rgba(20,220,220,0.5)',
strokeColor: 'rgba(220,20,220,0.8)',
highlightFill: 'rgba(220,220,22,0.75)',
highlightStroke: 'rgba(220,220,220,1)',
data: [60, 30],
},
{
label: 'label2',
fillColor: 'rgba(11,17,205,0.5)',
strokeColor: 'rgba(151,18,05,0.8)',
highlightFill: 'rgba(51,87,25,0.75)',
highlightStroke: 'rgba(190,148,7,1)',
data: [28, 50],
},
],
};
const options = {
legend: {
display: false,
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: (tooltipItems, data) => {
console.log(tooltipItems);
return `${tooltipItems.yLabel}€`;
},
},
},
};
chart.js
asked Nov 19 '18 at 16:22
Giorgio Martini
16018
add a comment |
I'm using, chart.js and im trying to use the tooltip callback.
I have some basic data, and when i print the content of tooltipItems
i see it prints an object like this:
xLabel: "Group1", yLabel: 60, index: 0, datasetIndex: 0, x: 10 and so on
What i don't understand is.. why does xLabel is "Group1" and yLabel is 60
"groupOne" was never defined as xLabel.. nor yLabel as 60
Plus in the documentation it says they both should be a string and here xLabel is a String and yLabel a number...
https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-item-interface
So im very confused what is wrong with this?
Here is the options and data:
const data = {
labels: ['Group1', 'Group2'],
datasets: [
{
label: 'label1',
fillColor: 'rgba(20,220,220,0.5)',
strokeColor: 'rgba(220,20,220,0.8)',
highlightFill: 'rgba(220,220,22,0.75)',
highlightStroke: 'rgba(220,220,220,1)',
data: [60, 30],
},
{
label: 'label2',
fillColor: 'rgba(11,17,205,0.5)',
strokeColor: 'rgba(151,18,05,0.8)',
highlightFill: 'rgba(51,87,25,0.75)',
highlightStroke: 'rgba(190,148,7,1)',
data: [28, 50],
},
],
};
const options = {
legend: {
display: false,
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: (tooltipItems, data) => {
console.log(tooltipItems);
return `${tooltipItems.yLabel}€`;
},
},
},
};
chart.js
asked Nov 19 '18 at 16:22
Giorgio Martini
16018
add a comment |
I'm using, chart.js and im trying to use the tooltip callback.
I have some basic data, and when i print the content of tooltipItems
i see it prints an object like this:
xLabel: "Group1", yLabel: 60, index: 0, datasetIndex: 0, x: 10 and so on
What i don't understand is.. why does xLabel is "Group1" and yLabel is 60
"groupOne" was never defined as xLabel.. nor yLabel as 60
Plus in the documentation it says they both should be a string and here xLabel is a String and yLabel a number...
https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-item-interface
So im very confused what is wrong with this?
Here is the options and data:
const data = {
labels: ['Group1', 'Group2'],
datasets: [
{
label: 'label1',
fillColor: 'rgba(20,220,220,0.5)',
strokeColor: 'rgba(220,20,220,0.8)',
highlightFill: 'rgba(220,220,22,0.75)',
highlightStroke: 'rgba(220,220,220,1)',
data: [60, 30],
},
{
label: 'label2',
fillColor: 'rgba(11,17,205,0.5)',
strokeColor: 'rgba(151,18,05,0.8)',
highlightFill: 'rgba(51,87,25,0.75)',
highlightStroke: 'rgba(190,148,7,1)',
data: [28, 50],
},
],
};
const options = {
legend: {
display: false,
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: (tooltipItems, data) => {
console.log(tooltipItems);
return `${tooltipItems.yLabel}€`;
},
},
},
};
chart.js
asked Nov 19 '18 at 16:22
Giorgio Martini
16018
I'm using, chart.js and im trying to use the tooltip callback.
I have some basic data, and when i print the content of tooltipItems
i see it prints an object like this:
xLabel: "Group1", yLabel: 60, index: 0, datasetIndex: 0, x: 10 and so on
What i don't understand is.. why does xLabel is "Group1" and yLabel is 60
"groupOne" was never defined as xLabel.. nor yLabel as 60
Plus in the documentation it says they both should be a string and here xLabel is a String and yLabel a number...
https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-item-interface
So im very confused what is wrong with this?
Here is the options and data:
const data = {
labels: ['Group1', 'Group2'],
datasets: [
{
label: 'label1',
fillColor: 'rgba(20,220,220,0.5)',
strokeColor: 'rgba(220,20,220,0.8)',
highlightFill: 'rgba(220,220,22,0.75)',
highlightStroke: 'rgba(220,220,220,1)',
data: [60, 30],
},
{
label: 'label2',
fillColor: 'rgba(11,17,205,0.5)',
strokeColor: 'rgba(151,18,05,0.8)',
highlightFill: 'rgba(51,87,25,0.75)',
highlightStroke: 'rgba(190,148,7,1)',
data: [28, 50],
},
],
};
const options = {
legend: {
display: false,
},
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: (tooltipItems, data) => {
console.log(tooltipItems);
return `${tooltipItems.yLabel}€`;
},
},
},
};
chart.js
chart.js
asked Nov 19 '18 at 16:22
Giorgio Martini
16018
asked Nov 19 '18 at 16:22
Giorgio Martini
16018
asked Nov 19 '18 at 16:22
Giorgio Martini
16018
asked Nov 19 '18 at 16:22
Giorgio Martini
16018
asked Nov 19 '18 at 16:22
Giorgio Martini
16018
16018
add a comment |
add a comment |
0
active
oldest
votes
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%2f53378812%2ftooltipitemss-xlabel-and-ylabel-on-chart-js-what-do-they-mean-where-they-come%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53378812%2ftooltipitemss-xlabel-and-ylabel-on-chart-js-what-do-they-mean-where-they-come%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
