I created a scatter chart by using charts.js in my Django project. It is working clearly but in the toolbox, the legends name does not show just number is displaying. How can I display it?
I want to display it as: Argentina(44015314.68,28)
my code:
var bubbleChart = document.getElementById('mybubbleChart').getContext('2d')
var myBubbleChart = new Chart(bubbleChart,{
type: 'scatter',
data: {
datasets:[{
label: name_1,
data:[{x:x_1,y:y_1}],
backgroundColor:"#716aca"
},{
label: name_2,
data:[{x:x_2,y:y_2}],
backgroundColor:"#d643ad"
},{
label: name_3,
data:[{x:x_3,y:y_3}],
backgroundColor:"#2ec3be"
},{
label: name_4,
data:[{x:x_4,y:y_4}],
backgroundColor:"#2ec34e"
}, {
label: name_5,
data:[{x:x_5,y:y_5}],
backgroundColor:"#decb3e"
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'bottom',
},
tooltip: { isHtml: false },
elements: {
point: {
radius: 10,
hoverRadius: 15,
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
},
}],
xAxes: [{
ticks: {
beginAtZero:true
},
}]
},
}
});
Advertisement
Answer
You can achieve this by using a custom callback to alter the text of the tooltip like so:
options: {
tooltips: {
callbacks: {
label: (tooltipItem, data) => (`${data.datasets[tooltipItem.datasetIndex].label}(${tooltipItem.xLabel},${tooltipItem.yLabel})`)
}
}
}
Working example:
var options = {
type: 'scatter',
data: {
datasets: [{
label: '# of Votes',
data: [{
x: 5,
y: 4
}, {
x: 2,
y: 7
}, {
x: 3,
y: 3
}, {
x: 3.5,
y: 5.5
}],
backgroundColor: 'red'
}]
},
options: {
tooltips: {
callbacks: {
label: (tooltipItem, data) => (`${data.datasets[tooltipItem.datasetIndex].label}(${tooltipItem.xLabel},${tooltipItem.yLabel})`)
}
}
}
}
var 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/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script> </body>