score:1
you can achieve what you want if you disable the default tooltip and create a custom one.
if you have access to the php api, i would personally change the data so that the date is on the x axis rather than just numbers.
var customtooltip = function(tooltip) {
$(this._chart.canvas).css('cursor', 'pointer');
var positiony = this._chart.canvas.offsettop;
var positionx = this._chart.canvas.offsetleft;
$('.chart-tooltip').css({
opacity: 0
});
if (!tooltip || !tooltip.opacity) {
return;
}
if (tooltip.datapoints.length > 0) {
tooltip.datapoints.foreach(function(datapoint) {
var content = extra[datapoint.index];
$('#tooltip').html(content);
$('#tooltip').css({
opacity: 1,
top: positiony + datapoint.y + 'px',
left: positionx + datapoint.x + 'px',
});
});
}
};
i have created a fiddle to demonstrate using your data: https://jsfiddle.net/y01ewbtz/
Source: stackoverflow.com
Related Query
- chartjs tooltip html: Use data to populate tooltip
- Chartjs v2 - format tooltip for multiple data sets (bar and line)
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- How to use HTML in custom tooltip in angular charts?
- Chartjs - Insert additional data into chart tooltip
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Missing Tooltip for some data points using chartjs
- how to display chart data as html table chartjs
- How to create a custom tooltip for chartJS graph with data in JSON array in JavaScript?
- Chartjs show hidden data on tooltip
- Can I use a custom data format when using Vue + Chartjs
- ChartJS have xAxes labels match data source
- Chartjs Bar Chart showing old data when hovering when use of ajax
- Chartjs populate data with Axios response
- How to use JSON data as chartjs data?
- Displaying data from simple html form to display in chartjs
- ChartJS tooltip values aren't matching the data after updating multiple charts
- Calling data from outside of Chartjs code
- How to use output of JSON.parse() as a input of HTML charts' data field?
- Use PHP to populate chart.js with data from an SQLite Database
- ChartJS Tooltip - Change Data Format Displayed
- ChartJS tooltip scrollbar to prevent data overflow?
- how to use chartJS to show breakdown of selected data
- Angular-ChartJs : Use a service inside a custom tooltip of a graphic chartJs
- 'require is not defined' error when attempting to use chartjs in javascript code
- Use Google Spreadsheet as data source for Chart.js
- Using data in HTML to display ChartJS Doughnut chart
- ChartJS - Display a single line data in tooltip
- Use multi data to draw chart with chartjs
- how do i use the numbers i key in from a form as the input data for chartjs
More Query from same tag
- ChartJS doughnut data toggle on custom button click
- Javascript and Chart.JS - issue with getting unique text in 3 donut hole charts - same text showing for all 3 donut holes
- Chart.js bar chart labels do not valign
- How to have onclick/hover display associated value in ChartJS
- Change Chartjs financial chart yaxis from left to right
- DiscordAPIError: Invalid Form Body embed.image.url: Scheme "[object response]" is not supported. Scheme must be one of ('http', 'https')
- Remove top horizontal line in a horizontal bar chart (Chart.js 2)
- How to fetch all data from API files and assign their values to chart?
- How to render data using chartjs in expressJS
- Error ReferenceError: CanvasGradient is not defined
- Chart.js Currency Tooltip
- TypeError Not reading property correctly
- How do I selecting a date range (like onClick but drag/select)
- How to add area with break on line chart with fill color
- how to add multi X axis custom line in chart js
- Have text displayed instead of numerical values on y axis
- Chart.js v2 formatting time labels
- Dynamically populate array with Firebase Data Vue.js
- Changing data when click button in chart.js
- How do I type string in the tooltip in Chart.js?
- Chart in other module
- Line chart Change background color of shaded region on hover (Chartjs)
- chartjs line graph points with different color
- angular-charts.js doesnt work with ionic
- Multiples values in yAxes with same xAxes
- How to customize chart js Bar chart shape?
- Chart point hover error
- Laravel & ChartJS
- Make labels of ChartJS radar in a few rows
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0