Here is a Grouped Horizontal Bar Chart:
http://jsfiddle.net/jmpxgufu/185/
var ctx = document.getElementById("myChart").getContext("2d");
var chart = {
options: {
scales: {
yAxes: [{ barPercentage: 1.0 }],
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
console.log(tooltipItem);
return data.datasets[tooltipItem.datasetIndex].label +': ' + data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].toLocaleString();
}
}
},
responsive: true,
maintainAspectRatio: false,
animation: {
onComplete: function(animation) {
}
}
},
type: 'horizontalBar',
data: {
labels: ['Topic1'],
datasets: [
{
label: 'Something',
borderColor: 'blue',
borderWidth: 1,
backgroundColor: Color('blue').alpha(0.5).rgbString(),
data: [40],
fill: false
},
{
label: 'Something else',
borderColor: 'orange',
borderWidth: 1,
backgroundColor: Color('orange').alpha(0.5).rgbString(),
data: [17],
fill: false
}
]
}};
var myLiveChart = new Chart(ctx, chart);
If you look at the chart, there are two bars (an orange and a blue) associated with the label 'Topic1'.
When I hover over just the orange bar it says:
Topic1
Something: 40
Something else: 17
When I hover over just the blue bar it says:
Topic1
Something: 40
Something else: 17
You will also notice that because there are two bars in the group, the function is executed twice, taking my string I am returning, and forming this "grouped" tooltip message (I put the console.log in there to show it is getting executed twice).
I only want the data for the bar I am hovering over.
When I hover over just the orange bar I want it to say:
Topic1
Something else: 17
When I hover over just the blue bar I want it to say:
Topic1
Something: 40
But, I haven't figured out how to determine which is the active bar (of the two).
What am I missing here?
You can use cell values as data labels for your chart. Right-click the data series or data label to display more data for, and then click Format Data Labels. Click Label Options and under Label Contains, select the Values From Cells checkbox.
Tooltips are the little boxes that pop up when you hover over something. (Hovercards are more general, and can appear anywhere on the screen; tooltips are always attached to something, like a dot on a scatter chart, or a bar on a bar chart.)
A bar graph is a graph with rectangular bars with lengths and heights proportional to the values that they represent. On one axis of the graph, it shows the data categories that are being compared. The other axis represents the values corresponding to each data category.
To get the desired behavior that you are after, you would need to set tooltips mode
to nearest
/ point
:
tooltips: {
mode: 'nearest'
}
from the docs :
# nearest
Gets the item that is nearest to the point. The nearest item is determined based on the distance to the center of the chart item (point, bar). If 2 or more items are at the same distance, the one with the smallest area is used. If intersect is true, this is only triggered when the mouse position intersects an item in the graph. This is very useful for combo charts where points are hidden behind bars.
Here is the working fiddle.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With