How to display legend in toolbox in Charts.js?

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
                        },
                    }]
                },
            }
        });

JavaScript
​x
 
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
                        },
                    }]
                },
            }
        });
​

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})`)
      }
    }
  }

JavaScript
 
  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);

JavaScript
 
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>

JavaScript
 
<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>

Advertisement

Answer