score:20
Accepted answer
The code below will handle one or more tooltips.
function openTip(oChart,datasetIndex,pointIndex){
if(window.oChart.tooltip._active == undefined)
window.oChart.tooltip._active = []
var activeElements = window.oChart.tooltip._active;
var requestedElem = window.oChart.getDatasetMeta(datasetIndex).data[pointIndex];
for(var i = 0; i < activeElements.length; i++) {
if(requestedElem._index == activeElements[i]._index)
return;
}
activeElements.push(requestedElem);
//window.oChart.tooltip._view.body = window.oChart.getDatasetMeta(datasetIndex).data;
window.oChart.tooltip._active = activeElements;
window.oChart.tooltip.update(true);
window.oChart.draw();
}
function closeTip(oChart,datasetIndex,pointIndex){
var activeElements = window.oChart.tooltip._active;
if(activeElements == undefined || activeElements.length == 0)
return;
var requestedElem = window.oChart.getDatasetMeta(datasetIndex).data[pointIndex];
for(var i = 0; i < activeElements.length; i++) {
if(requestedElem._index == activeElements[i]._index) {
activeElements.splice(i, 1);
break;
}
}
window.oChart.tooltip._active = activeElements;
window.oChart.tooltip.update(true);
window.oChart.draw();
}
Complete solution provided by @BeetleJuice - https://jsfiddle.net/ucvvvnm4/5/
score:21
I would be careful accessing/modifying private variables that begin with _
. You may find yourself with unexpected behavior. Why not trigger the canvas mousemove
event
function openToolTip (myChart, index) {
var mouseMoveEvent, meta, point, rectangle, value;
meta = myChart.getDatasetMeta(0);
rectangle = myChart.canvas.getBoundingClientRect();
point = meta.data[index].getCenterPoint();
mouseMoveEvent = new MouseEvent('mousemove', {
clientX: rectangle.left + point.x,
clientY: rectangle.top + point.y
});
myChart.canvas.dispatchEvent(mouseMoveEvent);
},
To close the tooltip just trigger the mouseout
event
function closeToolTip (myChart) {
var mouseOutEvent = new MouseEvent('mouseout');
return myChart.canvas.dispatchEvent(mouseOutEvent);
}
Source: stackoverflow.com
Related Query
- Programmatically open and close Chart.js tooltip
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- ChartJS v2 - Keep tooltip open when user click on a point of a multiple lines chart
- How to underline and bold tooltip chart js
- How to sort XY line chart tooltip items based on value and add thousands separators?
- How can I have different values for the chart and the tooltip in chart.js?
- Charts JS: Doughnut chart and hiding tooltip for specific data index within each dataset
- How Can customize chartjs doughnut chart border and tooltip
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- How to open a new Tab with javascript and display some chart
- Chart JS tooltip and label width is zeroed
- In Chart.js set chart title, name of x axis and y axis?
- Chart.js - Increase spacing between legend and chart
- How to remove square label from tooltip and make its information in one line?
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- Chartjs v2 - format tooltip for multiple data sets (bar and line)
- Chart JS custom tooltip option?
- Chart.js: bar chart first bar and last bar not displaying in full
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- chart.js scatter chart - displaying label specific to point in tooltip
- chartjs datalabels change font and color of text displaying inside pie chart
- How to save Chart JS charts as image without black background using blobs and filesaver?
- show label in tooltip but not in x axis for chartjs line chart
- Chart.js doughnut chart tooltip size?
- ChartJS add tooltip to a grouped bar chart
- Chart JS Show HTML in Tooltip
- How to add second Y-axis for Bar and Line chart in Chart.js?
- Chart.js Mixed Bar and Line chart with different scales
- chart js tooltip how to control the data that show
More Query from same tag
- how labels in chartjs can make data invisible
- Chart Click Event - Clicking label of doughnut chart, doesn't return label ng2-charts
- Add text before time in tooltip
- I can't import ChartsModule
- how to show bar value on the top of each bar in chartjs
- Map event position to y axis value in chartjs line chart
- undefined labels piechart - chartjs
- integrate a scroll bar along with chartjs-zoom-plugin
- Chart.js: Widen hover distance for points
- can't call any function inside of onClick function chart.js
- chart.js onClick event function, access angular component
- How do you get the width of a datalabel from the Chartjs plugin after the chart animates?
- Merge 2 charts into 1 chart using update button (chart.js)
- Angularjs lazy load chartjs when in another tab
- React Chart.js Match API data to what Title is displaying, then update chart on data/Title change
- How to See Only the Image of Chart
- Chart.js 3.x not able to display data on chart
- How to create a stacked donut chart in Angular 5
- Using Charts.js with react
- Chartjs tooltip out of page
- who know how to put down the title of pie in ionic 2
- How do I use this new extension for chart.js?
- Charts.js polar area scales
- Remove zeroline in chartJS Horizontal Bar chart
- Chart.js - Formatting Y axis
- Chart Js, Style some ticks on the axis differently
- How do I prevent Chartjs tooltip callback returning multiple instances of the same value?
- Chart.js - Where do I find which components should be registered?
- How do you create an extension to Chart.js?
- Completely hide empty bars in chart.js