I'm using Javascrip Date objects for the X label.
I was able to format it properly in the X axis but now I'm struggling to format the label when moving the mouse over each of the bars in the chart.
How can I change that full date to a custom format?
Reproduction online
I guess it will have to go in the ticks option?
Edit the title callback property in your tooltips attribute, stored in the option :
tooltips: {
callbacks: {
title: function(tooltipItem, chartData) {
// You return what you want here
return "Title";
}
}
}
You can see on this jsFiddle your updated example, and here is its result :
Related
I have created spidar (radar) chart by using chart.js here- https://stackblitz.com/edit/angular-ivy-ytsbxn.
When we have data = [100,100,100,200] like this, then all three label's node get overlap on each other so in this case tooltip showing for only one label as you can see in demo.
how can i solved this tooltip issue for overlapped nodes?
First you need to define tooltips.mode: 'point' and then define tooltips.callbacks funtions for title and label in order to obtain meaningful data displayed in the tooltips.
tooltips: {
mode: 'point',
callbacks: {
title: () => 'DataCombination',
label: (tooltipItem, data) => data.labels[tooltipItem.index] + ': ' + data.datasets[0].data[tooltipItem.index]
}
}
Please have a look at your amended StackBlitz
I have a requirement according to which I need to have custom tooltips on a chart instead of default Series, Group and Value labels. I need to change these with my own custom ones.
Is there any way to have custom tooltips to a line with area chart?
1) Edit the chart region, and in the chart attribute JavaScript Code, enter the following code snippet:
function( options ){
// Add new group and series labels to tooltips
if ( options.valueFormats.group ) {
$.extend( options.valueFormats.group, { tooltipLabel: 'Apple' });
} else {
options.valueFormats.group = { tooltipLabel: 'Apple' };
}
$.extend(options.valueFormats.value, { tooltipLabel: 'Fruits' });
return options;
}
2) Save the changes, and run the page. Note that the 'Group' label will now display 'Apple', and the 'Value' label will now display 'Fruits'.
I'm trying to make the labels on a chart tabbable.
In this implementation, I'm using react-chartjs-2.
However, the configuration options object remains standard to chartjs.
Example code:
const options = {
legend: {
onHover: (e) => {
console.log(e.target); // this is the entire legend, not individual labels
},
labels: {
onHover: (e) => {
/* doesn't work; trying to see if have access to e.target even to do DOM manipulation... */
console.log(e.target); // doesn't fire
}
}
}
}
Interestingly, clicking on these labels filters the display of that dataset, I just need a way to make then tabbable with the enter key as well as being clickable.
I have searched the chartjs documentation, but cannot find a way to add hover and focus events, or enable focus-ability of the labels (Fall 2014 to Fall 2018 in screenshot).
I think by specifying just position you will get result.
options: {
legend: {
position: 'top'
},
}
Using ChartJS, I want to be able to change the title on a tooltip depending on the data (mainly as I want the text in a smaller font size than the label). I don't really need a full custom HTML tooltip, just be able to change fontsize and title text.
However just setting this via a "custom" callback means the label for the dataset doesn't have the background correctly displayed
options: {
tooltips: {
custom : t => {
t.title = ['Hello'];
}
}
}
See this JSFiddle: https://jsfiddle.net/MrPurpleStreak/2n8md9Lh/
Hover over a point and see the "hello" on a black background, but the data not.
NOTE: I've found a way to accomplish my initial goal, but this struck me as a bug in chartJS?
There seems to be an issue with the custom property.
I recommend using the callbacks instead :
tooltips: {
displayColors: false,
backgroundColor: 'rgb(0,0,0,1)',
callbacks: {
title: function(tooltipItems, data) {
return 'Hello';
},
}
}
See jsFiddle
I'm building my data items like this:
data.push({ x: moment(new Date(e.StartDate)).week(), y: e.title, label:`${e.title} ${e.type} ${e.percentage}%` });
How do I write a custom tooltip callback to display the label string?
Chart.js Docs show a complete description for custom tooltips:
http://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips
and also examples:
http://www.chartjs.org/samples/latest/tooltips/custom-line.html
http://www.chartjs.org/samples/latest/tooltips/custom-pie.html
http://www.chartjs.org/samples/latest/tooltips/custom-points.html