J-T-McC/vue3-chartjs

Tooltip options not working

Jack2104 opened this issue · 2 comments

I'm trying to set tooltip options and use callbacks, and they aren't doing anything.

As you can see in the below code, I set the caret size to 0 pixels and also add a title callback. However, on my chart, the caret size stays normal and the callback is not run - "test" is not printed to the console, despite the console.log("test")

const chart = {
            id: 'chart',
            type: 'bubble',
            options: {
                maintainAspectRatio: false,
                tooltips: {
                    caretSize: 0,
                    callbacks: {
                        title: (tooltipItem, data) => {
                            console.log("test");

                            let dataPoint = data["datasets"][tooltipItem["datasetIndex"]][tooltipItem["dataIndex"]];

                            let satelliteAName = dataPoint["satelliteA"]["OBJECT_NAME"];
                            let satelliteBName = dataPoint["satelliteB"]["OBJECT_NAME"];

                            return satelliteAName + " and " + satelliteBName;
                        },
                        label: (tooltipItem, data) => {},
                        afterLabel: (tooltipItem, data) => {},
                    },

                }
            },
            data: {
                datasets: [
                    {
                        label: 'Velocity < x',
                        data: conjunctionData,
                        backgroundColor: 'rgb(255, 99, 132)'
                    }
                ]
            }
        }

Does anyone know what might be happening?

Tooltip configs are under the options.plugins key in ChartJS 3. https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-configuration

Example:

options: {
        plugins: {
          tooltip: {
            enabled: true,
            callbacks: {
              title() {
                return 'WOOOOOOOOOOOOOOOO'
              }
            }
          }
        }
      }

image

@J-T-McC thanks for your help!