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
- Bar chart.js legend showing "undefined"
- Chart.js Bar and Line chart
- Skip x labels on line chart
- Chart.js extra undefined column
- Failed to execute 'createLinearGradient' on 'CanvasRenderingContext2D': The provided double value is non-finite
- How can I create a vertical scrolling in Chart.js for line chart?
- ChartJS: Custom tooltip always displaying
- Chartjs average line over bars
- ChartJS - How to choose the visible datalabels
- ChartJS Tooltip Customization
- Want to multiple charts on same page with different data
- How to add a vertical line on Chart.js when hover a point?
- How to / Orientation to build a specific type of chart using library chart.js
- Chart.js - IndexSizeError: Index or size is negative or greater than the allowed amount
- How do I filter & update dates using react-chartjs-2
- Values above points - chart.js
- ChartJs shows the wrong labels
- Calculate value in tooltip in ChartJS
- How to put arguments in a jchart.Chart class
- ChartJS - How to provide datasets an array of objects
- charts.js chart size it's diferente than container setted size
- Chart.js how to resend animation command to a chart?
- ChartJS - remove axis?
- How to use PrimeNg Chart of Width and Height?
- Array data not rendering in data table using this.props - ReactJS
- Chart.js canvas rendered by ng-repeat does not show charts
- Get multiple boxes in background in ChartJs
- How to bind json array data to chart.js with same canvas id?
- Chart.js - data points get smaller after hover
- Can't change the default color and font size of labels in react-chartjs-2