score:8
for chart version > 3 rename the object tooltips to tooltip and place it inside the plugin object.
options: {
plugins: {
legend: {
display: false
},
tooltip: {
mode: 'index',
intersect: false
}
},
hover: {
mode: 'nearest',
intersect: false
}
}
score:9
tooltips: {
mode: 'x-axis'
},
^^ that will bring up the tooltip when you hover over any y-axis position. if you only want it to show up when you hover over a point on a line, use this:
tooltips: {
mode: 'label'
},
score:19
yes, you can use chart.js to configure tooltips to get a similiar behavior to the chart that you referenced.
for more information, check out the mode
tooltip config option and hover config options for your needs. here is an example.
options: {
responsive: true,
title:{
display:true,
text:'chart.js line chart'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xaxes: [{
display: true,
scalelabel: {
display: true,
labelstring: 'month'
}
}],
yaxes: [{
display: true,
scalelabel: {
display: true,
},
}]
}
}
here is a codepen example demonstrating the behavior that matches your example.
Source: stackoverflow.com
Related Query
- How can I trigger the hover mode from outside the chart with charts.js 2?
- How to clear a chart from a canvas so that hover events cannot be triggered?
- hover mode on Chart.js
- chartjs show dot point on hover over line chart
- Detecting hover events over parts of a chart using Chart.js
- Changing cursor to pointer on Chart.js bar chart when hover (mousemove) event is disabled?
- Chart.js tooltip hover customization for mixed chart
- Draw a horizontal and vertical line on mouse hover in chart js
- Chartjs - show elements in all datasets on hover using bar chart
- Chart Js Show the old data on mouse hover
- ChartJs line chart - display permanent icon above some data points with text on hover
- Chart js shows old data on mouse hover
- ChartJs Bubble chart - on hover bubble becomes too big
- ChartJS Doughnout Chart Pie Offset on Hover
- Chart JS not showing On hover with small data
- Chart js shows old chart data when hover
- Chartjs numbers on bar chart flash on hover
- ChartJS bar chart - trigger hover even when the cursor is outside of the bar
- Chart.js bar chart label gets hidden on hover
- How to filter hover on a chart in ChartJS?
- How can I change the cursor on pie chart segment hover in ChartJS 3?
- How to customize tooltip on mouse hover of a polar area chart of Angular Charts
- Chartjs : Can I overwrite bar value on hover for every bar chart
- ChartJS/High Charts Radar chart - Different radial axis labels for each category that appear on hover
- Chart js scatter - display label on hover
- what is wrong with my code ? java script chart position
- How to print a chart rendered by code
- Chart Piechart in only show percentage on hover but it shows data and label with percentage both i just want to show percentage only percentage
- Update chart axis labels after hover - chart.js
- VueJS + Chartjs - Chart only renders after code change
More Query from same tag
- How to show thousand in k format for bar values in chart.js
- Flickering of charts and getcontext error with chartjs in the context of Vuejs
- Reading converted rss to json file with chart.js not working
- Chart.js: Legend doesn't update on first call to chart.update()
- Why chart renders after second click - react-chartjs-2
- Plot bar graph in reactjs
- How can I add dataset toggle to Chart.js?
- Chart.js Yaxis custom horizontal line and label
- Chart.js render problem when routing Angular
- Chart.JS using Angular.JS on JSFiddle
- Chart.js - Plot line graph with X , Y coordinates and connected by line
- Chartjs - line chart display with addData() is bugged?
- Chart.js Adapting different X axis with same scale
- How to add color to text using pluginService for Chart.js?
- Reload chart on api call
- How can I add a euro sign (€) to all tooltips in my chart js line chart
- Convert two lists into a dictionary of X and Y Format
- Pie Chart Label is not visible in ReactJS
- How to check if HTML5 canvas element contains something in given coordinate region using javascript
- How to put implement chart.js into an existing page django
- Chartjs: Rotate Axis Title
- Chartjs bar chart appears empty when page loads
- Formatting x-axis labels as time values in Chart.js
- Render chartjs and export image to data not in the DOM
- Create multiple pie chart simultaneously using chart.js
- Chart.js line chart not showing point on top most value
- Chart.js add to onhover text
- Chart.js How to align two X-axis in bar chart?
- Min value of chart (Chart.js)
- Chart.js inside popup on leaflet?