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'
},
}
Related
When hovering over the points, I'm trying to toggle one annotation's visibility (display: true/false).
I started by defining the onHover interaction
options: {
plugins: {
annotation: {
annotations: {
one,
two,
three
},
},
},
onHover: (event, elements, chart) => {
if (elements[0]) {
// get the list of all annotations
}
}
},
Now, I'm stuck on getting the list of all defined annotations.
While browsing, I found this issue about annotations. Assuming myLine corresponds to chart, I was expecting to get the first annotation with chart.options.annotation.annotations[0]. However, chart.options.annotation is not defined.
Am I missing anything here? Is it possible to programmatically get the list of denied annotations?
You are configuring your annotations in the options.plugins.annotation namespace so you also need to retrieve them from there instead of options.annotation.
So using this onHover will list your annotations:
onHover: (event, elements, chart) => {
console.log(chart.options.plugins.annotation.annotations)
}
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
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
As i am pretty new to Charting libraries and in my case i have been asked to implement a Chartjs library for my requirement. So i have chosen a chartjs library.
The use case i must want to know if anybody can help me then it would be a great time saver for me. Actually i am googleling since morning for this.
The actual use case is i have doughnut chart in which i am trying to show the data of a single value. As i have gone through the documentation the chartjs works on a array of data values. But my API is having only one value, means in my case its a counter variable. Assume if my maximum counter limit is say 5000 then i have to show that 5000 as a maximum counter and as the current counter is say 100 then i have to show it in the doughnut arc in red color. Means how much the graph has consumed the data something like that.
Assume total runs 5000
If runs became any count like 100 then we need to do minus from total runs - current runs count = 4900 inside the doughnut circle. As the runs increases then we need to show the reduced count runs inside the doughnut circle graph.
Once if the current runs count comes to total runs the show the circle in red color and make the count to 0.
Is this possible using Chartjs? See below picture.
There is no built-in support for doing this in Chart.js, however, it can be achieved using a very simple hack. Look at the code and try to understand, if any issues feel free to comment.
I have used chartjs-datalabels plugin to show datalabels on the pieChart.
Hope it helps!
Fiddle -> http://jsfiddle.net/y6mnkz84/7/
function drawPieChart(value, maxValue) {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ["Consumed"],
datasets: [{
data: [value, maxValue - value],
backgroundColor: ['green', 'red'],
}]
},
options: {
tooltips: {
enabled: false,
},
plugins: {
datalabels: {
backgroundColor: function(context) {
return context.dataset.backgroundColor;
},
display: function(context) {
var dataset = context.dataset;
var value = dataset.data[context.dataIndex];
return value > 0;
},
color: 'white'
}
}
}
});
}
drawPieChart(5000, 5000);
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 :