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
- Customize ChartJS Hover Data Format
- react-rchartjs-2 Radar - dataset with less points than lables
- How to add new dataset in line chart of chart.js by iterating over dictionary in JavaScript?
- Chart JS Tooltip Currency Problem - Stacked Bar Chart
- Is there a way to store a chart as an image directly to server using Chart.js?
- special characters in title of charts of Charts Js
- ChartJs Scatter with Bars
- How to add image inside the doughnut chart using chart.js?
- Histogram like chart with intensity colored columns and per bin opacity to show intensity
- Chartjs small offset on top
- How to access Controller properties in Chart.js
- ChartJs in endless loop
- chartjs creating equilvant background like in chartjs.org
- subset stacked bars chart
- How to prevent empty bars from taking up width in Chart.js bar chart
- Sending 2 fetched result into AJAX
- custom tooltip opacity always 1
- django + chart.js: page language switch button mess up the charts. What?
- chart.js remove on hover effect
- Replace a Canvas Pie Chart Onclick
- How to draw multiple color bars in a bar chart along a Horizontal Line using chart.js
- Chart.js line chart looking as area chart with smooth lines but not sharp
- Adding Chart.js line chart to Jinja2/Flask html page from JS file
- php to json to chart.js
- Is there a way to implement chart-js-plugin-waterfall as a react component
- chart.js stacked graph that overlaps
- automatic legend translation on chart.js
- I get to do scroll
- Chart JS 2 Tick Label Border
- How can I change only a specific option in a chart with chart.js?