portalboy95
Reputation: 53
Display Labels with Charts.JS
I created a radar chart with chart.js, however, I am having issues displaying the real data of my data points. I used the chart.js label plugin but it is displaying the point where the data point has plotted. How would I get it so my real data along with the label be displayed instead of the point where it is plotted. Many thanks!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Apples</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
<script src="js/vendor/modernizr-3.8.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<center><h3>Apple Values</h3></center>
<canvas id="Apple"></canvas>
<script>
var ctx = document.getElementById('Apple');
var real_data = [
['133', '425', '222', '621', '151'],
];
var data = {
labels: ['X', 'Y','Z','N','A'],
datasets: [{
label: 'Apples',
data: [.41, .5, .33, .72, .64],
backgroundColor: 'rgba(101,81,255,0.2)',
borderColor: 'rgba(101,81,255,0.5)',
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>
</body>
</html>Upvotes: 0
Views: 754
Answers (1)
David Kabii
Reputation: 660
you can either use plugins to change the chart after it is drawn or controllers to change how the chart is drawn since there is no direct way to manipulate rendering of charts. These are the links:
https://www.chartjs.org/docs/latest/developers/plugins.html https://www.chartjs.org/docs/latest/developers/charts.html#extending-existing-chart-types
For your particular example, here is the code for using plugins, the easier of the two;
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Apples</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
<script src="js/vendor/modernizr-3.8.0.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.4.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<center><h3>Apple Values</h3></center>
<canvas id="Apple"></canvas>
<script>
var ctx = document.getElementById('Apple');
var real_data = [
['133', '425', '222', '621', '151'],
];
var data = {
labels: ['X', 'Y','Z','N','A'],
datasets: [{
label: 'Apples',
data: [.41, .5, .33, .72, .64],
backgroundColor: 'rgba(101,81,255,0.2)',
borderColor: 'rgba(101,81,255,0.5)',
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 plugins = [{
afterDatasetsDraw: function(chart) {
var real_data = ['133', '425', '222', '621', '151'];
var ctx = chart.ctx;
chart.data.datasets.forEach(function(dataset, index) {
var datasetMeta = chart.getDatasetMeta(index);
if (datasetMeta.hidden) return;
datasetMeta.data.forEach(function(point, index) {
var value = real_data[index],
x = point.getCenterPoint().x,
y = point.getCenterPoint().y,
radius = point._model.radius,
fontSize = 14,
fontFamily = 'Verdana',
fontColor = 'black',
fontStyle = 'normal';
ctx.save();
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.font = fontStyle + ' ' + fontSize + 'px' + ' ' + fontFamily;
ctx.fillStyle = fontColor;
ctx.fillText(value, x, y - radius - fontSize);
ctx.restore();
});
});
}
}]
var chart = new Chart(ctx, {
type: 'radar',
data: data,
options: options,
plugins: plugins
});
</script>
</body>
</html>
Upvotes: 1