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'.
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'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 have multiple charts showing different data. however they are all the same object type e.ge [acc1, acc2, acc3]. Therefore I was wondering if it is possible to have one parent legend set on a page somewhere and clicking it will show/hide all the corresponding dataset from all the charts?
I think you can hide all the legends of the charts except for one and implement a custom onClick function to handle clicks on that legend and hide all the corresponding datasets for each chart.
The current onClick implementation looks like this:
onClick: function(e, legendItem) {
var index = legendItem.datasetIndex;
var ci = this.chart;
var meta = ci.getDatasetMeta(index);
// See controller.isDatasetVisible comment
meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
// We hid a dataset ... rerender the chart
ci.update();
}
This function needs to be defined in options.legend.onClick. To make this work you would need to rewrite the above function to implement a loop, selecting all the charts necessary and select the meta, hide it and update the chart.
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 :