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
- Chart.js not initiating
- Can I set different fill color based on a given threshold in Chart.js?
- How to display specific time label in x-axis by Chart.js?
- Chart js show data on hovering legend
- How to display half hour ticks on x-axes
- Line ChartJS empty / null values doesn't break the line
- How can I move chartJs legend left side and change the width and Hight of the chart?
- Setting Common labels and background color common for all the charts in ChartJs
- chartjs - multi axis line chart - cannot read property 'min' of undefined
- Chartjs Overlap click function doesnt work
- Chart area background color chartjs
- keep 2 chart.js contained in a div
- chart.js bar chart x-axis label disappeared
- How to draw vertical axis in google charts
- how to change radius in rg-gauge-chart in Angular
- Is it possible to add more attributes to segement in a Doughnut chart of Chart JS?
- Where does chartjs document what is required in the myChartConfig to instantiate using myChart = new Chart(ctx, myChartConfig)
- Chart.js Bar graph with percentage values
- How to modify chartjs tooltip so i can add customized strings in tooltips
- can't dispal 2 garphs on chart.js
- Unexpected error when attempting to update chart data in Chart.js, in a Vue app
- Syntax to instantiate chart.js chart
- Flask with Chart JS Scatter Plot struggle
- How to read and plot json with Chart.js
- Why are these 2.9 ChartJS bar charts different?
- How do I filter & update dates using react-chartjs-2
- How to add background color for doughnut mid using chart,js
- Chart.js styling questions
- Chart.js options and documentation
- Adding a Title to a Chart.js line graph