score:1
Accepted answer
you can define a set of tooltip callback functions to obtain the desired result. this could look as follows:
tooltips: {
callbacks: {
title: (tooltipitems, data) => data.labels[tooltipitems[0].index],
label: (tooltipitems, data) => 'count: ' + data.datasets[0].data[tooltipitems.index],
footer: (tooltipitems, data) => ['', 'infos:'].concat(data.datasets[0].info[tooltipitems[0].index])
}
}
note that in the
footer
callback, i return text that i defined in an array namedinfo
defined inside thedata
object.
datasets: [{
...
info: [
['this is the description', 'for web-based search ...'],
['this is the description', 'for interviews ...']
]
}]
please have a look at your amended code below:
<html lang="en">
<head>
<meta charset="utf-8">
<title>project overview</title>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.1/chart.bundle.js"></script>
<!-- load plotly.js into the dom -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<div class="container">
<div class="row my-3">
<div class="col">
<p class="sansserif">
<h3>project overview</h3>
</p>
</div>
</div>
<div class="row py-2">
<div class="col-md-4 py-1">
<div class="card" style="width: 33rem;">
<div class="card-body">
<canvas id="chdonut1"></canvas>
</div>
</div>
</div>
<script>
/* chart.js chart examples */
chart.pluginservice.register({
beforedraw: function(chart) {
var width = chart.chart.width,
height = chart.chart.height,
ctx = chart.chart.ctx;
ctx.restore();
var fontsize = (height / 124).tofixed(2);
ctx.font = fontsize + "em sans-serif";
ctx.textbaseline = "middle";
var text = "";
switch (chart.chart.canvas.id) {
case "chdonut1":
text = "method";
break;
}
var textx = math.round((width - ctx.measuretext(text).width) / 2),
texty = height / 2;
ctx.filltext(text, textx, texty);
ctx.save();
}
});
// chart colors
var colors = ['#007bff', '#28a745', '#333333', '#c3e6cb', '#dc3545', '#6c757d'];
var donutoptions = {
cutoutpercentage: 85,
legend: {
position: 'bottom',
padding: 5,
labels: {
pointstyle: 'circle',
usepointstyle: true
}
},
tooltips: {
callbacks: {
title: (tooltipitems, data) => data.labels[tooltipitems[0].index],
label: (tooltipitems, data) => 'count: ' + data.datasets[0].data[tooltipitems.index],
footer: (tooltipitems, data) => ['', 'infos:'].concat(data.datasets[0].info[tooltipitems[0].index])
}
}
};
// donut 1
var chdonutdata1 = {
labels: ['web-based search', 'interviews'],
datasets: [{
backgroundcolor: colors.slice(0, 2),
borderwidth: 0,
data: [75, 25],
info: [
['this is the description', 'for web-based search ...'],
['this is the description', 'for interviews ...']
]
}]
};
var chdonut1 = document.getelementbyid("chdonut1");
if (chdonut1) {
new chart(chdonut1, {
type: 'pie',
data: chdonutdata1,
options: donutoptions
});
}
</script>
</html>
Source: stackoverflow.com
Related Query
- JavaScript Chart.JS - Custom tooltips to add description of specific data point when hovering
- How can I create custom tooltips for each data point in a graph?
- Using chart js version 3, how to add custom data to external tooltip?
- JavaScript Chart.js - Custom data formatting to display on tooltip
- line chart with {x, y} point data displays only 2 values
- chart.js scatter chart - displaying label specific to point in tooltip
- Is it possible to add a custom font to chart js?
- How to add datas to chart js from javascript array itself?
- Add all data in the tooltip of Chart JS
- ChartJS: Draw vertical line at data point on chart on mouseover
- How to add an empty data point to a linechart on Chart.js?
- Chart.JS: How to add Data to a specific dataset
- How do you add custom text to tooltips in charts.js
- Chart JS: Ignoring x values and putting point data on first available labels
- Populating javascript chart with Razor model data
- Add a custom label to the top or bottom of a stacked bar chart
- Change size of a specific point on a line chart in Chart.js
- How to add a horizontal line at a specific point in chart.js when hovering?
- Custom data in label on ChartJS pie chart
- How to draw a needle on a custom donut chart and add datapoints to the needle?
- Custom data position on the doughnut chart in chart.js
- Add a text as tooltip for each point on a line chart
- Chart.js - bind data in dataset to specific chart labels
- Add data to line chart using chart.js
- Chart Js Data transformation using Javascript
- Chart JS pass in custom data for points
- add editable textbox to specific datapoint in a chart
- How can I add a euro sign (€) to all tooltips in my chart js line chart
- How to add new data point and remove leftmost data point dynamically in Chartjs
- Add custom data scale to Chart.js
More Query from same tag
- Why don't my datasets show up on line graph using Chart.js?
- How to handle data API from Django Rest Framework in Chart.js
- How to reformat tooltip in Chart.js?
- How to specify hover color angular-chart.js
- Calling chart JS with PHP Data (file structure)
- ChartJS dynamic line chart ghosting back to old data when hovered on
- Add text before time in tooltip
- How to rewrite JavaScript currency formatting to abbreviate dollar amount
- Align Title Left React Chart.js V2
- How can I show Bootstrap modal when on click in individual bars in chart.js
- ng2-charts - bar chart, showing only one color
- Issue While Passing Dynamic Datas in React Chart Js 2
- ChartJS - Moving vertical line is display on top of tooltip
- Create a line chart using an user input table from a data table in chart.js
- How do you set x and y axis and Title for a line chart using charts.js?
- Chart.js in flex element overflows instead of shrinking
- ChartJS Custom text on certain xAxis and yAxis linesS
- how to add a background that display "no data" on Canvas using ChartJS?
- How to draw x axis and y-axis origin line draw in ng2-google-charts?
- create different labels for different data chart js
- Bar charts not getting displayed correctly when bar is below zero (chart.js)
- chartjs: need color bars near yAxis scale
- Chartjs - destroy() does nothing
- Using number/text input field to set the data values in ChartJs stops the chart from being displayed
- Creating a Reusable Chartjs Function
- charts.js global options gridLines
- How to add vertical line in bar chart using chartJs and ng2-charts?
- Vue watch not noticing changes on component prop
- Chart.js and Angular 8 - Dynamically updating Chart.js labels and data from *ngfor
- How can I set the category height of a horizontalBar chart?