score:2
a solution for chartjs 2.0. we can provide a function to build a html tooltip.
here are some examples of using custom tooltips.
we turn off canvas tooltips.
enabled: false
we use the tooltips opacity state to show or hide our custom tooltip. the state is updated when a hover
event is triggered.
our tooltiptitlecallback
and tooltiplabelcallback
functions will need to be modified depending on the parameters we're passing in. in this example, we're using the tooltip's datapoints
property in our tooltiptitlecallback
function. the items which are available in the data property is determined by the interaction mode used.
here are some other properties in the tooltip model.
to prevent the tooltip from going over the right hand side of the screen, we set the right
position property instead of the left
.
working example
const ctx = document.getelementbyid("mychart").getcontext("2d");
const customtooltip = {
mode: "index",
enabled: false,
custom: function(model) {
const tooltip = document.getelementbyid("tooltip");
if (model.opacity === 0) {
tooltip.style.opacity = 0;
return;
}
if (model.body) {
const title = "<strong>" + tooltiptitlecallback(model.datapoints) + "</strong>";
const label =
"lorem ipsum dolor sit amet, consectetur adipiscing elit. duis pellentesque eros non massa consequat, ac. lorem ipsum dolor sit amet, consectetur adipiscing elit. duis pellentesque eros non massa consequat, ac. lorem ipsum dolor sit amet, consectetur adipiscing elit. duis pellentesque eros non massa consequat, ac.";
tooltip.innerhtml = title + "<br />" + label;
tooltip.style.left = "auto";
tooltip.style.right = "auto";
const pos = this._chart.canvas.getboundingclientrect();
if (model.xalign === "left") {
tooltip.style.left = pos.left + model.caretx + "px";
} else {
tooltip.style.right = pos.right - model.caretx + "px";
}
tooltip.style.top = -50 + pos.top + model.carety + "px";
tooltip.style.opacity = 1;
}
}
};
const mychart = new chart(ctx, {
type: "line",
data: {
labels: ["january", "february", "march", "april", "may", "june", "july"],
datasets: [{
label: "my first dataset",
backgroundcolor: "rgb(255, 99, 132)",
bordercolor: "rgb(255, 99, 132)",
data: [0, 10, 5, 2, 20, 30, 45],
fill: false
}]
},
options: {
tooltips: customtooltip
}
});
function tooltiptitlecallback(items) {
if (items.length > 0) {
const item = items[0];
if (item.label) {
return item.label;
}
return "no title";
}
}
#tooltip {
opacity: 0;
position: absolute;
background: rgba(0, 0, 0, 0.7);
color: white;
border-radius: 3px;
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
pointer-events: none;
padding: 4px;
margin: 15px;
font-family: 'helvetica neue', 'helvetica', 'arial', sans-serif;
font-size: 13px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.4/chart.min.js"></script>
<canvas id="mychart" width="400" height="200"></canvas>
<div id="tooltip"></div>
Source: stackoverflow.com
Related Query
- How can I automatically wrap tooltip text content to multiple lines?
- How can I make two of my lines in Chart JS thicker
- How to modify chartjs tooltip so i can add customized strings in tooltips
- How can I hide tooltip in Chart.js on a specific data label?
- How to wrap legend text in Chartjs?
- How can I add some text in the middle of a half doughnut chart in Chart.JS?
- How can I display different values on xAxes than on tooltip Chart.js V3
- ChartJS / Chartjs-plugin-annotation How to draw multiple vertical lines using an array?
- ChartJS v2 - Keep tooltip open when user click on a point of a multiple lines chart
- How can I load multiple Chartjs charts with different data on the same page?
- How to append text or symbol to tooltip of chart.js
- How can I have different values for the chart and the tooltip in chart.js?
- How to make tool tip contents display on multiple lines
- How to display multiple y axis titles on seperate lines and rotated 90 degrees clockwise in chart.js
- How can I keep the vertical lines under the horizontal ruler line is chartjs?
- How can I merge multiple HTTP calls to one entity model in Angular
- How can I make small grid lines above ChartJS labels?
- ChartJS tooltip when having multiple lines on a time graph
- How can I hide legend text if it's zero?
- how can i remove the grid lines in chartJs
- How to render tooltip text on a different div with Chart.JS
- How can I set a class to a HTML element which is created by custom tooltip function?
- How can I give the automatically generated y-axis values on bar charts in Chart.JS commas?
- How can I get chart.js to automatically add colours for dynamic labels?
- how can I render multiple charts in chartjs?
- How can i display multiple years of data from 1 project in Chart.js?
- How can I get the label onclick event by multiple graphs?
- Charts.js - How to set custom tooltip text for each dataset
- How to can I get text inside a chats.js circular chart
- How can i add multiple dataset in chart.js package in Laravel
More Query from same tag
- How can I set the yAxis scale for the chart?
- chart.js scale xaxis with date, strange renderer
- Chart.js don't work when I open my app as a stand alone app in Chrome
- how can i use inline plugin inner title for chart js?
- Merge Jquery Knob Functionality in Chart Js
- How scale sector in doughnut chartjs on hover?
- Background color hides Y labels
- Change Angular js charts.js chart type dynamically
- load a graph with chart.js and react
- How to change color by clicking on the chart bar?
- ChartJS: how to change data in hover box?
- Generate bar chart using chart.js and associative array
- Chart js custom single tooltip not working
- Chart.js Currency Tooltip
- Export Canvas Charts to png and pdf
- How to add "shadow" on hovering bar chart?
- Skip decimal points on y-axis in chartJS
- Chart.js: How to calculate the labelOffset based on the distance between ticks?
- Chart.js separation lines
- Is there a way to give a pie chart in chart.js a different color outer border than the border color between segments?
- How can i implement RTL for Yaxis in Chartjs
- Angular 5, Chart.js displaying multiple charts, one on each tab
- Add mouseout event handler to legends in Chart.js
- Chart.js Bar and Line chart
- Chart.js is not rendered until zoom in in angular 8
- Chart.js drag points on linear chart
- How to filter hover on a chart in ChartJS?
- why does my chart.js barograph order by whole numbers and then floats?
- Using Different Colors In a Chart
- Piechart doesn't show up in Canvas