score:5
Accepted answer
You could accomplish that using tooltip's callbacks function ...
var ctx = document.getElementById('chart-human');
var real_data = [
['1.85m', '100lbs', '120%'],
['1.95m', '90lbs', '150%']
];
var data = {
labels: ['Size', 'Weight', 'IPD'],
datasets: [{
label: 'Sam Smith',
data: [1.10, 0.95, 1.23],
backgroundColor: 'rgba(0,119,204,0.2)',
borderColor: 'rgba(0,119,204, 0.5)',
borderWidth: 1,
pointBackgroundColor: 'rgba(0, 0, 0, 0.4)'
}, {
label: 'John Doe',
data: [1.20, 0.85, 1.43],
backgroundColor: 'rgba(255, 0, 0, 0.15)',
borderColor: 'rgba(255, 0, 0, 0.45)',
borderWidth: 1,
pointBackgroundColor: 'rgba(0, 0, 0, 0.4)'
}, {
label: 'Average',
data: [1, 1, 1],
backgroundColor: 'rgba(0, 255, 0, 0.15)',
borderColor: 'rgba(0, 255, 0, 0.45)',
borderWidth: 1,
pointBackgroundColor: 'rgba(0, 0, 0, 0.4)'
}]
};
var options = {
tooltips: {
callbacks: {
title: function(t, d) {
let title = d.datasets[t[0].datasetIndex].label;
return title;
},
label: function(t, d) {
let title = d.datasets[t.datasetIndex].label;
let label = d.labels[t.index];
let value = (title != 'Average') ? real_data[t.datasetIndex][t.index] : d.datasets[t.datasetIndex].data[t.index];
return label + ': ' + value;
}
}
}
};
var chart = new Chart(ctx, {
type: 'radar',
data: data,
options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="chart-human"></canvas>
Source: stackoverflow.com
Related Query
- How can I have different values for the chart and the tooltip in chart.js?
- How do i have a single Chart.vue component instead of different chart components and then display charts from it by changing id of the API
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Chart js: how can I align the legend and the title
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- How to create a chart that uses strings for both the X and Y axes?
- How to draw outer labels for polar chart using ng2-charts and chart.js at fixed positions outside the rings?
- How can I display different values on xAxes than on tooltip Chart.js V3
- Chart is too big. How can I reduce size for the chart in vue js?
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
- How to set the xAxes min and max values of time cartesian chart in Chart.js
- how can i use chart.js to create a chart that has one time series line and one linear line on it at the same time?
- How to reuse a Chartjs Chart component in with different Data and get past the **Canvas is already in use** error?
- Chart.js How to sum the values in a pie chart and display them in the header
- How can I get my Chart.JS bar chart to stack two data values together on each bar, and print a calculated value on each bar?
- How to stop displaying the data values from different data objects on Chart JS 2.x?
- How can I reduce the spacing between my legend and chart proper in my Chart.JS bar chart, and increase it in the graph area?
- How to change the position of the tooltip for the Bar type chart in Chart.Js
- How do I use the return values from csv ajax request for x and y values?
- How Can customize chartjs doughnut chart border and tooltip
- Chart.js Version 3: how to set the different color for tick lines and gridlines
- How can i get the Chart JS Bar Graph Bar Label and Value on click?
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- How to add second Y-axis for Bar and Line chart in Chart.js?
- chart js tooltip how to control the data that show
- Can I specify a different font size for each row of text in Chart Title?
- How can I remove extra whitespace from the bottom of a line chart in chart.js?
- PrimeNg bar chart how to show a label for the y-axis
- How to get rid of the white square outline or border in the tooltip for chartjs?
- Chart,js Pie Chart can the gap between a pie chart and the legend be adjusted
More Query from same tag
- Chartsjs update datasets with dropdown
- How can I show JSON data in Chart.js with Javascript if static values are working but dynamic from mySQL are not?
- How to create Bar chart that gets updated from new ajax requests with ChartJS?
- Chart not rendering on ChartJS
- Chartjs - destroy() does nothing
- show multiple responsive chart in the same page using chart.js
- Pie Chart shows up only when I zoom in-out
- angular chartjs line chart default options
- Charts in Angular js with JSON Object
- Why is my chart.js not plotting correctly when changed to logarithmic?
- Chart.js how to show cursor pointer for labels & legends in line chart
- Can you set seperate colors for different axes in Chart.js?
- Need some Help Regarding Chart.js
- Chart js PHP and JSON wont diplsay
- How to set labels align left in Horizontal Bar using chart.js?
- Show all values in Chart js y axis
- How to update chart.js on websocket event?
- Programmatically creating labels for Chart.js in angular?
- Print chart in Chrome build by Chart jS using javascript
- Angular Overlapping bars using chart.js
- ChartJs title not showing
- How do we can use chart.js in angular JS?
- charts js, doughnut chart not rendering tooptips correctly
- chart.js - tooltip callback function ignore hidden datasets when deselecting legend
- How to introduce newline character in xAxes Label with chart js
- Chart.JS plugin, draw after animation
- Which scenarios might make Chart.js's canvas element resize?
- Chartjs v2 - format tooltip for multiple data sets (bar and line)
- date and time chart With Chart js
- Chart.js Line chart fixed tooltip