Possible with a tooltip for labels? #748

martinhschei · 2018-04-19T14:03:48Z

martinhschei
Apr 19, 2018

I have a line chart with vertical annotations and a label on top.

I would have been great to have a tooltip on this label, i have looked around, but i have not found that this feature is included in this plugin. Is this correct, is it not possible for the moment with tooltips for annotation labels?

matthewhegarty · 2018-10-22T18:12:00Z

matthewhegarty
Oct 22, 2018

The only workaround I can think of for this is to use the onMouseover event to set the content of an external div:

onMouseover: function (e) {
  document.getElementById("info").innerHTML = 'whatever';
},

Maybe there is a better way?

0 replies

Djones4822 · 2021-08-07T02:34:43Z

Djones4822
Aug 7, 2021

We ended up implementing something that worked with Charjs3.5 and the most recent annotation version 1.0.2 (as of 8/6/2021). The jist is that we create the annotation object and attach it to the window, within that we have a enter and leave callback which calls a helper function to toggle the label for the given annotation - we connect them by refering to the annotation ID. For that, we pass the context along, within which we can access the annotation ID.

Below is a full working sample, see the window.onload for creating the annotation, and then toggleAnnotation() function for showing/hiding the annotation. Finally, within our draw() function is the assignment of the window.annotation object to the actual annotation definition within the chart context.

A full working sample is:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.0.2/chartjs-plugin-annotation.min.js"> </script>
<style>
    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
</style>

<body>
    <div style="width:80%">
        <div>
            <canvas id="canvas"></canvas>
        </div>
        <div><button type='button' , onclick='draw()'>Re-draw</button></div>
    </div>
    <script>
        const randomScalingFactor = function () {
            return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
        };
        const randomColor = function (opacity) {
            return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
        };

        const scatterChartData = {
            datasets: [{
                label: 'My First dataset',
                data: [{
                    x: randomScalingFactor(),
                    y: randomScalingFactor(),
                }, {
                    x: randomScalingFactor(),
                    y: randomScalingFactor(),
                }, {
                    x: randomScalingFactor(),
                    y: randomScalingFactor(),
                }, {
                    x: randomScalingFactor(),
                    y: randomScalingFactor(),
                }, {
                    x: randomScalingFactor(),
                    y: randomScalingFactor(),
                }, {
                    x: randomScalingFactor(),
                    y: randomScalingFactor(),
                }, {
                    x: randomScalingFactor(),
                    y: randomScalingFactor(),
                }]
            }, {
                label: 'My Second dataset',
                data: [{
                    x: randomScalingFactor(),
                    y: randomScalingFactor(),
                }, {
                    x: randomScalingFactor(),
                    y: randomScalingFactor(),
                }, {
                    x: randomScalingFactor(),
                    y: randomScalingFactor(),
                }, {
                    x: randomScalingFactor(),
                    y: randomScalingFactor(),
                }, {
                    x: randomScalingFactor(),
                    y: randomScalingFactor(),
                }, {
                    x: randomScalingFactor(),
                    y: randomScalingFactor(),
                }, {
                    x: randomScalingFactor(),
                    y: randomScalingFactor(),
                }]
            }]
        };

        scatterChartData.datasets.forEach((dataset) => {
            dataset.borderColor = randomColor(0.4);
            dataset.backgroundColor = randomColor(0.1);
            dataset.pointBorderColor = randomColor(0.7);
            dataset.pointBackgroundColor = randomColor(0.5);
            dataset.pointBorderWidth = 1;
        });

        window.onload = function () {
            window.annotations = {
                24321: {
                    type: 'line',
                    scaleID: 'x',
                    value: -25,
                    borderColor: 'black',
                    borderWidth: 3,
                    label: {
                        position: 'start',
                        content: ['Annotation 1', 'xx, xxxx'],
                        enabled: false
                    },
                    enter(context) {
                        // The annotation is is bound to the `this` variable
                        toggleAnnotation1(context);
                    },
                    leave(context) {
                        // The annotation is is bound to the `this` variable
                        toggleAnnotation1(context);
                    }
                },
                24322: {
                    type: 'line',
                    scaleID: 'x',
                    value: 25,
                    borderColor: 'black',
                    borderWidth: 3,
                    label: {
                        position: 'start',
                        content: ['Annotation 2', 'xx, xxxx'],
                        enabled: false
                    },
                    enter(context) {
                        // The annotation is is bound to the `this` variable
                        toggleAnnotation(context);
                    },
                    leave(context) {
                        // The annotation is is bound to the `this` variable
                        toggleAnnotation(context);
                    }
                }
            }
            draw();
        };

        function toggleAnnotation(context) {
            var ele_id = context.element.options.id;
            var val = window.annotations[ele_id].label.enabled;
            if (val) {
                window.annotations[ele_id].label.enabled = false;
            } else {
                window.annotations[ele_id].label.enabled = true;
            }
            window.myScatter.update();
        }

        function draw() {
            var canvas = document.getElementById('canvas')
            const ctx = canvas.getContext('2d');

            if (canvas.classList.contains('update')) {
                window.myScatter.destroy();
            } else {
                canvas.classList.add("update");
            }

            window.myScatter = new Chart(ctx, {
                type: 'scatter',
                data: scatterChartData,
                options: {
                    animation: false,
                    title: {
                        display: true,
                        text: 'Chart.js Scatter Chart'
                    },
                    legend: {
                        display: false
                    },
                    scales: {
                        x: {
                            position: 'top',
                            grid: {
                                zeroLineColor: 'rgba(0,255,0,1)'
                            },
                            title: {
                                display: true,
                                text: 'x axis'
                            },
                            ticks: {
                                maxRotation: 0,
                                reverse: true,
                                // min: -100,
                                // max: 0
                            }
                        },
                        y: {
                            position: 'right',
                            grid: {
                                zeroLineColor: 'rgba(0,255,0,1)'
                            },
                            title: {
                                display: true,
                                text: 'y axis'
                            },
                            ticks: {
                                reverse: true,
                                // min: -100,
                                // max: 0
                            }
                        }
                    },
                    plugins: {
                        annotation: {
                            annotations: window.annotations
                        }
                    }

                }
            });
        }
    </script>
