Chartjs.org Displaying different data on Radar Chart tooltip
Question
For example, on the tooltip, I want to show the data for option1 not 2 but 200. Because we show adapted data in the graph. But it will be better to show the real data on the tooltip.
<script>
new Chart(document.getElementById('exampleChartjsRadar').getContext('2d'), {
type: 'radar',
data: {
labels: ["Option1", "Option2", "Option3"],
pointLabelFontSize: 14,
datasets: [{
label: 'Sporcu',
data: [2, 4, 5],
fill: true,
backgroundColor: 'rgba(4, 197, 249, 0.2)',
borderColor: 'rgb(4, 197, 249)',
pointBackgroundColor: 'rgb(4, 197, 249)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgb(4, 197, 249)'
}]
},
options: {
plugins: {
},
elements: {
line: {
borderWidth: 2
}
}
},
});
</script>
2 answers
solution1
0 2022-07-27 14:49:07
You can use the tooltip callback for this:
const options = { type: 'radar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderColor: 'pink' }] }, options: { plugins: { tooltip: { callbacks: { label: (ctx) => (`${ctx.dataset.label}: ${ctx.raw *100}`) } } } } } const ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);
<body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script> </body>
solution2
0 2022-07-28 14:40:16
Thanks for the answer, how can I use it if I want to write different values instead of multiplying by 100.
label: (ctx) => (`${ctx.dataset.label}: ${ctx.raw *100}`)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
displaying custom tooltip on chart points
ChartJS stacked bar chart not displaying as stacked
I want to multiple data tooltip with ChartJs
Using data in HTML to display ChartJS Doughnut chart
Trouble with setting up radar chart data on chart.js; issue with a loop
PHP Solution to Generate Radar Chart
High Charts Multiple Line Chart not displaying tooltip for multiple lines
Create Radar Chart with php values
Displaying chart data from a database
ChartJS not showing my MySQL data - Chart goes blank
Related Tags