Last active
February 25, 2025 23:14
-
-
Save p1-rde/2120938f1c7f44c26755cfd83f8562e8 to your computer and use it in GitHub Desktop.
Add fullscreen button to ModBar. This gist provides a fullscreen option to plotly.js. Sometimes when you have too many graphs on a single page you would enjoy watching each one of them on fullscreen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <style> | |
| .fullscreen::-webkit-scrollbar { | |
| width: 3px; | |
| } | |
| .fullscreen{ | |
| z-index: 2147483647; | |
| width: 100%; | |
| background:white; | |
| position: fixed; | |
| left: 0; | |
| right: 0; | |
| top: 5%; | |
| border-radius: 20px; | |
| border: 5px solid #e6e6e6; | |
| box-shadow: 0 70px 40px -20px rgba(0, 0, 0, 0.2); | |
| resize: both; | |
| overflow: auto; | |
| scrollbar-width: 0px; | |
| } | |
| </style> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script> | |
| <script src='https://cdn.plot.ly/plotly-2.12.1.min.js'></script> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col"> | |
| Adding a fullscreen option to plotly.js | |
| </div> | |
| <div class="col"> | |
| <div class="backpanel"> | |
| <div id='myDiv'> | |
| <!-- Plotly chart will be drawn inside this DIV --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| <script> | |
| var icon1 = { | |
| 'width': 512, | |
| 'height': 512, | |
| 'path': "M512 512v-208l-80 80-96-96-48 48 96 96-80 80z M512 0h-208l80 80-96 96 48 48 96-96 80 80z M0 512h208l-80-80 96-96-48-48-96 96-80-80z M0 0v208l80-80 96 96 48-48-96-96 80-80z" | |
| } | |
| var colors = ['green', 'red', 'blue'] | |
| var data = [{ | |
| mode: 'lines', | |
| y: [2, 1, 2], | |
| line: { | |
| color: colors[0], | |
| width: 3, | |
| shape: 'spline' | |
| } | |
| }] | |
| var layout = { | |
| title: 'add mode bar fullscreen button', | |
| modebardisplay: false | |
| } | |
| var config = { | |
| responsive: true, | |
| modeBarButtonsToAdd: [{ | |
| name: 'Fullscreen', | |
| icon: icon1, | |
| click: function(gd) { | |
| $(gd).toggleClass('fullscreen'); | |
| Plotly.Plots.resize(gd); | |
| } | |
| }] | |
| } | |
| Plotly.newPlot('myDiv', data, layout, config) | |
| </script> |
please tell us how to attach it to the modebar
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@aronnoordhoek nope, still not achieved the fullscreen functionality yet! do you have a solution for this?