score:0
first add this in html
<canvas id="mychart" width="400" height="200"></canvas>
<div id="chartjs-tooltip"></div>
:js
var data = {
labels: ["january", "february", "march", "april", "may", "june", "july"],
datasets: [{
label: "my first dataset",
fillcolor: "rgba(220,220,220,0.2)",
strokecolor: "rgba(220,220,220,1)",
pointcolor: "rgba(220,220,220,1)",
pointstrokecolor: "#fff",
pointhighlightfill: "#fff",
pointhighlightstroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}]
};
var mylinechart = new chart(ctx).line(data, {
customtooltips: function (tooltip) {
var tooltipel = $('#chartjs-tooltip');
if (!tooltip) {
tooltipel.css({
opacity: 0
});
return;
}
tooltipel.removeclass('above below');
tooltipel.addclass(tooltip.yalign);
// split out the label and value and make your own tooltip here
var parts = tooltip.text.split(":");
var innerhtml = '<span>' + parts[0].trim() + '</span> : <span><b>' + parts[1].trim() + '</b></span>';
tooltipel.html(innerhtml);
tooltipel.css({
opacity: 1,
left: tooltip.chart.canvas.offsetleft + tooltip.x + 'px',
top: tooltip.chart.canvas.offsettop + tooltip.y + 'px',
fontfamily: tooltip.fontfamily,
fontsize: tooltip.fontsize,
fontstyle: tooltip.fontstyle,
});
}
});
and some styling stuff
:css
#chartjs-tooltip {
opacity: 0;
position: absolute;
background: rgba(0, 0, 0, .7);
color: white;
padding: 3px;
border-radius: 3px;
-webkit-transition: all .1s ease;
transition: all .1s ease;
pointer-events: none;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
score:0
(note that chart.js already adds tooltip text automatically; the question above is a bit unclear. what the question is about is how to add custom text to the tooltip, rather than just the defaults that it picks - the x and y values of the given point.)
use the callbacks
field in options.tooltips
. note that the body of the tooltip is referred to as the "label".
tooltips: {
intersect: false, // makes it easier to select tooltips on mobile
callbacks: {
title: (tooltipitem, data) => {
let title = tooltipitem[0].x; // uses the x value of this point as the title
return title;
},
label: (tooltipitem, data) => {
let labels = data[tooltipitem.index!].labeltext; // assumes your data has a `labeltext` field.
return labels;
},
},
},
note that some fields, like title
, are passed an array of tooltipitem
objects in their callback; others, like label
, are passed a single object. hence, properties of the tooltipitem
object must be accessed differently for each.
- callback documentation: http://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-callbacks
- properties you can access on the
tooltipitem
object - https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-item-interface - some official examples: https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback
- how to wrap long label lines? one way or the other, split up your labels into an array, and return that; each line in the array will be on a separate line. if the lines are still too long, you'll need to use a function to detect long lines and split them into additional array items.
Source: stackoverflow.com
Related Query
- How do you add custom text to tooltips in charts.js
- How to add custom tooltips to only one label in Chart.js?
- How to add custom text inside the bar and how to reduce the step size in y axis in chart js( Bar chart )
- How to add text inside the doughnut chart using Chart.js?
- How to modify chartjs tooltip so i can add customized strings in tooltips
- How to add tooltips to chart.js graph
- How to add images as labels to Canvas Charts using chart.js
- How to add text in centre of the doughnut chart using Chart.js?
- How to add text at end of each line in charts.js
- Chart.js - How to Add Text in the Middle of the Chart?
- How can I add some text in the middle of a half doughnut chart in Chart.JS?
- How to add ChartJS code in Html2Pdf to view image
- How to draw a needle on a custom donut chart and add datapoints to the needle?
- How can I create custom tooltips for each data point in a graph?
- How to add multiple background color in line charts
- Using chart js version 3, how to add custom data to external tooltip?
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- How to navigate tooltips popup by clicking custom buttons outside Chart.js v2 canvas?
- How can I add a euro sign (€) to all tooltips in my chart js line chart
- How to add text inside the doughnut chart using Chart.js version 3.2.1
- chart.js v2: how to add tooltips of metadata?
- how can i add value on bar in the charts in chart.js vs 3.x
- how to add Thousand separator in pie chart tooltips of charts.js
- How to add text inside the doughnut chart using Chart.js AngularJS 2.0?
- How to add left padding for my charts done in ChartJs and my Google Map so it is not glued to the limit of the page on the left
- ChartJS - How to add Text between Pie Chart and Legend
- JavaScript Chart.JS - Custom tooltips to add description of specific data point when hovering
- How to make custom text appear underneath each bar in chartjs bar chart?
- Charts.js - How to set custom tooltip text for each dataset
- Chartjs: How do you toggle the visibility of charts in Ionic 4
More Query from same tag
- json_encode returns "
- chart js data-point between bar charts
- How to Draw a line on chart without a plot point using chart.js
- Order the Time Units on Y-axis + Chart Js
- chart js -data on chart in rotated form
- Make Line Chart Dynamic From JSON File Using Chartjs
- ChartJS: Remove padding to the right of chart caused by tick labels
- Angular-Chart.js it doesn't display the chart
- Chart.js sync legend toggle on multiple charts
- Angular and ChartJS to create bar chart
- Chart.JS To Not Start At 0
- Change `font-family` in Angular Chart.js
- Label issue in doughnut chart using chartjs
- calling a function for fontSize in Doughnut Chart (typescript)
- How to loop tooptip additional data in chart.js
- Why Primefaces donutChart is not working?
- How to convert (convas chart) to either (Chart , or system.drawing.image , or stream , or []byte ) where I can use it in c# to generate pdf
- Change Radius/Point size of Legend Points in chart.js when usePointStyle is true
- How to trigger ChartJS legend onClick with out interrupting its normal working
- Removing ChartJS 2 border and shadow from point style legend
- React - how to get array from store before first render and use it as dataset for ChartJS
- Problem creating scatter graph using chart.js
- Can't apply options of datalabels chartjs plugin in Vue
- Iterate over query for use in Charts.js using Coldfusion
- chartjs mixed type display want to set display none for some bar
- Print chart in Chrome build by Chart jS using javascript
- Pagination for Chart.js line chart?
- How to customize the tooltip of a Chart.js Line Chart?
- Could not find elementById on mat-card-content
- Chartjs does not show annotations when x axis is of type time