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
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'
},
}
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
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 :
I'm trying to set a custom style to a group of options belonging to a dropdown or a Radio Group. I'm searching all over and it seems impossible. At least I would like to decrease the size of the letters in the text of each option because is too big! and crashes my UI.
Here's and example of what I need:
RadioGroup {
id: groupOrigin
objectName: "groupOrigin"
Option{
text: "text to display"
//This text default style is what I'm trying to change. Please help!.
}
}
thanks!
for Radio group you can achieve this using custom implementation. Take a label and place it after the radio group did not provide text inside the options tag. So whatever style you want to apply can be done using label.
On label you can set the font size, color and other style parameter you want to apply.
Please check the source code below for this custom radio button. I did this in the QML you can achieve same in C++.
// The Component title.
Label {
id: titleLabel
text: ""
textStyle {
base: SystemDefaults.TextStyles.SmallText
alignment: TextAlignment.Center
}
layoutProperties: StackLayoutProperties {
horizontalAlignment: HorizontalAlignment.Fill
}
}
// The radio group presenting the different curves.
RadioGroup {
id: radioGroup
Option {
text: "Height"
}
}