score:0
I dont know if this is the best answer but since Chartjs Annotation Plugin doesn't allow to show or hide annotations you can simple leave the annotation type blank and that will hide tha annotation.
then based on your condition you can add the type back again.
annotation: {
drawTime: 'afterDatasetsDraw',
annotations: [{
id: 'hline1',
type: '',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 50,
borderColor: 'red',
borderDash: [8,5],
borderWidth: 1,
label: {
backgroundColor: "red",
content: "Benchmark",
enabled: true,
position : "left"
}
}, {
id: 'hline2',
type: '',
mode: 'horizontal',
scaleID: 'y-axis-0',
value: 30,
borderColor: 'green',
borderDash: [8,5],
borderWidth: 1,
label: {
backgroundColor: "green",
content: "Target",
enabled: true,
position : "left"
}
}]
},
score:0
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();
};
score:1
Another option is to update the chart by switching drawtime from "afterDatasetsDraw" to null, based on your desired condition.
Something like:
function toggleAnnotation(chart) {
if (chart.options.annotation.drawTime == "afterDatasetsDraw"){
chart.options.annotation.drawTime = null;
} else {
chart.options.annotation.drawTime = "afterDatasetsDraw";
}
chart.update();
}
Source: stackoverflow.com
Related Query
- ChartJS Annotation Hide /Show
- chartjs - show hide specific dataset with click on element outside graph
- chartJS Horizontal Bar - Hide Stacked Bars But Still Show In Tooltip
- Hide points in ChartJS LineGraph
- Is it possible in chartjs to hide certain dataset legends?
- Show bar with zero value in ChartJs v2
- Chartjs hide data point labels
- show label in tooltip but not in x axis for chartjs line chart
- chartjs show dot point on hover over line chart
- ChartJS Line Graph - Multiple Lines, Show one Value on Tooltip
- ChartJS – How to show border on empty pie chart?
- Hide labels on x-axis ChartJS
- ChartJS show gaps in time data
- ChartJS hide labels on small screen sizes
- Hide gridlines in chartjs without the drawTicks
- how to always show label in chartjs without mouseover?
- Show data dynamically in line chart - ChartJS
- Chartjs - show elements in all datasets on hover using bar chart
- How to show data values or index labels in ChartJs (Latest Version)
- Show Data labels on Bar in ChartJS
- Show image instead a point in a ChartJS scatter plot
- ChartJS x-axis show only months of year
- Chartjs hide dataset legend v3
- How to add ChartJS code in Html2Pdf to view image
- Unable to hide Legend in Chartjs with PrimeFaces7.0
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- ChartJS show value in legend (Chart.js V3.5)
- Chartjs v2.5 - only show min and max on scale, absolute positioning on scale
- Chartjs: Is it possible to hide the data labels on the axis but show up on the graph on hover?
- chartjs plugin datalabels does not show value on charts
More Query from same tag
- React render Chart.js based on api response
- Chart with tool tip values
- Chart.js line chart with correctly spaced x labels
- Chart.js Chart displays but no data
- How can I change the color of certain lines in chartjs / vue-chartjs?
- trying to get minIndex and maxIndex from x-axis-0
- Using map reduce in javascript
- node js mysql query result rendered to chart.js labels in pug page
- Chart.js zoom plugin: Unexpected identifier error in console
- angular-chart.js : issue with pointHoverBorderColor property for line chart
- Switching between Charts with chart.js using Buttons
- How to sort MMMYY on Chart.Js and display the values that match the month?
- Chart js plugin annotation not working in vue
- How to hide radar chart index labels (chart.js)
- How to increase size and family in a radar's Chartjs label
- Can't display data labels in chartJS
- React-chartjs-2 update height dynamically
- How to display Tooltip without hovering pie chart with Chart.JS
- How to modify chartjs tooltip to add customized attribute
- Why is my dependency injection not working in Angular?
- Dynamic id with canvas on html and angular
- Chart.js axes label font size
- Use PHP to populate chart.js with data from an SQLite Database
- Reanimate Data Values in CharJS
- Angular 2 chart - change point radius
- Stacked horizontal chart. How to trigger individual hover in the stacked element?
- How to create a chart with chartjs.org with data from an array?
- Why is my line chart using multiple lines to connect random points? (Chart.js)
- Why am I getting "plot.new has not been called yet" calling legend() after chartJSRadar()
- Why my ChartJs only Coloring one section?