add example of highlight transform for shutterstock#489

cesine · Mar 29, 2020 · 65399ab · 65399ab
1 parent 9dbab1c
commit 65399ab
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/examples/multi.html b/examples/multi.html
@@ -85,18 +85,27 @@
 });
 
 var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight({
-    graph: graph,
-    legend: legend,
-    disabledColor: function() { return 'rgba(0, 0, 0, 0.2)' }
+		graph: graph,
+		legend: legend,
+		disabledColor: function() { return 'rgba(0, 0, 0, 0.2)' }
 });
 
 var highlighter = new Rickshaw.Graph.Behavior.Series.Toggle({
-    graph: graph,
-    legend: legend
+		graph: graph,
+		legend: legend,
+		transform: function(isActive, series) {
+			var	 obj = {};
+			if (isActive) {
+				obj.color  = "rgba(255, 0, 0, 0.5)";
+				obj.stroke = "rgba(255, 0, 0, 0.5)";
+			} else {
+				// lower opacity of non-highlighed data
+				obj.stroke = "rgba(0,0,0,0.1)";
+				obj.color =  "rgba(0,0,0,0.05)";
+			}
+			return obj;
+		}
 });
 
-
-
-
 </script>
 </body>
diff --git a/src/js/Rickshaw.Graph.Behavior.Series.Highlight.js b/src/js/Rickshaw.Graph.Behavior.Series.Highlight.js
@@ -32,7 +32,7 @@ Rickshaw.Graph.Behavior.Series.Highlight = function(args) {
 			else activeLine = l;
 
 			self.legend.lines.forEach( function(line) {
-				var newProperties = {};
+				var newProperties;
 				var isActive = false;
 
 				if (l === line) {
@@ -49,7 +49,7 @@ Rickshaw.Graph.Behavior.Series.Highlight = function(args) {
 					}
 				}
 
-				var newProperties = transformFn(isActive, line.series);
+				newProperties = transformFn(isActive, line.series);
 
 				propertiesSafe[line.series.name] = propertiesSafe[line.series.name] || {
 					color   : line.series.color,