Reputation: 19
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