score:1
good, although with the previous solution to solve the problem i think that the solution offered by chart.js is a bit ... confusing. the same can be applied in a more understandable way. based on the chart.js guide i have created an html that will be used in the tooltip. what i got was the following:
first i give you the code used and then i explain it:
tooltip: {
// disable the on-canvas tooltip
enabled: false,
external: (context) => {
// tooltip element
let tooltipel = document.getelementbyid('chartjs-tooltip');
// create element on first render
if (!tooltipel) {
tooltipel = document.createelement('div');
tooltipel.id = 'chartjs-tooltip';
tooltipel.innerhtml = '<table></table>';
document.body.appendchild(tooltipel);
}
// hide if no tooltip
const tooltipmodel = context.tooltip;
if (tooltipmodel.opacity === 0) {
tooltipel.style.opacity = '0';
return;
}
// set caret position (above, below,no-transform ).as i need above i don't delete that class
tooltipel.classlist.remove('below', 'no-transform');
// set html & data
if (tooltipmodel.body) {
const datafromcurrentelement = tooltipmodel.datapoints[0];
const currentelement = datafromcurrentelement.dataindex;
const formattedvalue = datafromcurrentelement.formattedvalue.trim();
const currentdatatoshow = formattedvalue.substr(1, formattedvalue.length - 2).split(' ');
const innerhtml = `
<div style="border-collapse: separate; overflow: hidden; border-radius: 10px; box-shadow: 0 6px 12px rgba(0,0,0,.175);">
<div style="background-color: #eceff1; padding-top: 5px; padding-bottom: 6px; padding-left: 7px; color: #000; font-family: 'poppins'; font-size: 14px; border-bottom: solid 1px #ddd">
name
</div>
<div style="display: flex; padding: 1.2rem; background-color: white">
<div style="display: flex; margin-right: 1.2rem;align-items: center; ">
<div style="border-radius: 100%; background-color: #6785c1; height: 13px; width: 13px;"></div>
</div>
<div style="display: flex; flex-direction: column; font-family: 'poppins'; font-size: 14px">
<div>revenue: <span style="font-weight: 600">${currentdatatoshow[0].substr(0, currentdatatoshow[0].length - 1)}</span></div>
<div>revenue per employee: <span style="font-weight: 600">${currentdatatoshow[1].substr(0, currentdatatoshow[1].length - 1)}</span></div>
<div>net income per employee: <span style="font-weight: 600">${this.customreportutilities.parsenumberfunction(number(currentdatatoshow[2]) * 100)}</span></div>
</div>
</div>
</div>
`;
tooltipel.queryselector('table').innerhtml = innerhtml;
}
const position = context.chart.canvas.getboundingclientrect();
// display, position, and set styles for font
tooltipel.style.opacity = '1';
tooltipel.style.position = 'absolute';
tooltipel.style.left = position.left + window.pagexoffset + tooltipmodel.caretx + 'px';
tooltipel.style.top = position.top + window.pageyoffset + tooltipmodel.carety + 'px';
tooltipel.style.padding = tooltipmodel.padding + 'px ' + tooltipmodel.padding + 'px';
tooltipel.style.pointerevents = 'none';
}
}
this is the same code, it is not necessary to duplicate it, with the above it is worth
we hide the tooltip from chartjs using tooltip false, then in external we pass the function to use our html as tooltip
let tooltipel = document.getelementbyid('chartjs-tooltip');
we collect the container with id chartjs-tooltip, if it does not exist (the mouse had not been placed on the graph) we create it (it is the following if).
let tooltipel = document.getelementbyid('chartjs-tooltip'); if (!tooltipel) { tooltipel = document.createelement('div'); tooltipel.id = 'chartjs-tooltip'; tooltipel.innerhtml = '<table></table>'; document.body.appendchild(tooltipel); }
we hide the tooltip when the user does not have the cursor over an element (this is because otherwise it would always be seen.
const tooltipmodel = context.tooltip; if (tooltipmodel.opacity === 0) { tooltipel.style.opacity = '0'; return; }
we indicate the position of the tooltip, to choose between above, below or no-transform. i have removed all but above because it is the class i want to keep.
tooltipel.classlist.remove('below', 'no-transform');
we get the data for the current element and form the html with its styles ... saving it in a variable as a string and we pass it our string with the html.
if (tooltipmodel.body) { const datafromcurrentelement = tooltipmodel.datapoints[0]; const currentelement = datafromcurrentelement.dataindex; const formattedvalue = datafromcurrentelement.formattedvalue.trim(); const currentdatatoshow = formattedvalue.substr(1, formattedvalue.length - 2).split(' '); const innerhtml = ` <div style="border-collapse: separate; overflow: hidden; border-radius: 10px; box-shadow: 0 6px 12px rgba(0,0,0,.175);"> <div style="background-color: #eceff1; padding-top: 5px; padding-bottom: 6px; padding-left: 7px; color: #000; font-family: 'poppins'; font-size: 14px; border-bottom: solid 1px #ddd"> name </div> <div style="display: flex; padding: 1.2rem; background-color: white"> <div style="display: flex; margin-right: 1.2rem;align-items: center; "> <div style="border-radius: 100%; background-color: #6785c1; height: 13px; width: 13px;"></div> </div> <div style="display: flex; flex-direction: column; font-family: 'poppins'; font-size: 14px"> <div>revenue: <span style="font-weight: 600">${currentdatatoshow[0].substr(0, currentdatatoshow[0].length - 1)}</span></div> <div>revenue per employee: <span style="font-weight: 600">${currentdatatoshow[1].substr(0, currentdatatoshow[1].length - 1)}</span></div> <div>net income per employee: <span style="font-weight: 600">${this.customreportutilities.parsenumberfunction(number(currentdatatoshow[2]) * 100)}</span></div> </div> </div> </div> `; tooltipel.queryselector('table').innerhtml = innerhtml; }
finally we finish configuring the container
const position = context.chart.canvas.getboundingclientrect();
// display, position, and set styles for font tooltipel.style.opacity = '1'; tooltipel.style.position = 'absolute'; tooltipel.style.left = position.left + window.pagexoffset + tooltipmodel.caretx + 'px'; tooltipel.style.top = position.top + window.pageyoffset + tooltipmodel.carety + 'px'; tooltipel.style.padding = tooltipmodel.padding + 'px ' + tooltipmodel.padding + 'px'; tooltipel.style.pointerevents = 'none';
i have had to use some additional styles as an overflow to make the border-radius show. chart.js documentation on the subject: https://www.chartjs.org/docs/latest/samples/tooltip/html.html
score:9
as of v2.4, the callbacks unfortunately don't allow for html currently. you'll need to write a custom tooltip function.
examples can be found in the samples folder for chart-js (although some are better than others i found).
https://github.com/chartjs/chart.js/tree/v2.4.0/samples/tooltips
try running the samples to get a feel for how the options and modifications affect the tooltip function.
for example in the line chart example of a custom function:
chart.defaults.global.pointhitdetectionradius = 1;
var customtooltips = function(tooltip) {
// tooltip element
var tooltipel = document.getelementbyid('chartjs-tooltip');
if (!tooltipel) {
tooltipel = document.createelement('div');
tooltipel.id = 'chartjs-tooltip';
tooltipel.innerhtml = "<table></table>"
document.body.appendchild(tooltipel);
}
// hide if no tooltip
if (tooltip.opacity === 0) {
tooltipel.style.opacity = 0;
return;
}
// set caret position
tooltipel.classlist.remove('above', 'below', 'no-transform');
if (tooltip.yalign) {
tooltipel.classlist.add(tooltip.yalign);
} else {
tooltipel.classlist.add('no-transform');
}
function getbody(bodyitem) {
return bodyitem.lines;
}
// set text
if (tooltip.body) {
var titlelines = tooltip.title || [];
var bodylines = tooltip.body.map(getbody);
//put custom html tooltip content here (innerhtml)
var innerhtml = '<thead>';
titlelines.foreach(function(title) {
innerhtml += '<tr><th>' + title + '</th></tr>';
});
innerhtml += '</thead><tbody>';
bodylines.foreach(function(body, i) {
var colors = tooltip.labelcolors[i];
var style = 'background:' + colors.backgroundcolor;
style += '; border-color:' + colors.bordercolor;
style += '; border-width: 2px';
var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
innerhtml += '<tr><td>' + span + body + '</td></tr>';
});
innerhtml += '</tbody>';
var tableroot = tooltipel.queryselector('table');
tableroot.innerhtml = innerhtml;
}
var position = this._chart.canvas.getboundingclientrect();
// display, position, and set styles for font
tooltipel.style.opacity = 1;
tooltipel.style.left = position.left + tooltip.caretx + 'px';
tooltipel.style.top = position.top + tooltip.carety + 'px';
tooltipel.style.fontfamily = tooltip._fontfamily;
tooltipel.style.fontsize = tooltip.fontsize;
tooltipel.style.fontstyle = tooltip._fontstyle;
tooltipel.style.padding = tooltip.ypadding + 'px ' + tooltip.xpadding + 'px';
};
then set this as the custom tooltip function in the options for the chart:
window.myline = new chart(chartel, {
type: 'line',
data: linechartdata,
options: {
title:{
display:true,
text:'chart.js line chart - custom tooltips'
},
tooltips: {
enabled: false,
mode: 'index',
position: 'nearest',
//set the name of the custom function here
custom: customtooltips
}
}
});
edit: apologies, i only read the title of your question, not the full question. what you ask can be done more simply and without html in the tooltips (unless it's required for another reason) by changing the interaction mode to index in the options. there's a sample available to show how this works.
Source: stackoverflow.com
Related Query
- Chart JS Show HTML in Tooltip
- show label in tooltip but not in x axis for chartjs line chart
- chart js tooltip how to control the data that show
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- ChartJS: Show all labels of a mixed chart in the tooltip
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Chart JS tooltip appears differently when set from script instead of html
- How to show tooltip value of all data falling on the same axis in chart js?
- ng2-Chart: can we show the tooltip data of pie chart on load?
- How to show tooltip only when data available in chart js?
- Always show doughnut Chart tooltip in Angular 5
- Is there any way to show a tooltip for points which are not visible on the chart in Chart.js?
- Chart tooltip should show the consolidated information of a single bar in double bar chart
- How to always show line chart tooltip in ionic-angular.?
- Getting the HTML code of a chart created by chart.js
- Chart JS 2.x: How to show a tooltip in a timeline chart?
- Chart.js Show labels on Pie chart
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- chart.js: Show labels outside pie chart
- Chart JS custom tooltip option?
- Chart.js how to show cursor pointer for labels & legends in line chart
- chart.js scatter chart - displaying label specific to point in tooltip
- Chart.js doughnut chart tooltip size?
- chartjs show dot point on hover over line chart
- ChartJS Line Graph - Multiple Lines, Show one Value on Tooltip
- ChartJS add tooltip to a grouped bar chart
- Html chart does not fit a small Android WebView
- How to show percentage (%) in chart js
- Show X axis on top and bottom in line chart rendered with Chart.js 2.4.0
- Adding Chart.js line chart to Jinja2/Flask html page from JS file
More Query from same tag
- chartjs-plugin-zoom not working on offline environment javascript .js
- How to use an Addon with ChartJS on Angular 4
- display various chart value and tool tip
- Grouped bar chart with label in Chart.js
- chartjs - multi axis line chart - cannot read property 'min' of undefined
- Chart.js - style legend: smaller circles
- Dynamic js chart display problems
- Django chartjs multiple charts stacked
- Chart.js custom tooltipTemplate index
- How can I re-distribute values within a charts.js pie chart when a legend item is turned off/on?
- Merge two objects with different keys in chartjs bar
- Why doesn't my donut chart, created with Chart.js, appear?
- How to skip x Axes labels in ChartJS
- Increase gap between line-chart and legend ChartJS
- Chart.js: Fixed horizontal location of vertical axis
- Chartjs display bug when pushing data to graph
- how to creat a dynamic datasets and new dynamic multi yAxes
- ChartJS Horizontal Bar is displaying backwards
- is there a way to change the dispaly of a date
- Updating chart.js with array index 0 doesn't work
- Chart.js with React
- How to use JSON data as chartjs data?
- how can i use chartjs-plugin-annotation?
- Automatic resize of chart - AngularChartJS
- Is there a way to change color of a chart's grid in y-axis - ng2-charts
- chartjs-plugin-datalabels not showing on stacked horizontal bar
- ChartJS: Chart not displaying full range of data
- Angular PrimeNG Chart Module: Customize hover text
- how can i modify scale labels in angular chart js?
- Pagination for Chart.js line chart?