Update 2018-08-06-order6_legendclick_event.html

Author: michaelbabyn

_posts/plotly_js/chart-events/events/2018-08-06-order6_legendclick_event.html

@@ -10,17 +10,16 @@
   `plotly_legendclick` and `plotly_legenddoubleclick` allow customization of the plotly legend. The default behaviour of `plotly_legendclick` is to hide a trace and the default behavior of `plotly_legenddoubleclick` is to select one trace and hide all the others. 
   We can add to the default behaviour by creating a new `plotly_legendclick` event with a function of our choice. We can also disable the default behaviour by creating a function that returns `false`. In the example below, we do both in order to create a `plotly_legendclick` event which changes the marker color back to black instead of erasing the trace.
 ---
-
 var myPlot = document.getElementById('myDiv'),
     x = [1, 2, 3, 4, 5, 6],
     y = [1, 2, 3, 2, 3, 4],
     y2 = [1, 4, 7, 6, 1, 5],
-    colors = [['#00000','#00000','#00000','#00000','#00000','#00000'],
-              ['#00000','#00000','#00000','#00000','#00000','#00000']],
+    colors = [['#5C636E','#5C636E','#5C636E','#5C636E','#5C636E','#5C636E'],
+              ['#393e46','#393e46','#393e46','#393e46','#393e46','#393e46']],
     data = [{x:x, y:y, type:'scatter',
-             mode:'line', line:{ color:'red'},marker:{size:16, color:colors[0]}},
+             mode:'line', line:{ color:'#5C636E'},marker:{size:16, color:colors[0]}},
             {x:x, y:y2, type:'scatter',
-             mode:'line',line:{ color:'black'}, marker:{size:16, color:colors[1]}}],
+             mode:'line',line:{ color:'#393e46'}, marker:{size:16, color:colors[1]}}],
     layout = {
         showlegend: true,
         hovermode:'closest',
@@ -44,9 +43,9 @@
 });
 
 myPlot.on('plotly_legendclick', function(data){
-  var trColors = ['#00000','#00000','#00000',
-                   '#00000','#00000','#00000'];
-  var update = {'marker':{color: trColors, size:16}};
+  var trColors = [['#5C636E','#5C636E','#5C636E','#5C636E','#5C636E','#5C636E'],
+              ['#393e46','#393e46','#393e46','#393e46','#393e46','#393e46']];
+  var update = {'marker':{color: trColors[data.curveNumber], size:16}};
   Plotly.restyle('myDiv', update,[data.curveNumber]);
   return false;
 });