score:26
Accepted answer
you can achieve this using the following tooltips label callback function ...
tooltips: {
callbacks: {
label: function(tooltipitem, data) {
var label = data.labels[tooltipitem.index];
return label + ': (' + tooltipitem.xlabel + ', ' + tooltipitem.ylabel + ')';
}
}
}
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ
var ctx = document.getelementbyid('mychart').getcontext('2d');
var scatterchart = new chart(ctx, {
type: 'scatter',
data: {
labels: ["label 1", "label 2", "label 3"],
datasets: [{
label: 'legend',
data: [{
x: -10,
y: 0,
}, {
x: 0,
y: 10
}, {
x: 10,
y: 5
}]
}]
},
options: {
tooltips: {
callbacks: {
label: function(tooltipitem, data) {
var label = data.labels[tooltipitem.index];
return label + ': (' + tooltipitem.xlabel + ', ' + tooltipitem.ylabel + ')';
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.6.0/chart.min.js"></script>
<canvas id="mychart" style="height:1000px"></canvas>
score:5
for multiple labels grunt 's answer needs to be modified to use tooltipitem.datasetindex instead of tooltipitem.index:
options: {
tooltips: {
callbacks: {
label: function(tooltipitem, data) {
var label = data.labels[tooltipitem.datasetindex];
return label + ': (' + tooltipitem.xlabel + ', ' + tooltipitem.ylabel + ')';
}
}
} }
score:7
as of chart.js version 3, callbacks are handled a little differently. here is a working example with 3.2.0. relevant docs: https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback
ctx = document.getelementbyid("mychart").getcontext("2d");
let data = {
datasets: [{
label: "legend",
labels: ["label 1", "label 2", "label 3"],
data: [{
x: -10,
y: 0,
}, {
x: 0,
y: 10
}, {
x: 10,
y: 5
}],
backgroundcolor: "rgb(255, 99, 132)"
}]
}
let options = {
plugins: {
tooltip: {
callbacks: {
label: function(ctx) {
// console.log(ctx);
let label = ctx.dataset.labels[ctx.dataindex];
label += " (" + ctx.parsed.x + ", " + ctx.parsed.y + ")";
return label;
}
}
}
}
}
scatterchart = new chart(ctx, {
type: "scatter",
data: data,
options: options
});
<canvas id="mychart" height="500"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.2.0/chart.min.js"></script>
Source: stackoverflow.com
Related Query
- chart.js scatter chart - displaying label specific to point in tooltip
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- show label in tooltip but not in x axis for chartjs line chart
- Chart.js line chart tooltip shows wrong label when line doesn't start at first label
- Change size of a specific point on a line chart in Chart.js
- Add a text as tooltip for each point on a line chart
- Chart.js tooltip at any point on the chart
- ChartJS v2 - Keep tooltip open when user click on a point of a multiple lines chart
- Chart.js: adding a custom label to each item, and displaying it with a custom tooltip
- chartjs-plugin-error-bars display error-bars without displaying label on a horizontalBar chart
- Chart with Time axis only displaying first grid line and tick label (unitStepSize)
- Chartjs Radar chart - How to dynamically highlight one of the gridlines at a specific point
- Charts JS: Doughnut chart and hiding tooltip for specific data index within each dataset
- Chart js scatter - display label on hover
- I want to add label on only specific vue chart
- Chartjs: get the label title on the radar's chart tooltip
- Show label for every data point in line chart
- Convert date label on Y-axis Line Chart to specific date format
- Chart JS tooltip label not showing correct value
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- Chart JS tooltip and label width is zeroed
- Tooltips displaying "rgb(0,0,0)" instead of label value on bar chart
- How can I hide point label in chart Js?
- Chartjs pie chart tooltip mode label
- Chart.js V2: Add prefix or suffix to tooltip label
- Chart Js Change Label orientation on x-Axis for Line Charts
- How to remove square label from tooltip and make its information in one line?
- How to disable a tooltip for a specific dataset in ChartJS
- ChartJS - Draw chart with label by month, data by day
- Chart JS custom tooltip option?
More Query from same tag
- Showing border for columns in barchart of chart js on hover?
- Generate bar chart using chart.js and associative array
- Charts.js (2.9.4) Gridlines not displaying under Line Graph
- Using Chart.js in functional React component, not allowing me to toggle data: "properties undefined"
- Uncaught type error: mychart.update is not a function
- How to adjust Chart.js height according to datasets size. Ionic 3
- How to push Firestore data to ChartJS?
- How to remove paddings in Bar chart? (Chart.JS)
- Hovering over chart.js values in Meteor onRendered function causes chart axis shift
- Exponential decrease
- Adding a second custom tooltip for charts in ChartsJs
- How to add gradient background to Line Chart [vue-chart.js]
- chart.js data wont update
- Is it possible to change pointStyle for elements of a ChartJS bubble chart per dataset?
- ChartJS: create linear x-axis on bar chart
- Chartjs columns does not appear by value
- How to export a chart in Excel and PDF format using Chart.js
- Chart.js only appears randomly, and disappears on page refresh
- Can Chart.js combines Line Chart and Bar Chart in one canvas
- How to get dataset from MySQL using Flask?
- use ng2-charts with a loader and AfterViewInit
- ChartJs - set background color of the space between ticks
- chart.js add second line in a Line chart that starts from end of first line
- I want to hide the line as shown below
- How to remove the inside-border from doughnut chart? Chart.js
- Image-Chart ChartJs Ticks Callback not Working?
- Cannot find centroid of path
- what are the differences between 'NgChartModule' and 'chartModues'?
- Specify varying thickness of each bar in Chart.js bar chart
- what is `dart.js` in chartjs.dart example