Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
    <head>
        <script src="https://29913-45646037-gh.circle-artifacts.com/0/dist/plotly.js"></script>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <div id="chart1" width="800px" height="500px">
                    </div>
                </td>
                <td>
                    <div id="chart2" width="800px" height="500px">
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="chart3" width="800px" height="500px">
                    </div>
                </td>
                <td>
                    <div id="chart4" width="800px" height="500px">
                    </div>
                </td>
            </tr>
        </table>
        
        <script>
        
            function addEventListeners(graphDiv, hoverColors) {
                            
                if (hoverColors) {
                
                    graphDiv.on('plotly_hover', function(data){
                        
                        var update = {};
                        var prop_name;
                        
                        if (data.points[0].data.marker.color) {
                            prop_name = "color";
                        }
                        else {
                            prop_name = "colors";
                        }
                        
                        update["marker." + prop_name] = [data.points[0].data.marker[prop_name].map((e, i) => ((i == data.points[0].pointNumber) ? data.points[0].data.marker.colorsHover[i] : e))];
                        
                        Plotly.restyle(graphDiv, update, data.points[0].curveNumber);
                        
                        console.log("hover");
                    });
                
                    graphDiv.on('plotly_unhover', function(data){
                    
                        var update = {};
                        var prop_name;
                        
                        if (data.points[0].data.marker.color) {
                            prop_name = "color";
                        }
                        else {
                            prop_name = "colors";
                        }
                        
                        update["marker." + prop_name] = [data.points[0].data.marker[prop_name].map((e, i) => ((i == data.points[0].pointNumber) ? data.points[0].data.marker.colorsUnhover[i] : e))];
                        
                        Plotly.restyle(graphDiv, update, data.points[0].curveNumber);
                        
                        console.log("unhover");
                    });
                }
                else {
                    graphDiv.on('plotly_hover', function(data){                     
                        console.log("hover");
                    });
                
                    graphDiv.on('plotly_unhover', function(data){
                        console.log("unhover");
                    });
                }
            }       
        
            var data1 = [
               {
                  "type": "pie",
                  "marker": {
                     "colors": ["#5757E5", "#5596E6", "#01B49F", "#8CD210", "#FDD600", "#9B4FD7", "#FF38A1", "#EA1C2B", "#FF7925", "#5757E5", "#5596E6", "#01B49F"],
                     "colorsHover": ["#3131BF", "#2F70C0", "#008E79", "#66AC00", "#D7B000", "#7529B1", "#D9127B", "#C40005", "#D95300", "#3131BF", "#2F70C0", "#008E79"],
                     "colorsUnhover": ["#5757E5", "#5596E6", "#01B49F", "#8CD210", "#FDD600", "#9B4FD7", "#FF38A1", "#EA1C2B", "#FF7925", "#5757E5", "#5596E6", "#01B49F"]
                  },
                  "textfont": {
                     "size": 12
                  },
                  "values": [11, 6, 9, 5, 16, 7, 5, 10, 14, 19, 37, 6],
                  "labels": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                  "sort": false,
                  "direction": "clockwise",
                  "hoverinfo": "label+value+percent",
                  "textinfo": "percent"
               }
            ];
​
            var layout1 = {
               "font": {
                  "size": 12
               },
               "showlegend": true,
               "height": 500,
               "width": 800,
               "legend": {
                  "traceorder": "normal"
               },
               title: {
                  "text": "Pie Chart with Hover Highlighting"
               },
               "hovermode": "closest",
               "margin": {
                  "l": 80,
                  "r": 80,
                  "t": 100,
                  "b": 80
               }
            };
          
            var layout2 = {
               "font": {
                  "size": 12
               },
               "showlegend": true,
               "height": 500,
               "width": 800,
               "legend": {
                  "traceorder": "normal"
               },
               title: {
                  "text": "Pie Chart without Hover Highlighting"
               },
               "hovermode": "closest",
               "margin": {
                  "l": 80,
                  "r": 80,
                  "t": 100,
                  "b": 80
               }
            };
​
​
            var data3 = [
               {
                  "type": "bar",
                  "marker": {
                     "color": ["#5757E5", "#5596E6", "#01B49F", "#8CD210", "#FDD600", "#9B4FD7", "#FF38A1", "#EA1C2B", "#FF7925", "#5757E5", "#5596E6", "#01B49F"],
                     "colorsHover": ["#3131BF", "#2F70C0", "#008E79", "#66AC00", "#D7B000", "#7529B1", "#D9127B", "#C40005", "#D95300", "#3131BF", "#2F70C0", "#008E79"],
                     "colorsUnhover": ["#5757E5", "#5596E6", "#01B49F", "#8CD210", "#FDD600", "#9B4FD7", "#FF38A1", "#EA1C2B", "#FF7925", "#5757E5", "#5596E6", "#01B49F"]
                  },
                  "textfont": {
                     "size": 12
                  },
                  "y": [11, 6, 9, 5, 16, 7, 5,  10, 14, 19, 37, 6],
                  "x": ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                  "sort": false,
                  "hoverinfo": "x+y"
               }
            ];
            
            var layout3 = {
                
               "font": {
                  "size": 12
               },
               "height": 500,
               "width": 800,
               title: {
                  "text": "Bar Chart with Hover Highlighting"
               },
               "hovermode": "closest",
               "margin": {
                  "l": 80,
                  "r": 80,
                  "t": 100,
                  "b": 80
               }
            };
            
            var graphDiv1 = document.getElementById("chart1");
​
            Plotly.newPlot(graphDiv1, data1, layout1);
            
            addEventListeners(graphDiv1, true);
            
            var graphDiv2 = document.getElementById("chart2");
​
            Plotly.newPlot(graphDiv2, data1, layout2);
            
            addEventListeners(graphDiv2, false);
            
            var graphDiv3 = document.getElementById("chart3");
​
            Plotly.newPlot(graphDiv3, data3, layout3);
            
            addEventListeners(graphDiv3, true);
            
        
        </script>
    
    </body>
​
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers