squidmonkey
squidmonkey

Reputation: 19

hide annotation when clicking legend toggle

I'm using the annotation plugin to show a vertical line on my graph.

 const options = {
        legend: {
          position: 'bottom',
          onClick: (e, legendItem, legend) => {
                    const index = legendItem.datasetIndex;
                    const ci = legend.chart;
                    console.log(legendItem, legend);
                    if (ci.isDatasetVisible(index)) {
                        ci.hide(index);
                        legendItem.hidden = true;
                        if(legendItem.text === "Current Time"){
                           //toggle annotation off


                        }
                    } else {
                        ci.show(index);
                        legendItem.hidden = false;
                        if(legendItem.text === "Current Time"){
                            //toggle annotation on
                        }
                    }
                }
        },
        annotation:{
            annotations: [{
                display: true,
                type: 'line',
                borderColor: rs.getPropertyValue('--CURRENT_TIMELINE'),
                borderWidth: 2,
                mode: 'vertical',
                xMin: moment.utc().subtract(30, "m").valueOf(),
                xMax: moment.utc().subtract(30, "m").valueOf()
            }]
        }
    }

I have the options variable saved in state that i modify with my program:

<Bar options={this.state.options} data={this.state.data}/>

I understand the "this" keyword does not reference my object, but the chartjs legend when used in the callback. My question is this: I'm trying to figure out a way to toggle the annotation on / off this.state.options.annotation.annotations[0].display = false when the legend is clicked, preferably by using state, but since "this.state..." is undefined, i'm not sure how to do this. Is it possible?

Versions: [email protected] [email protected]

Upvotes: 0

Views: 69

Answers (0)

Related Questions