-
-
Save p1-rde/2120938f1c7f44c26755cfd83f8562e8 to your computer and use it in GitHub Desktop.
| <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> |
This is exactly what I am trying to achieve : adding a fullscreen option to a plotly graph in my python Dash app. This seems to be the exact thing I am looking for!
However, I don't understand how to modify my code to add your code snippet and the fullscreen functionality. Where am I suppose to add your gist to my code? In a custom CSS file? Please help!
This is exactly what I am trying to achieve : adding a fullscreen option to a plotly graph in my python Dash app. This seems to be the exact thing I am looking for! However, I don't understand how to modify my code to add your code snippet and the fullscreen functionality. Where am I suppose to add your gist to my code? In a custom CSS file? Please help!
It is not a library to import just use the raw code at frontend directly
Hi, How can i add this to a plotly app built in python instead of js?
This is exactly what I am trying to achieve : adding a fullscreen option to a plotly graph in my python Dash app. This seems to be the exact thing I am looking for! However, I don't understand how to modify my code to add your code snippet and the fullscreen functionality. Where am I suppose to add your gist to my code? In a custom CSS file? Please help!
Did you figure this out?
@aronnoordhoek nope, still not achieved the fullscreen functionality yet! do you have a solution for this?
please tell us how to attach it to the modebar
@plotly.js