In this wonderful sample, we know blue and red belong to stack: 'Stack 0'. There are some old questions related in SO, after a year what's the simplest way to display 'Stack 0' and 'Stack 1' inside the chart?
I found the datalabels plugin the easiest to use and quite simple to install: https://github.com/chartjs/chartjs-plugin-datalabels
A quick demo is here:
https://chartjs-plugin-datalabels.netlify.com/samples/charts/bar.html
Edit: Oh I see you want to actually just label the data with what it represents, and not the value. You may still be able to do this by providing a formatter function as an option. https://chartjs-plugin-datalabels.netlify.com/formatting . In this case, you'd override the data to just display the label. The label data might be in the context.
Like David said you can use chartjs-plugin-datalabels with a implementation like this:
plugins: {
datalabels: {
align: 'start',
anchor: 'start',
color: 'black',
formatter: function(value, context) {
let ds = context.chart.data.datasets
// check if it's the first ds
if(ds[context.datasetIndex - 1]) {
// check if the ds is in the same stack as the ds before
if(ds[context.datasetIndex - 1].stack == ds[context.datasetIndex].stack) {
return ''
} else {
return ds[context.datasetIndex].stack;
}
} else {
return ds[context.datasetIndex].stack;
}
}
}
}
Related
Here is a codepen that I am using to solve this problem. What I would like to do is get the length of the horizontal bars to determine if the label should be plotted inside or outside of the bar. Currently, what I have happening:
{
datalabels: {
color: function(context) {
return [0, 3].includes(context.dataIndex) ? 'black' : 'white'
},
anchor: 'start',
align: 'right',
offset: function(context) {
const chart = context.chart;
const area = chart.chartArea;
const meta = chart.getDatasetMeta(context.datasetIndex);
const model = meta.data[context.dataIndex];
// model.width is NaN
// is there a way to get this value
// after the animation is complete?
console.log(model, model.width)
return 4;
},
font: {
size: 9
}
}
When you run the codepen you notice that model.width prints as NaN but when you look at the object itself model.width is there. If I introduce a setTimeout to log that value it exists (not NaN). When I turn the animation off model.width is available in the function.
Therefore, I think the way to make this happen is to get the values after the animation renders. Is there a way to do that in the offset function for datalabels or is there another way of doing that?
You can use the getProps on the model to get the width after the animations are over like so:
offset: function(context) {
const chart = context.chart;
const area = chart.chartArea;
const meta = chart.getDatasetMeta(context.datasetIndex);
const model = meta.data[context.dataIndex];
const {
width
} = model.getProps(['width'], true);
console.log(width)
return 4;
},
Updated codepen: https://codepen.io/leelenaleee/pen/MWQGbdM?editors=1010
I might have been thinking about it the wrong way. By playing around with the values I realized the value itself is a pretty good indication of whether it should be inside or outside of the bar. What I've done instead is evaluate if the value is greater than 30. If so the color is white and the anchor is set to start. If it less than 30 the color is black and the anchor is set to end:
https://codepen.io/thoughtassassin/pen/rNJvOrj
plugins: {
datalabels: {
color: (context) => getValue(context) > 30 ? '#fff' : '#000',
anchor: (context) => getValue(context) > 30 ? 'start' : 'end',
align: 'right',
offset: 5,
font: {
size: 9
}
},
}
I have a component code like below
changeData() {
const changedData = this.getData();
this.chartData = Object.assign({}, changedData);
this.lineTooltips = this.getLineTooltips();
this.chartOptions = {
tooltips: {
enabled: true,
callbacks: {
label: function(tooltipItem, data) {
return (data.tooltips[tooltipItem.index]).split('#');
},
}
}
}
}
and also HTML file
<div class="chartStyle">
<p-chart type="line" [data]="chartData" responsive="true" [options]="chartOptions" (onDataSelect)="selectData($event)"></p-chart>
The chart can load the line and data, but I hover to each item on the chart, the callback function did not work to load tooltip.
If you log data.tooltips you will see its undefined, and since you try to read things from it it will throw an error and not draw anything.
Looking at the documentation I think you have to replace data.tooltips with data.datasets. (https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback)
The best thing you can do is just log both tooltipItem and data and go through the objects to see how you can combine them to get to the point you need and then insert that in your callback.
I am new using chart.js.
I have this image:
I am trying to delete the number over the bar, how can I do it? I am using Angular 9 and typescript but I need to show it only when you click on the bar.
thx
The solution for mi is that:
plugins: {
datalabels: {
...
formatter: function(value, context) {
return "";
}
}
}
I'm using chartjs with Bootstrap 4, on version 2.6.0.
Everything is working fine, except that I'm trying to replace an information when value is 0 on tooltip to not voted yet
I've tried a lot, and can't figure it out.
Graph picture
Can you help me?
There's an image attached that illustrates.
The value should still be zero inside the Graph, but I need to translate this information on the tooltip when the value is 0.
My code already has this information:
tooltips: {
custom: function(tooltip) {
if (!tooltip) return;
// disable displaying the color box;
tooltip.displayColors = false;
},
callbacks: {
title: function(tooltipItem, data) {
return this._data.labels[tooltipItem[0].index];
}
}
},
Thanks a lot.
Edit: Here is the second image after the suggested fix.
I'm not good with it but this will get it done. You might have to work it differently. But if you put how you are creating your chart then I can make it an exact match. Essentially you will want this:
callbacks: {
title: function(tooltipItem, data) {
return this._data.labels[tooltipItem[0].index];
},
label: function(tooltipItem, data){
var lab = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
return lab === 0 ? "Não Avaliado" : "Avaliação Geral: " + lab;
}
}
I am using chart.js to show a line chart. How can I hide a tooltip label for a chart.js line chart? The label in the tooltip is showing undefined so I want to hide the label (please see the screenshot)?
Perhaps there is a way to modify tooltip where I can show only the legends value in tooltip? My code is as follows:
myLine = new Chart(ctx).Line(lineChartData, {
type: 'line',
responsive: true,
scaleShowGridLines : false,
bezierCurve : false,
animationEasing: "linear",
tooltipEvents: ["mousemove", "touchstart", "touchmove"],
showTooltips: true,
scaleLineColor: "rgba(0,0,0,.8)",
});
Just set the tooltipTitleFontSize to 0 in your options.
Preview
Script
myLine = new Chart(ctx).Line(lineChartData, {
...
tooltipTitleFontSize: 0
});
I know I am late, but I guess it still has merit to add this one.
check this : https://stackoverflow.com/a/44632748/12061669
It uses a function to hide the title:
options:{
tooltips:{
callbacks:{
title: ()=>{}
}
}
}
Setting the title's font size to zero is not ideal as you will still see an (ugly) extra space on top of the tooltip, as if the title line is still there - which honestly is what you'd expect.
Instead, I used Yumin Gui's answer but had to return null for it to work:
`
tooltips: {
callbacks: {
title: () => null,
},
},
The result is exactly as in the pie charts (which does not have a title in its default tooltips).
To hide the tooltip title/label, it should be added in the options object for that chart as follows:
options: {
plugins: {
tooltip: {
callbacks: {
title : () => null // or function () { return null; }
}
}
}
}
Do refer to the documentation to understand better that it should be handled with a custom callback function, and it is not a config that can be set in options directly.
The accepted answer won't work in newer versions of chart.js, as Aman said in comments, what you can use now is this:
tooltips: { titleFontSize: 0 }
Example:
var bar_chart = document.getElementById('bar_canvas').getContext('2d');
window.myBar = new Chart(bar_chart, {
type: 'bar',
data: bar_chart_data,
options: {
tooltips: {
titleFontSize: 0,
bodyFontSize: 14,
}
}
});