score:1
Accepted answer
if you use the latest version of chart.js there is a new update allow you to show a tooltip with value/title. http://www.chartjs.org/docs/
there is several options to custom the tooltip on mouseover
// boolean - determines whether to draw tooltips on the canvas or not
showtooltips: true,
// array - array of string names to attach tooltip events
tooltipevents: ["mousemove", "touchstart", "touchmove"],
// string - tooltip background colour
tooltipfillcolor: "rgba(0,0,0,0.8)",
// string - tooltip label font declaration for the scale label
tooltipfontfamily: "'helvetica neue', 'helvetica', 'arial', sans-serif",
// number - tooltip label font size in pixels
tooltipfontsize: 14,
// string - tooltip font weight style
tooltipfontstyle: "normal",
// string - tooltip label font colour
tooltipfontcolor: "#fff",
// string - tooltip title font declaration for the scale label
tooltiptitlefontfamily: "'helvetica neue', 'helvetica', 'arial', sans-serif",
// number - tooltip title font size in pixels
tooltiptitlefontsize: 14,
// string - tooltip title font weight style
tooltiptitlefontstyle: "bold",
// string - tooltip title font colour
tooltiptitlefontcolor: "#fff",
// number - pixel width of padding around tooltip text
tooltipypadding: 6,
// number - pixel width of padding around tooltip text
tooltipxpadding: 6,
// number - size of the caret on the tooltip
tooltipcaretsize: 8,
// number - pixel radius of the tooltip border
tooltipcornerradius: 6,
// number - pixel offset from point x to tooltip edge
tooltipxoffset: 10,
// string - template string for single tooltips
tooltiptemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
score:1
i agree with @jbr
i have just updated the chart.min.js file link in your fiddle and you existing code shows tooltip on hover the chart..
check the updated fiddle
Source: stackoverflow.com
Related Query
- How to sort XY line chart tooltip items based on value and add thousands separators?
- How to add an on click event to my Line chart using Chart.js
- How to add second Y-axis for Bar and Line chart in Chart.js?
- How to display value of only one datapoint in line chart
- Obtain max value of y axis of line chart rendered with Chart.js
- Map event position to y axis value in chartjs line chart
- Drawing line chart in chart.js placing dots only when value changes
- How to add gradient background to Line Chart [vue-chart.js]
- Add a text as tooltip for each point on a line chart
- How to add area with break on line chart with fill color
- Add data to line chart using chart.js
- chart.js add second line in a Line chart that starts from end of first line
- add info for points in line chart (js)
- How to use segment property to color line / border color based on value in chart js?
- How to add null value rows into pandas dataframe for missing years in a multi-line chart plot
- how to add percentage value to legend field in pie chart using chart.js
- Chart.js - Connect two datasets in a line chart at same y value
- How can I add a euro sign (€) to all tooltips in my chart js line chart
- How to add new dataset in line chart of chart.js by iterating over dictionary in JavaScript?
- Chart.js two y axes line chart tooltip value incorrect for 2nd y axis
- How to get line x value from Label chart js
- Add new line in es6 inside a doughnut chart
- How to add data dynamically to primevue Line chart from vuejs3?
- Add different labels in a line chart - Chart.js
- chart.js Is there way to color line chart ticks depending on value
- Chart.js line chart not showing point on top most value
- add value to Line chart.js
- Chart.js - Add gradient to line chart background
- Add Padding Right to Extended Line Chart in Chart.js V2
- Vue Chart.js -- can I give a line chart a default value for missing data?
More Query from same tag
- Chartkick cumulative chart by date never descending
- How to hide the legend in chart.js in a react project?
- Chartjs Custom Legend with Time on Y-axis
- Remove Chart.js chart padding
- ChartJS 2 - Adding data to chart breaks after X number of items added
- Chart.js parser returns the wrong date (suddenly back in 1990)
- How to update Chartjs in Reactjs?
- How do you set pie chart colors in angular-chart.js
- Reactive charts with Meteor : d3charts , Hightcharts , ChartJS , other?
- 'Chart.js' time chart not displaying properly
- How to perform an histogram with the following dictionary?
- increase the gap between y-axis and first x-axis value chart.js
- How to clear the data for a angular-chart
- Remove zeroline in chartJS Horizontal Bar chart
- Impossible to render multiple charts with chart.js
- Inserting data from controller to an array in javascript
- How to Create Chart.JS Bar Graph with Min, Max & Average
- Execute chartjs after an ajax call with PHP
- How to hide value in Chart JS bar
- decrease bar spacing chartJS v2
- Can I use chartJS for drawing a stock map with rectangle?
- How to navigate tooltips popup by clicking custom buttons outside Chart.js v2 canvas?
- How to set default colour for bars in Chart.js
- Chartjs chart not rendering with pug template
- issue upgrading from chart.js 1 to 3.5
- what is the correct way to destructure a nested json object with fetch?
- How to generate chartjs charts to pdf using laravel?
- Chartjs - Dataset colors are getting overloaded with angular-chartjs
- How I can use a list of a string array in JavaScript into blade view?
- Append second dataset to existing chartjs chart