score:13
you could extend the bar graph to include this functionality. by default it will return both bars at the index you have hovered over, it will also check for multiple bars at the area you hovered before creating the tooltip and put any extras in that were missing.
so to do this you will need to override two functions getbarsatevent and showtooltip here is an example and fiddle
i have tried to make it clear the two important areas that have changed look at the comments in the extended bar type. small changes were also made to any reference of the helpers as before they were within the scope but now they need to explicitly call chart.helpers
chart.types.bar.extend({
name: "baronetip",
initialize: function(data){
chart.types.bar.prototype.initialize.apply(this, arguments);
},
getbarsatevent : function(e){
var barsarray = [],
eventposition = chart.helpers.getrelativeposition(e),
datasetiterator = function(dataset){
barsarray.push(dataset.bars[barindex]);
},
barindex;
for (var datasetindex = 0; datasetindex < this.datasets.length; datasetindex++) {
for (barindex = 0; barindex < this.datasets[datasetindex].bars.length; barindex++) {
if (this.datasets[datasetindex].bars[barindex].inrange(eventposition.x,eventposition.y)){
//change here to only return the intrested bar not the group
barsarray.push(this.datasets[datasetindex].bars[barindex]);
return barsarray;
}
}
}
return barsarray;
},
showtooltip : function(chartelements, forceredraw){
console.log(chartelements);
// only redraw the chart if we've actually changed what we're hovering on.
if (typeof this.activeelements === 'undefined') this.activeelements = [];
var ischanged = (function(elements){
var changed = false;
if (elements.length !== this.activeelements.length){
changed = true;
return changed;
}
chart.helpers.each(elements, function(element, index){
if (element !== this.activeelements[index]){
changed = true;
}
}, this);
return changed;
}).call(this, chartelements);
if (!ischanged && !forceredraw){
return;
}
else{
this.activeelements = chartelements;
}
this.draw();
console.log(this)
if (chartelements.length > 0){
//removed the check for multiple bars at the index now just want one
chart.helpers.each(chartelements, function(element) {
var tooltipposition = element.tooltipposition();
new chart.tooltip({
x: math.round(tooltipposition.x),
y: math.round(tooltipposition.y),
xpadding: this.options.tooltipxpadding,
ypadding: this.options.tooltipypadding,
fillcolor: this.options.tooltipfillcolor,
textcolor: this.options.tooltipfontcolor,
fontfamily: this.options.tooltipfontfamily,
fontstyle: this.options.tooltipfontstyle,
fontsize: this.options.tooltipfontsize,
caretheight: this.options.tooltipcaretsize,
cornerradius: this.options.tooltipcornerradius,
text: chart.helpers.template(this.options.tooltiptemplate, element),
chart: this.chart
}).draw();
}, this);
}
return this;
}
});
then to use it just do what you did before but use baronetip (call it whatever you like, what ever is in the name attribute of the extended chart will be available to you.
var ctx = document.getelementbyid("errorchart").getcontext("2d");
var data = {
labels: ["january", "february", "march", "april", "may", "june", "july"],
datasets: [
{
label: "my first dataset",
fillcolor: "rgba(220,220,220,0.5)",
strokecolor: "rgba(220,220,220,0.8)",
highlightfill: "rgba(220,220,220,0.75)",
highlightstroke: "rgba(220,220,220,1)",
data: [65, 0, 0, 0, 0, 0, 0]
},
{
label: "my second dataset",
fillcolor: "rgba(151,187,205,0.5)",
strokecolor: "rgba(151,187,205,0.8)",
highlightfill: "rgba(151,187,205,0.75)",
highlightstroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
var mybarchart = new chart(ctx).baronetip(data);
i should mention that if chartjs gets updated you would need to manually put any changes to the functions into the overridden ones
Source: stackoverflow.com
Related Query
- chart js tooltip how to control the data that show
- How to show tooltip value of all data falling on the same axis in chart js?
- How to show only the data points that have a change in Chartjs?
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Angular chart how to show the legend data value by default along with legend name
- How to show the chartjs bar chart data values labels as text?
- ng2-Chart: can we show the tooltip data of pie chart on load?
- How to show tooltip only when data available in chart js?
- How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs
- angular-chart.js doughnut chart : how to show data in the center of a chart
- Chart.js how to make chart only show the most recent data
- How to set the data of chart in angular which is taken from the backend nodejs api that is store in mongodb and showing on the html page
- Chart JS show multiple data points for the same label
- Add all data in the tooltip of Chart JS
- Chart Js Show the old data on mouse hover
- ChartJS: Show all labels of a mixed chart in the tooltip
- PrimeNg bar chart how to show a label for the y-axis
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- How to show data values in top of bar chart and line chart in chart.js 3
- ChartJs - Pie Chart - how to remove labels that are on the pie chart
- How to commaize the data values provided to a chart in Chart.JS?
- How to create a chart that uses strings for both the X and Y axes?
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- How can I have different values for the chart and the tooltip in chart.js?
- How can I show a subset of data on pie pieces in Chart.JS while still displaying the superset when hovering?
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- How to set the gap between data items in a chartjs chart
- How to get the data attribute of the canvas chart created using chartjs
- How show data label in the graph on Chart.js?
More Query from same tag
- ng2-chart tooltip position change option?
- How do I draw horizontal bars with a label using either ChartJS or D3?
- Real-time line chart with ChartJS using Ajax data
- How do you output the correct value for Chart.js Radar graph on label?
- specify bar width for a single bar
- Remove custom Chart Js tool tip colour square
- Remove data text from Chart.js on hover
- ChartJs - pie chart not showing
- ChartsJS Legend not showing in Angular11
- Testing Chart.js with Jest/Enzyme - Failed to create chart: can't acquire context from the given item
- ChartJS: how to change data in hover box?
- How to change format of DateTime reading into chart.js chart?
- Chartjs - Donut Chart label for small values not visible
- Is it possible to have tick stepSize for each dataset in Chart.js?
- How to pass dynamic values as objects inside data in line chart?
- ChartJS - How to change color of some data points in graph
- use navigator clipboard to store image/png from canvas blob
- javascript : extrapolate an array of numbers
- How to use chart.js in blazor?
- How to use Utils from Chartjs on Django
- How to set vertical lines for new day on x-axis in ChartJS v3.x
- How to create dynamically chart for Ionic App with Firebase data?
- How to show tooltip on legend hover?
- ChartJS (Radar) - Set base tick position for "0" value
- ChartJS - Change legend to toggle buttons
- Chart.js - How can i add a legend?
- Floating clone does not show in chrome if dragged element contains a chartjs component
- How to add conditional logic on Chart.js config?
- Chart JS pass in custom data for points
- Automatic colors assignment in chart.js 2.x doesn't work anymore, used to work in v. 1.x