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
- How do I create stacked chart with Chart.js version 2.0.0-beta
- How to shift the origin along y-axis direction in a chart.js3 line chart, so that x-axis pass through a different point other than (0,0)?
- Chart.js how to inser values from json
- How to implement scattered chart using chart.js which is not available by default?
- Change color on labels in chart.js
- Add data to line chart using chart.js
- Chart.js positive/negative values fill with out twist
- How to remove quotations from a dictionary in python
- chart.js with json data and jquery - error :-(
- How to show 2 populations types in one bar using chartjs?
- Chart.js returns a console error and does not display the chart when using variables as data input
- Can't size doughnut chart from chart.js
- Draw a mathematical function in chartjs
- How I can add some horizontal padding to x-axis tick values in Chart.js?
- create a multi line chart using Chart.js
- Including Chart.js in a webpage without node.js and without CDN
- Line chart not rendering data
- How to display data on hover inside doughnut chart in Angular Chart?
- Uncaught TypeError: [Array].filter is not a function
- Pass Ajax response array to Chart.js
- Change legend style from bar to line chart.js 2.4.0
- Issue related to the usage of the library Chart.js
- On click of legend, bar is hiding without issue but data value is not hiding in charts.js
- Getting "TypeError: document.getElementById(...) is null" when using react.js with chart.js
- Chart JS - Is there a way to connect two datasets in a line chart?
- Trying to refresh label when click on it. Cannot read property '_meta' of undefined"
- Tooltips on multiple charts in chart.js showing the wrong values
- How can I display fixed labels on X-axis while having data on that axis?
- How can i reformat dates
- How to populate a charts.js pie chart using json array