Add hoverColor option (#141)

* Add display option, to optionally hide annotations

* Add display option to readme

* Small fix to code style

* Fix indentation

Co-authored-by: Jukka Kurkela <jukka.kurkela@gmail.com>

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',

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;

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,

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;

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;