Hide/Show annotations?

[Techn1x]

Hi, is there any way to hide & show the individual annotations with a property? (Rather than removing the object from the annotations array?)

For example, Chart.JS allows you to define a display: true/false/callback on things like the legend

Thanks!

[corentingi]

I am looking for the same thing
To actually emulate this, it is needed to delete and recreate the annotations...

[compwright]

Not currently. If you'd like to take a crack at it, we'll entertain a PR! Thanks!

[Techn1x]

I might take a look at doing a PR at some point. Any guidance?

I've taken a look at the chartjs-plugin-datalabels project which uses a display attribute (there's a global one, and a per-data one), all of the logic for it is in this file https://github.com/chartjs/chartjs-plugin-datalabels/blob/a56a4d1bf733976507205046d189d5fd6c4f3005/src/plugin.js

Just having trouble envisioning how I might apply the same to this project

Hopefully when I take a deeper look later it might become more apparent to me

[yusufozturk]

@Techn1x @corentingi
You can make this by adding a "display" option into your annotation. Or you can hide them entirely, or you can just hide annotations individually.

I'm going to make a pull request for this. But for now, you can make following changes.

First, add a new option called "display" into default options:

Then add "canHide" option to check them individually:

So if you add "canHide: true" into your annotation and if you leave "display: false", then these annotations will not be visible.

How can you enable/disable visibility of the annotations? Just enable "display" option by setting it to "display: true/false" and then update your chart. Like in example:

chart.options.annotation.display = true; chart.update();

That's it :)

[yusufozturk]

Or another alternative:

So you can also hide them individually by setting "isHidden:true" option. I used "isHidden" instead of "display" so nobody will have issue after version upgrade. Otherwise everybody has to update their annotation config which is not very pleasant.

[ghost]

will this be in the next release?

[joancifo]

Thanks for this plugin!

However, I'm also interested in this feature.

[Kibo007]

Is this implemented in plugin? Can I show / hide annotations?

[Techn1x]

Inspired by @yusufozturk I've added a PR that adds this feature #141

It's a bit more advanced in that it can be dynamically changed updated after initial draw of annotations. It also uses display attribute, but enables it by default for all annotations.

Hiding an annotation simply just renders it invisible (this way event hooks still work, so you can mouse in/out etc.)

Perhaps a later PR could be to include enable attr for annotations (i.e. completely remove them so they don't render at all and events don't trigger)

Took me a year to get it done but oh well :)

[matthewhegarty]

It looks like this got close to being completed, but didn't get over the line. @Techn1x Any chance it could be completed?

[poli44]

    function UnDraw() {
        window.myLine.config.data.datasets.forEach(function (dataset) {
            window.myLine.options.annotation.annotations.pop();
        });
        window.myLine.update();
    };
    function Draw(a) {
        window.myLine.options.annotation.annotations.push(
            {
                type: 'box',
                drawTime: 'afterDraw',
                xScaleID: 'x-axis-0',
                yScaleID: 'y-axis-0',
                xMax: a * 1000,
                xMin: a * 1000,
                yMax: MAXY,
                yMin: MINY,
                borderColor: 'rgba(255,102,0,1)',
                borderWidth: 1,
                backgroundColor: 'rgba(255,102,0,1)',
            });
        window.myLine.update();
    };

[ThaDaVos]

Any ETA on the implementation?

[jgatto1]

try to set the value to a value out of the axis:

                    lineElement.options.value = -1;
                    chartInstance.update(0);

[chaoticbear]

I was trying to do this in in React.
I saw that the README mentions a display property, but it doesn't seem to be doing anything at the moment.
Instead I basically made it invisible with colors. Not a great solution ... just an option if you need it.

annotation: {
      drawTime: 'beforeDatasetsDraw' as const,
      annotations: [{
        id: 'hline1',
        type: 'line' as const,
        mode: 'horizontal' as const,
        scaleID: 'y-axis-0',
        value: valueVar,
        borderColor: showHideVar? "orange": "transparent",
        borderWidth: 2,
        borderDash: [2, 2],
        borderDashOffset: 5,
        label: {
          backgroundColor: showHideVar? "orange": "transparent",
          content: showHideVar? "Text": "",
          enabled: true
        }
      }]
    }

[stockiNail]

@joshfleming seeing the annotation configuration you posted, I have the feeling you are not using the version 1.x (or master) where display options has been implemented.
Which plugin version are you using?

[etimberg]

Closing since this is implemented in v1.0.0-beta.4 https://jsfiddle.net/892t1r03/