Tooltip issue with chart.js

Dashboard
1

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:

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

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.

3

Many thanks for tour feedback
that's ok now

4

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