How to get fixed legend and tooltip for dynamically generated data vue-chartjs
I'm trying to generate a vue chart with vuechartjs which would be number 10,20,30,40,50 repeated over a period of time (years).
I'm having hard time getting the legend and tooltip to work as expected.Currently, the label just prints out array of label, and tooltip showing respective labels.
Expected label legend:
Label 1, Label 2, Label 3, Label 4, Label 5 with respective colors: #F44336, #FC9900, #FCC106, #8BC34A, #4CAF50.
- How do I get legend with this label and colors?
- How do I get tool tip showing the
labelwith the data point rather than eachlabelswith the data point? - How would one add an image to the tooltip / label?
Vue.component('reactive',
extends: VueChartJs.Bar,
mixins: [VueChartJs.mixins.reactiveProp],
data: function ()
return
options:
scales:
yAxes: [
ticks:
beginAtZero: true
,
gridLines:
display: true
],
xAxes: [
ticks:
beginAtZero: true
,
gridLines:
display: false
]
,
legend:
display: true
,
tooltips:
enabled: true,
mode: 'single',
callbacks:
label: function(tooltipItems, data)
return '$' + tooltipItems.yLabel;
,
responsive: true,
maintainAspectRatio: false,
height: 200
,
mounted ()
// this.chartData is created in the mixin
this.renderChart(this.chartData, this.options)
)
var vm = new Vue(
el: '.app',
data ()
return
datacollection: null
,
created ()
this.fillData()
,
methods:
fillData ()
this.datacollection =
labels: ['January 2010', 'February 2010', 'March', 'April', 'May 2011', 'June 2018', 'July', 'August 2011', 'August', 'October', 'November', 'December 2018'],
datasets: [
label: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'],
backgroundColor: this.getBackground(),
data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
]
,
getRandomInt ()
var myArray = [10,20,30,40,50]
return myArray[Math.floor(Math.random()*myArray.length)];
,
getBackground()
return ["#8BC34A", "#4CAF50", "#4CAF50", "#4CAF50", "#4CAF50", "#4CAF50", "#F44336", "#FC9900", "#FCC106", "#8BC34A", "#8BC34A", "#4CAF50"]
,
)<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs@3.4.0/dist/vue-chartjs.js"></script>
<div class="app">
<h1>Bar Chart</h1>
<reactive :chart-data="datacollection"></reactive>
<button class="button is-primary" @click="fillData()">Randomize</button>
</div>Codepen
vue.js vuejs2 chart.js vue-chartjs
asked Nov 13 '18 at 20:24
nara_lnara_l
191214
add a comment |
I'm trying to generate a vue chart with vuechartjs which would be number 10,20,30,40,50 repeated over a period of time (years).
I'm having hard time getting the legend and tooltip to work as expected.Currently, the label just prints out array of label, and tooltip showing respective labels.
Expected label legend:
Label 1, Label 2, Label 3, Label 4, Label 5 with respective colors: #F44336, #FC9900, #FCC106, #8BC34A, #4CAF50.
- How do I get legend with this label and colors?
- How do I get tool tip showing the
labelwith the data point rather than eachlabelswith the data point? - How would one add an image to the tooltip / label?
Vue.component('reactive',
extends: VueChartJs.Bar,
mixins: [VueChartJs.mixins.reactiveProp],
data: function ()
return
options:
scales:
yAxes: [
ticks:
beginAtZero: true
,
gridLines:
display: true
],
xAxes: [
ticks:
beginAtZero: true
,
gridLines:
display: false
]
,
legend:
display: true
,
tooltips:
enabled: true,
mode: 'single',
callbacks:
label: function(tooltipItems, data)
return '$' + tooltipItems.yLabel;
,
responsive: true,
maintainAspectRatio: false,
height: 200
,
mounted ()
// this.chartData is created in the mixin
this.renderChart(this.chartData, this.options)
)
var vm = new Vue(
el: '.app',
data ()
return
datacollection: null
,
created ()
this.fillData()
,
methods:
fillData ()
this.datacollection =
labels: ['January 2010', 'February 2010', 'March', 'April', 'May 2011', 'June 2018', 'July', 'August 2011', 'August', 'October', 'November', 'December 2018'],
datasets: [
label: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'],
backgroundColor: this.getBackground(),
data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
]
,
getRandomInt ()
var myArray = [10,20,30,40,50]
return myArray[Math.floor(Math.random()*myArray.length)];
,
getBackground()
return ["#8BC34A", "#4CAF50", "#4CAF50", "#4CAF50", "#4CAF50", "#4CAF50", "#F44336", "#FC9900", "#FCC106", "#8BC34A", "#8BC34A", "#4CAF50"]
,
)<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs@3.4.0/dist/vue-chartjs.js"></script>
<div class="app">
<h1>Bar Chart</h1>
<reactive :chart-data="datacollection"></reactive>
<button class="button is-primary" @click="fillData()">Randomize</button>
</div>Codepen
vue.js vuejs2 chart.js vue-chartjs
asked Nov 13 '18 at 20:24
nara_lnara_l
191214
add a comment |
I'm trying to generate a vue chart with vuechartjs which would be number 10,20,30,40,50 repeated over a period of time (years).
I'm having hard time getting the legend and tooltip to work as expected.Currently, the label just prints out array of label, and tooltip showing respective labels.
Expected label legend:
Label 1, Label 2, Label 3, Label 4, Label 5 with respective colors: #F44336, #FC9900, #FCC106, #8BC34A, #4CAF50.
- How do I get legend with this label and colors?
- How do I get tool tip showing the
labelwith the data point rather than eachlabelswith the data point? - How would one add an image to the tooltip / label?
Vue.component('reactive',
extends: VueChartJs.Bar,
mixins: [VueChartJs.mixins.reactiveProp],
data: function ()
return
options:
scales:
yAxes: [
ticks:
beginAtZero: true
,
gridLines:
display: true
],
xAxes: [
ticks:
beginAtZero: true
,
gridLines:
display: false
]
,
legend:
display: true
,
tooltips:
enabled: true,
mode: 'single',
callbacks:
label: function(tooltipItems, data)
return '$' + tooltipItems.yLabel;
,
responsive: true,
maintainAspectRatio: false,
height: 200
,
mounted ()
// this.chartData is created in the mixin
this.renderChart(this.chartData, this.options)
)
var vm = new Vue(
el: '.app',
data ()
return
datacollection: null
,
created ()
this.fillData()
,
methods:
fillData ()
this.datacollection =
labels: ['January 2010', 'February 2010', 'March', 'April', 'May 2011', 'June 2018', 'July', 'August 2011', 'August', 'October', 'November', 'December 2018'],
datasets: [
label: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'],
backgroundColor: this.getBackground(),
data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
]
,
getRandomInt ()
var myArray = [10,20,30,40,50]
return myArray[Math.floor(Math.random()*myArray.length)];
,
getBackground()
return ["#8BC34A", "#4CAF50", "#4CAF50", "#4CAF50", "#4CAF50", "#4CAF50", "#F44336", "#FC9900", "#FCC106", "#8BC34A", "#8BC34A", "#4CAF50"]
,
)<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs@3.4.0/dist/vue-chartjs.js"></script>
<div class="app">
<h1>Bar Chart</h1>
<reactive :chart-data="datacollection"></reactive>
<button class="button is-primary" @click="fillData()">Randomize</button>
</div>Codepen
vue.js vuejs2 chart.js vue-chartjs
asked Nov 13 '18 at 20:24
nara_lnara_l
191214
I'm trying to generate a vue chart with vuechartjs which would be number 10,20,30,40,50 repeated over a period of time (years).
I'm having hard time getting the legend and tooltip to work as expected.Currently, the label just prints out array of label, and tooltip showing respective labels.
Expected label legend:
Label 1, Label 2, Label 3, Label 4, Label 5 with respective colors: #F44336, #FC9900, #FCC106, #8BC34A, #4CAF50.
- How do I get legend with this label and colors?
- How do I get tool tip showing the
labelwith the data point rather than eachlabelswith the data point? - How would one add an image to the tooltip / label?
Vue.component('reactive',
extends: VueChartJs.Bar,
mixins: [VueChartJs.mixins.reactiveProp],
data: function ()
return
options:
scales:
yAxes: [
ticks:
beginAtZero: true
,
gridLines:
display: true
],
xAxes: [
ticks:
beginAtZero: true
,
gridLines:
display: false
]
,
legend:
display: true
,
tooltips:
enabled: true,
mode: 'single',
callbacks:
label: function(tooltipItems, data)
return '$' + tooltipItems.yLabel;
,
responsive: true,
maintainAspectRatio: false,
height: 200
,
mounted ()
// this.chartData is created in the mixin
this.renderChart(this.chartData, this.options)
)
var vm = new Vue(
el: '.app',
data ()
return
datacollection: null
,
created ()
this.fillData()
,
methods:
fillData ()
this.datacollection =
labels: ['January 2010', 'February 2010', 'March', 'April', 'May 2011', 'June 2018', 'July', 'August 2011', 'August', 'October', 'November', 'December 2018'],
datasets: [
label: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'],
backgroundColor: this.getBackground(),
data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
]
,
getRandomInt ()
var myArray = [10,20,30,40,50]
return myArray[Math.floor(Math.random()*myArray.length)];
,
getBackground()
return ["#8BC34A", "#4CAF50", "#4CAF50", "#4CAF50", "#4CAF50", "#4CAF50", "#F44336", "#FC9900", "#FCC106", "#8BC34A", "#8BC34A", "#4CAF50"]
,
)<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs@3.4.0/dist/vue-chartjs.js"></script>
<div class="app">
<h1>Bar Chart</h1>
<reactive :chart-data="datacollection"></reactive>
<button class="button is-primary" @click="fillData()">Randomize</button>
</div>Codepen
Vue.component('reactive',
extends: VueChartJs.Bar,
mixins: [VueChartJs.mixins.reactiveProp],
data: function ()
return
options:
scales:
yAxes: [
ticks:
beginAtZero: true
,
gridLines:
display: true
],
xAxes: [
ticks:
beginAtZero: true
,
gridLines:
display: false
]
,
legend:
display: true
,
tooltips:
enabled: true,
mode: 'single',
callbacks:
label: function(tooltipItems, data)
return '$' + tooltipItems.yLabel;
,
responsive: true,
maintainAspectRatio: false,
height: 200
,
mounted ()
// this.chartData is created in the mixin
this.renderChart(this.chartData, this.options)
)
var vm = new Vue(
el: '.app',
data ()
return
datacollection: null
,
created ()
this.fillData()
,
methods:
fillData ()
this.datacollection =
labels: ['January 2010', 'February 2010', 'March', 'April', 'May 2011', 'June 2018', 'July', 'August 2011', 'August', 'October', 'November', 'December 2018'],
datasets: [
label: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'],
backgroundColor: this.getBackground(),
data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
]
,
getRandomInt ()
var myArray = [10,20,30,40,50]
return myArray[Math.floor(Math.random()*myArray.length)];
,
getBackground()
return ["#8BC34A", "#4CAF50", "#4CAF50", "#4CAF50", "#4CAF50", "#4CAF50", "#F44336", "#FC9900", "#FCC106", "#8BC34A", "#8BC34A", "#4CAF50"]
,
)<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs@3.4.0/dist/vue-chartjs.js"></script>
<div class="app">
<h1>Bar Chart</h1>
<reactive :chart-data="datacollection"></reactive>
<button class="button is-primary" @click="fillData()">Randomize</button>
</div>Vue.component('reactive',
extends: VueChartJs.Bar,
mixins: [VueChartJs.mixins.reactiveProp],
data: function ()
return
options:
scales:
yAxes: [
ticks:
beginAtZero: true
,
gridLines:
display: true
],
xAxes: [
ticks:
beginAtZero: true
,
gridLines:
display: false
]
,
legend:
display: true
,
tooltips:
enabled: true,
mode: 'single',
callbacks:
label: function(tooltipItems, data)
return '$' + tooltipItems.yLabel;
,
responsive: true,
maintainAspectRatio: false,
height: 200
,
mounted ()
// this.chartData is created in the mixin
this.renderChart(this.chartData, this.options)
)
var vm = new Vue(
el: '.app',
data ()
return
datacollection: null
,
created ()
this.fillData()
,
methods:
fillData ()
this.datacollection =
labels: ['January 2010', 'February 2010', 'March', 'April', 'May 2011', 'June 2018', 'July', 'August 2011', 'August', 'October', 'November', 'December 2018'],
datasets: [
label: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5'],
backgroundColor: this.getBackground(),
data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
]
,
getRandomInt ()
var myArray = [10,20,30,40,50]
return myArray[Math.floor(Math.random()*myArray.length)];
,
getBackground()
return ["#8BC34A", "#4CAF50", "#4CAF50", "#4CAF50", "#4CAF50", "#4CAF50", "#F44336", "#FC9900", "#FCC106", "#8BC34A", "#8BC34A", "#4CAF50"]
,
)<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs@3.4.0/dist/vue-chartjs.js"></script>
<div class="app">
<h1>Bar Chart</h1>
<reactive :chart-data="datacollection"></reactive>
<button class="button is-primary" @click="fillData()">Randomize</button>
</div>vue.js vuejs2 chart.js vue-chartjs
vue.js vuejs2 chart.js vue-chartjs
asked Nov 13 '18 at 20:24
nara_lnara_l
191214
asked Nov 13 '18 at 20:24
nara_lnara_l
191214
edited Nov 14 '18 at 6:01
nara_l
asked Nov 13 '18 at 20:24
nara_lnara_l
191214
asked Nov 13 '18 at 20:24
nara_lnara_l
191214
asked Nov 13 '18 at 20:24
nara_lnara_l
191214
191214
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Well it prints out an array of labels, because you pass in for one dataset multiple labels.
If you want a label for each datapoint, you need to pass multiple datasets.
The labels, in most charts in chart.js define your X-Axis. For example dates.
Then you define a dataset with a label. Which can have multiple datapoints.
For example, "Usage of Javascript". In your data array you then have the matching data for the x-axis. If your labels have three values (jan, feb, ma) then your datasets[0].data should also have three values. The first would be matching for "Jan", the second for "Feb" etc.
But thats only one dataset. And only one label for it. So only one entry in the legend. If you want mulitple entries, you need to define multiple datasets.
labels: ['Jan', 'Feb', 'Mar'],
datasets: [
label: ['Usage of Javascript'],
backgroundColor: this.getBackground(),
data: [10, 20, 22]
,
label: ['Usage of PHP'],
backgroundColor: this.getBackground(),
data: [16, 18, 20]
]
answered Nov 16 '18 at 10:35
Jakub JuszczakJakub Juszczak
1,40611227
Thanks for providing a general idea on how to go about it. I did solve my issue diving deep into vue-charts :)
– nara_l
Nov 18 '18 at 0:50
add a comment |
Answers to the questions:
- How do I get legend with this label and colors?
By using legendCallback method in your options object passed to chart
- How do I get tool tip showing the label with the data point rather than each labels with the data point?
In Another chart option you can define what you need in tooltip:
tooltips:
mode: 'single',
callbacks:
label: function (tooltipItems)
return tooltipItems.yLabel // tooltipItems has other options which can be probed
,
- How would one add an image to the tooltip / label?
Adding an image tag <img src="https://link-to-image" /> in generating legend or tooltip works fine.
answered Nov 18 '18 at 0:59
nara_lnara_l
191214
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%2f53288941%2fhow-to-get-fixed-legend-and-tooltip-for-dynamically-generated-data-vue-chartjs%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Well it prints out an array of labels, because you pass in for one dataset multiple labels.
If you want a label for each datapoint, you need to pass multiple datasets.
The labels, in most charts in chart.js define your X-Axis. For example dates.
Then you define a dataset with a label. Which can have multiple datapoints.
For example, "Usage of Javascript". In your data array you then have the matching data for the x-axis. If your labels have three values (jan, feb, ma) then your datasets[0].data should also have three values. The first would be matching for "Jan", the second for "Feb" etc.
But thats only one dataset. And only one label for it. So only one entry in the legend. If you want mulitple entries, you need to define multiple datasets.
labels: ['Jan', 'Feb', 'Mar'],
datasets: [
label: ['Usage of Javascript'],
backgroundColor: this.getBackground(),
data: [10, 20, 22]
,
label: ['Usage of PHP'],
backgroundColor: this.getBackground(),
data: [16, 18, 20]
]
answered Nov 16 '18 at 10:35
Jakub JuszczakJakub Juszczak
1,40611227
Thanks for providing a general idea on how to go about it. I did solve my issue diving deep into vue-charts :)
– nara_l
Nov 18 '18 at 0:50
add a comment |
Well it prints out an array of labels, because you pass in for one dataset multiple labels.
If you want a label for each datapoint, you need to pass multiple datasets.
The labels, in most charts in chart.js define your X-Axis. For example dates.
Then you define a dataset with a label. Which can have multiple datapoints.
For example, "Usage of Javascript". In your data array you then have the matching data for the x-axis. If your labels have three values (jan, feb, ma) then your datasets[0].data should also have three values. The first would be matching for "Jan", the second for "Feb" etc.
But thats only one dataset. And only one label for it. So only one entry in the legend. If you want mulitple entries, you need to define multiple datasets.
labels: ['Jan', 'Feb', 'Mar'],
datasets: [
label: ['Usage of Javascript'],
backgroundColor: this.getBackground(),
data: [10, 20, 22]
,
label: ['Usage of PHP'],
backgroundColor: this.getBackground(),
data: [16, 18, 20]
]
answered Nov 16 '18 at 10:35
Jakub JuszczakJakub Juszczak
1,40611227
Thanks for providing a general idea on how to go about it. I did solve my issue diving deep into vue-charts :)
– nara_l
Nov 18 '18 at 0:50
add a comment |
Well it prints out an array of labels, because you pass in for one dataset multiple labels.
If you want a label for each datapoint, you need to pass multiple datasets.
The labels, in most charts in chart.js define your X-Axis. For example dates.
Then you define a dataset with a label. Which can have multiple datapoints.
For example, "Usage of Javascript". In your data array you then have the matching data for the x-axis. If your labels have three values (jan, feb, ma) then your datasets[0].data should also have three values. The first would be matching for "Jan", the second for "Feb" etc.
But thats only one dataset. And only one label for it. So only one entry in the legend. If you want mulitple entries, you need to define multiple datasets.
labels: ['Jan', 'Feb', 'Mar'],
datasets: [
label: ['Usage of Javascript'],
backgroundColor: this.getBackground(),
data: [10, 20, 22]
,
label: ['Usage of PHP'],
backgroundColor: this.getBackground(),
data: [16, 18, 20]
]
answered Nov 16 '18 at 10:35
Jakub JuszczakJakub Juszczak
1,40611227
Well it prints out an array of labels, because you pass in for one dataset multiple labels.
If you want a label for each datapoint, you need to pass multiple datasets.
The labels, in most charts in chart.js define your X-Axis. For example dates.
Then you define a dataset with a label. Which can have multiple datapoints.
For example, "Usage of Javascript". In your data array you then have the matching data for the x-axis. If your labels have three values (jan, feb, ma) then your datasets[0].data should also have three values. The first would be matching for "Jan", the second for "Feb" etc.
But thats only one dataset. And only one label for it. So only one entry in the legend. If you want mulitple entries, you need to define multiple datasets.
labels: ['Jan', 'Feb', 'Mar'],
datasets: [
label: ['Usage of Javascript'],
backgroundColor: this.getBackground(),
data: [10, 20, 22]
,
label: ['Usage of PHP'],
backgroundColor: this.getBackground(),
data: [16, 18, 20]
]
answered Nov 16 '18 at 10:35
Jakub JuszczakJakub Juszczak
1,40611227
answered Nov 16 '18 at 10:35
Jakub JuszczakJakub Juszczak
1,40611227
answered Nov 16 '18 at 10:35
Jakub JuszczakJakub Juszczak
1,40611227
answered Nov 16 '18 at 10:35
Jakub JuszczakJakub Juszczak
1,40611227
1,40611227
Thanks for providing a general idea on how to go about it. I did solve my issue diving deep into vue-charts :)
– nara_l
Nov 18 '18 at 0:50
add a comment |
Thanks for providing a general idea on how to go about it. I did solve my issue diving deep into vue-charts :)
– nara_l
Nov 18 '18 at 0:50
Thanks for providing a general idea on how to go about it. I did solve my issue diving deep into vue-charts :)
– nara_l
Nov 18 '18 at 0:50
Thanks for providing a general idea on how to go about it. I did solve my issue diving deep into vue-charts :)
– nara_l
Nov 18 '18 at 0:50
add a comment |
Answers to the questions:
- How do I get legend with this label and colors?
By using legendCallback method in your options object passed to chart
- How do I get tool tip showing the label with the data point rather than each labels with the data point?
In Another chart option you can define what you need in tooltip:
tooltips:
mode: 'single',
callbacks:
label: function (tooltipItems)
return tooltipItems.yLabel // tooltipItems has other options which can be probed
,
- How would one add an image to the tooltip / label?
Adding an image tag <img src="https://link-to-image" /> in generating legend or tooltip works fine.
answered Nov 18 '18 at 0:59
nara_lnara_l
191214
add a comment |
Answers to the questions:
- How do I get legend with this label and colors?
By using legendCallback method in your options object passed to chart
- How do I get tool tip showing the label with the data point rather than each labels with the data point?
In Another chart option you can define what you need in tooltip:
tooltips:
mode: 'single',
callbacks:
label: function (tooltipItems)
return tooltipItems.yLabel // tooltipItems has other options which can be probed
,
- How would one add an image to the tooltip / label?
Adding an image tag <img src="https://link-to-image" /> in generating legend or tooltip works fine.
answered Nov 18 '18 at 0:59
nara_lnara_l
191214
add a comment |
Answers to the questions:
- How do I get legend with this label and colors?
By using legendCallback method in your options object passed to chart
- How do I get tool tip showing the label with the data point rather than each labels with the data point?
In Another chart option you can define what you need in tooltip:
tooltips:
mode: 'single',
callbacks:
label: function (tooltipItems)
return tooltipItems.yLabel // tooltipItems has other options which can be probed
,
- How would one add an image to the tooltip / label?
Adding an image tag <img src="https://link-to-image" /> in generating legend or tooltip works fine.
answered Nov 18 '18 at 0:59
nara_lnara_l
191214
Answers to the questions:
- How do I get legend with this label and colors?
By using legendCallback method in your options object passed to chart
- How do I get tool tip showing the label with the data point rather than each labels with the data point?
In Another chart option you can define what you need in tooltip:
tooltips:
mode: 'single',
callbacks:
label: function (tooltipItems)
return tooltipItems.yLabel // tooltipItems has other options which can be probed
,
- How would one add an image to the tooltip / label?
Adding an image tag <img src="https://link-to-image" /> in generating legend or tooltip works fine.
tooltips:
mode: 'single',
callbacks:
label: function (tooltipItems)
return tooltipItems.yLabel // tooltipItems has other options which can be probed
,
tooltips:
mode: 'single',
callbacks:
label: function (tooltipItems)
return tooltipItems.yLabel // tooltipItems has other options which can be probed
,
answered Nov 18 '18 at 0:59
nara_lnara_l
191214
answered Nov 18 '18 at 0:59
nara_lnara_l
191214
answered Nov 18 '18 at 0:59
nara_lnara_l
191214
answered Nov 18 '18 at 0:59
nara_lnara_l
191214
191214
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.
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%2f53288941%2fhow-to-get-fixed-legend-and-tooltip-for-dynamically-generated-data-vue-chartjs%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
