diff --git a/README.md b/README.md index 4d87c4264..739ba22ec 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,9 @@ To configure the annotations plugin, you can simply add new config options to yo { plugins: { annotation: { + // Set this to false to hide all annotations (events will still trigger) + display: true, // (default) + // Defines when the annotations are drawn. // This allows positioning of the annotation relative to the other // elements of the graph. @@ -41,6 +44,7 @@ To configure the annotations plugin, you can simply add new config options to yo // Array of annotation configuration objects // See below for detailed descriptions of the annotation options annotations: [{ + display: true, // (default) drawTime: 'afterDraw', // overrides annotation.drawTime if set id: 'a-line-1', // optional type: 'line', diff --git a/src/helpers.js b/src/helpers.js index 47bef1f82..60851e306 100644 --- a/src/helpers.js +++ b/src/helpers.js @@ -91,8 +91,9 @@ module.exports = function(Chart) { function initConfig(config) { config = chartHelpers.configMerge(Chart.Annotation.defaults, config); if (chartHelpers.isArray(config.annotations)) { - config.annotations.forEach(function(annotation) { + config.annotations = config.annotations.map(function(annotation) { annotation.label = chartHelpers.configMerge(Chart.Annotation.labelDefaults, annotation.label); + return chartHelpers.configMerge(Chart.Annotation.annotationDefaults, annotation); }); } return config; diff --git a/src/index.js b/src/index.js index 8ee2157ef..ecd912e35 100644 --- a/src/index.js +++ b/src/index.js @@ -12,12 +12,17 @@ Chart.Annotation.drawTimeOptions = { }; Chart.Annotation.defaults = { + display: true, drawTime: 'afterDatasetsDraw', dblClickSpeed: 350, // ms events: [], annotations: [] }; +Chart.Annotation.annotationDefaults = { + display: true +}; + Chart.Annotation.labelDefaults = { backgroundColor: 'rgba(0,0,0,0.8)', fontFamily: Chart.defaults.global.defaultFontFamily, diff --git a/src/types/box.js b/src/types/box.js index 624033b7c..2a6420e8b 100644 --- a/src/types/box.js +++ b/src/types/box.js @@ -88,10 +88,16 @@ module.exports = function(Chart) { model.right = right; model.bottom = bottom; - // Stylistic options - model.borderColor = options.borderColor; - model.borderWidth = options.borderWidth; - model.backgroundColor = options.backgroundColor; + // Hide if display disabled + if (options.display && chartInstance.annotation.options.display) { + model.borderColor = options.borderColor; + model.borderWidth = options.borderWidth; + model.backgroundColor = options.backgroundColor; + } else { + model.borderColor = 'rgba(0,0,0,0)'; + model.borderWidth = 0; + model.backgroundColor = 'rgba(0,0,0,0)'; + } }, inRange: function(mouseX, mouseY) { var model = this._model; diff --git a/src/types/line.js b/src/types/line.js index 6aa911113..08a99c4c4 100644 --- a/src/types/line.js +++ b/src/types/line.js @@ -182,6 +182,13 @@ module.exports = function(Chart) { model.borderWidth = options.borderWidth; model.borderDash = options.borderDash || []; model.borderDashOffset = options.borderDashOffset || 0; + + // Hide if display is disabled + if (!options.display || !chartInstance.annotation.options.display) { + model.labelEnabled = false; + model.borderColor = 'rgba(0,0,0,0)'; + model.borderWidth = 0; + } }, inRange: function(mouseX, mouseY) { var model = this._model;