</body>

I hope this is helpful, not sure I'll stay on top of more recent releases in either package, but I'm willing to help if I can for anyone struggling. Keep in mind, annotation boxes don't work with labels, so this can't work there. Haven't tried ellipses and points, though.

lastly, my apologies if some of the js is not syntactically correct, I've adapted this from our production code which was not github-ready.

0 replies

axeldvp · 2021-09-21T14:33:28Z

axeldvp
Sep 21, 2021

@Djones4822 Thanks a lot ! Your solution is perfect for me.

I just made little changes to your function :

function toggleAnnotation(context) { let id = context.element.options.id; window.annotations[id].label.enabled = !window.annotations[id].label.enabled; window.myScatter.update(); }

0 replies

artemdumanov · 2021-10-07T09:41:22Z

artemdumanov
Oct 7, 2021

I needed to display big texts and annotation labels do so shitty job here.

It is hard to manage line splits
Displaying of label for small devices so ugly and hard to manage

I considered several solutions.

Add custom tooltip for annotations (hard to implement and support)
Display labels in the axes (ugly, hard to manage)
Use tooltip plugin more extensively (the approach that I go with)

So I followed the third approach. The idea is to show a basic annotation label and display all the data in the tooltip. I don't need to manage responsiveness, or support a code. It is elegant and cheap.

So just add this to your options and place some business logic to display a content that you want.

plugins: {
    tooltip: {
      callbacks: {
        footer: tooltipItems => {
          return 'Courses completed: {coursesCount[....]}';
        },
      },
    },
},

Hope this will save some time for you, future reader!

0 replies

stockiNail · 2021-11-26T08:12:30Z

stockiNail
Nov 26, 2021
Maintainer

@artemdumanov thank you very much!

Anyway, and correct me if I'm wrong, I think that solution is working only if the annotation is intersecting the data element.

0 replies

joeboe17 · 2022-01-20T20:21:48Z

joeboe17
Jan 20, 2022

Is there any solution for adding a tooltip if the annotation is NOT intersecting the data element?

0 replies

stockiNail · 2022-02-18T09:39:48Z

stockiNail
Feb 18, 2022
Maintainer

@joeboe17 I had time to have a look to your use case.
To do that, you need to leverage on programmatic events and custom tooltip positioners of CHART.JS.

I have prepared a codepen: https://codepen.io/stockinail/pen/dyZdMmq

Few info: the enter callback of line annotation is getting the nearest dataset element to the line but of course you can take the dataset element you need, by ChartJs API.
I can also add the footer only when you are hovering the line.

Hopefully can help.

0 replies

stockiNail · 2022-05-20T07:54:29Z

stockiNail
May 20, 2022
Maintainer

@kurkle @LeeLenaleee I was thinking if the above use case can have space among the samples in the documentation. It's anyway a complex and special use case and maybe it doesn't make sense.
Anyway I think this issue could be closed. What do you think?

0 replies

LeeLenaleee · 2022-05-20T09:24:13Z

LeeLenaleee
May 20, 2022
Collaborator

Complexity is doable (in its current form) thats not an issue here in my oppinion.

The biggest issue that I see with this example is that it is kind of misleading. For the X axis you show the april month, since its a category axis I can get behind that, that you take the one that is closest but that it shows a y axis value of 15 does feel weird. Would expect to see 17.5 since it intersects there.

Adding this will add a nice bit of complexity.

Also this does feel like a verry specific use case, if more people have issues like this we can always add it, but I think the less custom code the better. Even if its not that complex

0 replies

kurkle · 2022-05-20T13:53:43Z

kurkle
May 20, 2022
Maintainer

Might be doable with a custom interaction mode that is also considering annotations.

That said, I don't think we should make this a "supported" use case at this time, so I vote no for an sample.

0 replies

Possible with a tooltip for labels? #748

Uh oh!

martinhschei Apr 19, 2018

Replies: 10 comments

Uh oh!

matthewhegarty Oct 22, 2018

Uh oh!

Uh oh!

Djones4822 Aug 7, 2021

Uh oh!

axeldvp Sep 21, 2021

Uh oh!

artemdumanov Oct 7, 2021

Uh oh!

stockiNail Nov 26, 2021 Maintainer

Uh oh!

joeboe17 Jan 20, 2022

Uh oh!

Uh oh!

stockiNail Feb 18, 2022 Maintainer

Uh oh!

stockiNail May 20, 2022 Maintainer

Uh oh!

LeeLenaleee May 20, 2022 Collaborator

Uh oh!

kurkle May 20, 2022 Maintainer

martinhschei
Apr 19, 2018

matthewhegarty
Oct 22, 2018

Djones4822
Aug 7, 2021

axeldvp
Sep 21, 2021

artemdumanov
Oct 7, 2021

stockiNail
Nov 26, 2021
Maintainer

joeboe17
Jan 20, 2022

stockiNail
Feb 18, 2022
Maintainer

stockiNail
May 20, 2022
Maintainer

LeeLenaleee
May 20, 2022
Collaborator

kurkle
May 20, 2022
Maintainer