# Tooltip issue with chart.js

**URL:** <https://discourse.nodered.org/t/tooltip-issue-with-chart-js/43836>\
**Category:** Dashboard\
**Created:** [7 April 2021 22:38 UTC](https://discourse.nodered.org/t/tooltip-issue-with-chart-js/43836 "2021-04-07T22:38:29Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Shakey7](https://avatars.discourse-cdn.com/v4/letter/s/ba9def/32.png) [@Shakey7](https://discourse.nodered.org/u/Shakey7)\
**Post date:** [7 April 2021 22:38 UTC](https://discourse.nodered.org/t/tooltip-issue-with-chart-js/43836/1 "2021-04-07T22:38:29Z")

</div>

Hi guys,

working for hours on bubble chart with chart.js to find out how to show tooltip for each bubble.  
Simply I'd like to show the Id passed in the datasets array for each bubble  
or either to show it only if I pass the mouse over the bubble.

I mus be mad cause I didn't figure it out yet.  
I'd appreciate much a helping hand  
Thanks

Here is my code in a template node:

> ```auto
> <canvas id="carte" width="100" height="60" style="border:1px solid #000000;"></canvas>
> 
> <script>
> 
> ctx = document.getElementById("carte").getContext('2d');
> 
> monchart = new Chart(ctx, {
> 
> type: 'bubble',
>     
> data: {
>       
> labels: ['Gateway', 'Rssi', 'Distance'],
>       
> datasets: [
> { label: "Ancres BLE (Gateways)",
> backgroundColor : 'Blue',
> borderWidth : 4,
> borderColor : 'lightblue',
> hoverBackgroundColor: 'Blue',
> hoverBorderColor: 'Yellow',
> pointStyle : 'rect',
> data: [
> { x: 0, y: 0, r: 10 , id: "zt0mUM"},
> { x: 12.5, y: 3.6, r: 10 , id: "ztT1r7"},
> { x: -6, y: -3, r: 0.5, id: " null"},
> { x: 14, y: 7, r: 0.5, id: " null"}
> ],
> parsing: {
> xAxisKey: 'x',
> yAxisKey: 'y'
> }
> },
>         
> { label:["{{{payload.calcul_par_rssi.legend}}}"], 
> backgroundColor : 'LightGreen',
> borderColor : 'LightGreen',
> pointStyle : 'star',
> data: [{{{payload.calcul_par_rssi.data}}}],
> parsing: {
> xAxisKey: 'x',
> yAxisKey: 'y'
> }
> },
>         
> { label: ["{{{payload.calcul_par_distances.legend}}}"], 
> backgroundColor : 'Yellow',
> borderColor : 'Black',
> pointStyle : 'circle',
> data: [{{{payload.calcul_par_distances.data}}}],
> parsing: {
> xAxisKey: 'x',
> yAxisKey: 'y'
> }
> }
> ]
> },
>     
> options: {
>  
> animation : false,
>             
> legend: {
> display: true,
> position: 'bottom',
> labels: {
> fontColor: "Gray", 
> fontSize : 20
> }
> },
> 
> title: {
> display: true,
> text: "Localisation des Beacons BLE",
> fontSize : 30
> }, 
> 
> scales: {
> yAxes: [{ 
> scaleLabel: {
> display : true,
> labelString : "Axe Y (m)",
> fontSize : 15
> }
> }],
>                     
> xAxes: [{ 
> scaleLabel: {
> display : true,
> labelString : "Axe X (m)",
> fontSize : 15
> }
> }]
> },
>             
> interaction: {
> 
> },
>                         
> plugins: {
> tooltip: {
> enabled : true,
> bodyColor: 'blue',
> footerColor: 'blue',
> mode : 'nearest',
> axis : 'xy',
> callbacks: {
> label: function(context) {
> var label = context.dataset.label || '';
> if (label) {
> label += ': ';
> }
> label += context.parsed.id;
> return label;
> }
> }                
> }
> },
>             
> tooltips: {
> enabled: true,
> callbacks: {
> label: function(tooltipItem, data) {
> var dataset=data.datasets[tooltipItem.datasetIndex];
> return data.datasets[tooltipItem.datasetIndex].label+ ' : ' +dataset.data[tooltipItem.index];
> }
> }                
> }
> }
> });
> 
> </script>
> ```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [8 April 2021 05:36 UTC](https://discourse.nodered.org/t/tooltip-issue-with-chart-js/43836/2 "2021-04-08T05:36:21Z")

</div>

If you see browser console for errors it starts to reveal the issues one by one.  
Major problem is that named colors are not supported. Use HEX or RGB.

---

<div class="post-metadata">

**Author:** ![Shakey7](https://avatars.discourse-cdn.com/v4/letter/s/ba9def/32.png) [@Shakey7](https://discourse.nodered.org/u/Shakey7)\
**Post date:** [8 April 2021 07:10 UTC](https://discourse.nodered.org/t/tooltip-issue-with-chart-js/43836/3 "2021-04-08T07:10:30Z")

</div>

Many thanks for tour feedback  
that's ok now

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [8 May 2021 07:10 UTC](https://discourse.nodered.org/t/tooltip-issue-with-chart-js/43836/4 "2021-05-08T07:10:41Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.