From c60c35842210407dd3b87e5b9119d9dac4c70fe6 Mon Sep 17 00:00:00 2001 From: Joseph Damiba Date: Fri, 24 Jan 2020 16:50:08 -0500 Subject: [PATCH 1/7] inline example figures --- .../2015-09-24-config-locale.html | 4 +--- ...2015-09-24-config-opt-display-modebar.html | 1 - .../2015-09-24-config-opt-displaylogo.html | 1 - .../2015-09-24-config-opt-hide-modebar.html | 1 - .../2015-09-24-config-opt-link-text.html | 23 ++++++++++--------- .../2015-09-24-config-opt-scrollzoom.html | 1 - .../2015-09-24-config-opt-showlink.html | 5 ++-- .../2015-09-24-config-opt-static-plot.html | 1 - ...09-24-config-opt-toImageButtonOptions.html | 1 - .../2015-09-24-config-showSendToCloud.html | 1 - .../2015-09-24-config_options_index.html | 1 + .../config-options/2017-03-01-edit_mode.html | 8 +++---- .../2018-02-04-config-opt-modebarButtons.html | 1 - .../2018-09-12-config-opt-responsive.html | 3 +-- 14 files changed, 22 insertions(+), 30 deletions(-) diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-locale.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-locale.html index 7526cc29a84b..d0ff05a168ec 100644 --- a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-locale.html +++ b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-locale.html @@ -1,6 +1,5 @@ --- name: Change the Default Locale -plot_url: https://codepen.io/plotly/embed/rqrgEQ/?height=600&theme-id=15263&default-tab=result language: plotly_js suite: configuration order: 7.5 @@ -36,5 +35,4 @@ var config = {locale: 'fr'}; -Plotly.newPlot('myDiv', data, layout, config); - +Plotly.newPlot('myDiv', data, layout, config); \ No newline at end of file diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-display-modebar.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-display-modebar.html index d3842325089d..6c59e90cc275 100644 --- a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-display-modebar.html +++ b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-display-modebar.html @@ -1,6 +1,5 @@ --- name: Always Display the Modebar -plot_url: https://codepen.io/plotly/embed/jbMvLq/?height=450&theme-id=15263&default-tab=result language: plotly_js suite: configuration order: 4 diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-displaylogo.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-displaylogo.html index 9b702bc880e4..1c2d9a696e7c 100644 --- a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-displaylogo.html +++ b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-displaylogo.html @@ -1,6 +1,5 @@ --- name: Hide the Plotly Logo on the Modebar -plot_url: https://codepen.io/plotly/embed/EVgeWb/?height=450&theme-id=15263&default-tab=result language: plotly_js suite: configuration order: 8 diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-hide-modebar.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-hide-modebar.html index 0e28e66029f4..7a07028e7f3e 100644 --- a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-hide-modebar.html +++ b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-hide-modebar.html @@ -1,6 +1,5 @@ --- name: Hide the Modebar -plot_url: https://codepen.io/plotly/embed/YyGOLg/?height=450&theme-id=15263&default-tab=result language: plotly_js suite: configuration order: 5 diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-link-text.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-link-text.html index 40547d1eaceb..130d03bd3697 100644 --- a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-link-text.html +++ b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-link-text.html @@ -1,6 +1,5 @@ --- -name: Modify the "Edit Chart" Link Text -plot_url: https://codepen.io/plotly/embed/WQGgbe/?height=600&theme-id=15263&default-tab=result +name: Customize The `Edit Chart` Link Text language: plotly_js suite: configuration order: 7 @@ -8,14 +7,16 @@ arrangement: horizontal --- var trace1 = { - z: [[0, 1, 2, 3, 4, 5, 6], [1, 9, 4, 7, 5, 2, 4], [2, 4, 2, 1, 6, 9, 3]], - type: 'heatmap' -}; + z: [[0, 1, 2, 3, 4, 5, 6], + [1, 9, 4, 7, 5, 2, 4], + [2, 4, 2, 1, 6, 9, 3]], + type: 'heatmap' + }; + + var data = [trace1]; -var data = [trace1]; + var layout = { + title: 'Customize The Edit Chart Link Text' + }; -var layout = { - title: 'Change the Link Text' -}; - -Plotly.newPlot('myDiv', data, layout, {linkText: 'Change this text'}); + Plotly.newPlot('myDiv', data, layout, {showLink: true, linkText: 'This text is custom!'}); \ No newline at end of file diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-scrollzoom.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-scrollzoom.html index 3a918b0b106c..e05bddbbac9d 100644 --- a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-scrollzoom.html +++ b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-scrollzoom.html @@ -1,6 +1,5 @@ --- name: Scroll and Zoom -plot_url: https://codepen.io/plotly/embed/QjKZbg/?height=450&theme-id=15263&default-tab=result language: plotly_js suite: configuration order: 1 diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-showlink.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-showlink.html index b2a8905a5509..c54a959727fe 100644 --- a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-showlink.html +++ b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-showlink.html @@ -1,6 +1,5 @@ --- -name: Display the "Edit Chart" Link -plot_url: https://codepen.io/plotly/embed/epdjem/?height=600&theme-id=15263&default-tab=result +name: Display the `Edit Chart` Link language: plotly_js suite: configuration order: 6 @@ -18,7 +17,9 @@ }; var data = [trace1]; + var layout = { title: 'Display the Edit Chart Link' }; + Plotly.newPlot('myDiv', data, layout, {showLink: true}); diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-static-plot.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-static-plot.html index fa2fff977f97..9d044266a110 100644 --- a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-static-plot.html +++ b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-static-plot.html @@ -1,6 +1,5 @@ --- name: Making a Static Chart -plot_url: https://codepen.io/plotly/embed/YyGjda/?height=450&theme-id=15263&default-tab=result language: plotly_js suite: configuration order: 3 diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-toImageButtonOptions.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-toImageButtonOptions.html index ff430c1e4820..e4825cd3bd75 100644 --- a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-toImageButtonOptions.html +++ b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-toImageButtonOptions.html @@ -1,6 +1,5 @@ --- name: Customize Download Plot Options -plot_url: https://codepen.io/plotly/embed/MZjYRB/?height=450&theme-id=15263&default-tab=result language: plotly_js suite: configuration order: 3.1 diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-showSendToCloud.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-showSendToCloud.html index ed5ec7b1089e..d799d3955a20 100644 --- a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-showSendToCloud.html +++ b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-showSendToCloud.html @@ -1,6 +1,5 @@ --- name: Display Edit in Chart Studio Button -plot_url: https://codepen.io/plotly/embed/aPpzzw/?height=600&theme-id=15263&default-tab=result language: plotly_js suite: configuration order: 7.1 diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config_options_index.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config_options_index.html index 209435506358..07c8ab89a4ad 100755 --- a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config_options_index.html +++ b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config_options_index.html @@ -8,6 +8,7 @@ thumbnail: thumbnail/modebar-icons.png display_as: reference --- + The plotly.js config argument sets properties like the mode bar buttons and the interactivity in the chart. It's the last argument in Plotly.newPlot and Plotly.newPlot calls. diff --git a/_posts/plotly_js/fundamentals/config-options/2017-03-01-edit_mode.html b/_posts/plotly_js/fundamentals/config-options/2017-03-01-edit_mode.html index ac2395e4b15f..b302df1452be 100644 --- a/_posts/plotly_js/fundamentals/config-options/2017-03-01-edit_mode.html +++ b/_posts/plotly_js/fundamentals/config-options/2017-03-01-edit_mode.html @@ -1,11 +1,12 @@ --- -name: Edit Mode -plot_url: https://codepen.io/plotly/embed/VpeMKo/?height=450&theme-id=15263&default-tab=result +name: Editable Mode language: plotly_js suite: configuration order: 2 sitemap: false arrangement: horizontal +markdown_content: | + In editable mode, users can edit the chart title, axis labels and trace names in the legend. --- var trace1 = { x: [0, 1, 2, 3, 4], @@ -22,7 +23,6 @@ }; var data = [trace1, trace2]; -var layout = { - title: 'Click Here
to Edit Chart Title'}; +var layout = {title: 'Click Here
to Edit Chart Title'}; Plotly.newPlot('myDiv', data, layout, {editable: true}); \ No newline at end of file diff --git a/_posts/plotly_js/fundamentals/config-options/2018-02-04-config-opt-modebarButtons.html b/_posts/plotly_js/fundamentals/config-options/2018-02-04-config-opt-modebarButtons.html index 5640cb93e0e0..46d8c34b1dea 100644 --- a/_posts/plotly_js/fundamentals/config-options/2018-02-04-config-opt-modebarButtons.html +++ b/_posts/plotly_js/fundamentals/config-options/2018-02-04-config-opt-modebarButtons.html @@ -1,6 +1,5 @@ --- name: Remove Modebar Buttons -plot_url: https://codepen.io/plotly/embed/OQyEaP/?height=450&theme-id=15263&default-tab=result language: plotly_js suite: configuration order: 9 diff --git a/_posts/plotly_js/fundamentals/config-options/2018-09-12-config-opt-responsive.html b/_posts/plotly_js/fundamentals/config-options/2018-09-12-config-opt-responsive.html index 395d1115310e..fb995332ed81 100644 --- a/_posts/plotly_js/fundamentals/config-options/2018-09-12-config-opt-responsive.html +++ b/_posts/plotly_js/fundamentals/config-options/2018-09-12-config-opt-responsive.html @@ -1,6 +1,5 @@ --- name: Making a Responsive Chart -plot_url: https://codepen.io/plotly/embed/BOxMXz/?height=550&theme-id=15263&default-tab=result language: plotly_js suite: configuration order: 10 @@ -22,7 +21,7 @@ var data = [ trace1 ]; var layout = { - title: 'Responsive to window's size!', + title: 'Responsive to window size!', font: {size: 18} }; From 8aaad6e87b16e6c1d725fda02c48a6e83411b2c6 Mon Sep 17 00:00:00 2001 From: mahdis-z Date: Fri, 24 Jan 2020 16:51:17 -0500 Subject: [PATCH 2/7] modebar buttons --- .../2020-01-24-add-button-to-modebar.html | 41 +++++++++++++++++++ .../2020-01-24-display-modebar.html | 20 +++++++++ .../2020-01-24-remove-modebarButtons.html | 28 +++++++++++++ 3 files changed, 89 insertions(+) create mode 100644 _posts/plotly_js/fundamentals/config-options/2020-01-24-add-button-to-modebar.html create mode 100644 _posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html create mode 100644 _posts/plotly_js/fundamentals/config-options/2020-01-24-remove-modebarButtons.html diff --git a/_posts/plotly_js/fundamentals/config-options/2020-01-24-add-button-to-modebar.html b/_posts/plotly_js/fundamentals/config-options/2020-01-24-add-button-to-modebar.html new file mode 100644 index 000000000000..d766e28a89a6 --- /dev/null +++ b/_posts/plotly_js/fundamentals/config-options/2020-01-24-add-button-to-modebar.html @@ -0,0 +1,41 @@ +--- +name: Add Buttons to ModeBar +plot_url: https://codepen.io/plotly/embed/gObEmLr/?height=450&theme-id=15263&default-tab=result +language: plotly_js +suite: configuration +order: 5.7 +sitemap: false +arrangement: horizontal +markdown_content: | + The following example shows how to add a button to your modebar, either using one of the [Plotly icons](https://github.com/plotly/plotly.js/blob/master/src/fonts/ploticon.js) or an [arbitrary icon](https://fontawesome.com/icons?d=gallery&m=free) with a custom behaviour. +--- +var icon1 = { + 'width': 500, + 'height': 600, + 'path':'M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z'} +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 button with custom icon', + modebardisplay: false} +var config = { + modeBarButtonsToAdd: [ + { + name: 'color toggler', + icon: icon1, + click: function(gd) { + var newColor = colors[Math.floor(3 * Math.random())] + Plotly.restyle(gd, 'line.color', newColor) + }}, + { + name: 'button1', + icon: Plotly.Icons.pencil, + direction: 'up', + click: function(gd) {alert('button1') + }}], + modeBarButtonsToRemove: ['pan2d','select2d','lasso2d','resetScale2d','zoomOut2d']} + +Plotly.newPlot('graph', data, layout, config) \ No newline at end of file diff --git a/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html b/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html new file mode 100644 index 000000000000..6a89f90b2dfc --- /dev/null +++ b/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html @@ -0,0 +1,20 @@ +--- +name: Display the Modebar +plot_url: https://codepen.io/plotly/embed/jbMvLq/?height=450&theme-id=15263&default-tab=result +language: plotly_js +suite: configuration +order: 4 +sitemap: false +arrangement: horizontal +markdown_content: | + When you hover over the top right of a Plotly graph, a bar appears which we call it `modeBar`. To display or hide this modebar set `displayModeBar` in `config` to `true` or `false`. +--- +var data = { + y:['Marc', 'Henrietta', 'Jean', 'Claude', 'Jeffrey', 'Jonathan', 'Jennifer', 'Zacharias'], + x: [90, 40, 60, 80, 75, 92, 87, 73], + type: 'bar', + orientation: 'h' +}; + +var layout = {title: 'Always Display the Modebar', showlegend: false}; +Plotly.newPlot('myDiv', data, layout, {displayModeBar: true}); diff --git a/_posts/plotly_js/fundamentals/config-options/2020-01-24-remove-modebarButtons.html b/_posts/plotly_js/fundamentals/config-options/2020-01-24-remove-modebarButtons.html new file mode 100644 index 000000000000..977765566073 --- /dev/null +++ b/_posts/plotly_js/fundamentals/config-options/2020-01-24-remove-modebarButtons.html @@ -0,0 +1,28 @@ +--- +name: Remove ModeBar Button +plot_url: https://codepen.io/plotly/embed/OQyEaP/?height=450&theme-id=15263&default-tab=result +language: plotly_js +suite: configuration +order: 5.5 +sitemap: false +arrangement: horizontal +markdown_content: | + To delete buttons from the modebar, put buttons name in an array of string and pass it to 'modeBarButtonsToRemove' in config. Here is all the buttons' names: + +--- +var data = { + x:['trees', 'flowers', 'hedges'], + y: [90, 130, 40], + type: 'bar'}; + +var layout = { + title: 'Remove Modebar Buttons', + showlegend: false}; + +Plotly.newPlot('myDiv', data, layout, {modeBarButtonsToRemove: ['toImage']}); From 9b79d9855e442773450689728ca296231a1bd9b1 Mon Sep 17 00:00:00 2001 From: Joseph Damiba Date: Fri, 24 Jan 2020 17:13:18 -0500 Subject: [PATCH 3/7] merge work to inline examples --- .../2018-02-04-config-opt-modebarButtons.html | 20 ------------------ .../2020-01-24-add-button-to-modebar.html | 21 ++++++++++++------- .../2020-01-24-display-modebar.html | 10 ++++----- .../2020-01-24-remove-modebarButtons.html | 21 +++++++++---------- 4 files changed, 29 insertions(+), 43 deletions(-) delete mode 100644 _posts/plotly_js/fundamentals/config-options/2018-02-04-config-opt-modebarButtons.html diff --git a/_posts/plotly_js/fundamentals/config-options/2018-02-04-config-opt-modebarButtons.html b/_posts/plotly_js/fundamentals/config-options/2018-02-04-config-opt-modebarButtons.html deleted file mode 100644 index 46d8c34b1dea..000000000000 --- a/_posts/plotly_js/fundamentals/config-options/2018-02-04-config-opt-modebarButtons.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -name: Remove Modebar Buttons -language: plotly_js -suite: configuration -order: 9 -sitemap: false -arrangement: horizontal ---- - -var trace1 = { - x:['trees', 'flowers', 'hedges'], - y: [90, 130, 40], - type: 'bar' -}; - -var data = [trace1]; -var layout = { - title: 'Remove Modebar Buttons', - showlegend: false}; -Plotly.newPlot('myDiv', data, layout, {modeBarButtonsToRemove: ['toImage']}); diff --git a/_posts/plotly_js/fundamentals/config-options/2020-01-24-add-button-to-modebar.html b/_posts/plotly_js/fundamentals/config-options/2020-01-24-add-button-to-modebar.html index d766e28a89a6..ca2f38e53bc2 100644 --- a/_posts/plotly_js/fundamentals/config-options/2020-01-24-add-button-to-modebar.html +++ b/_posts/plotly_js/fundamentals/config-options/2020-01-24-add-button-to-modebar.html @@ -1,26 +1,32 @@ --- name: Add Buttons to ModeBar -plot_url: https://codepen.io/plotly/embed/gObEmLr/?height=450&theme-id=15263&default-tab=result language: plotly_js suite: configuration order: 5.7 sitemap: false arrangement: horizontal markdown_content: | - The following example shows how to add a button to your modebar, either using one of the [Plotly icons](https://github.com/plotly/plotly.js/blob/master/src/fonts/ploticon.js) or an [arbitrary icon](https://fontawesome.com/icons?d=gallery&m=free) with a custom behaviour. + The following example shows how to add a button to your modebar, either by using one of the [Plotly icons](https://github.com/plotly/plotly.js/blob/master/src/fonts/ploticon.js) or an [arbitrary icon](https://fontawesome.com/icons?d=gallery&m=free) with a custom behaviour. --- var icon1 = { 'width': 500, 'height': 600, - 'path':'M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z'} + 'path': 'M224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64zm215.39-149.71c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71z' +} + var colors = ['green', 'red', 'blue'] + var data = [{ mode: 'lines', y: [2, 1, 2], - line: {color: colors[0], width: 3, shape: 'spline'}}] + line: {color: colors[0], width: 3, shape: 'spline'} +}] + var layout = { title: 'add mode bar button with custom icon', - modebardisplay: false} + modebardisplay: false +} + var config = { modeBarButtonsToAdd: [ { @@ -36,6 +42,7 @@ direction: 'up', click: function(gd) {alert('button1') }}], - modeBarButtonsToRemove: ['pan2d','select2d','lasso2d','resetScale2d','zoomOut2d']} + modeBarButtonsToRemove: ['pan2d','select2d','lasso2d','resetScale2d','zoomOut2d'] +} -Plotly.newPlot('graph', data, layout, config) \ No newline at end of file +Plotly.newPlot('myDiv', data, layout, config) \ No newline at end of file diff --git a/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html b/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html index 6a89f90b2dfc..123b08b380ba 100644 --- a/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html +++ b/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html @@ -1,20 +1,20 @@ --- name: Display the Modebar -plot_url: https://codepen.io/plotly/embed/jbMvLq/?height=450&theme-id=15263&default-tab=result language: plotly_js suite: configuration order: 4 sitemap: false arrangement: horizontal markdown_content: | - When you hover over the top right of a Plotly graph, a bar appears which we call it `modeBar`. To display or hide this modebar set `displayModeBar` in `config` to `true` or `false`. + When you hover over the top right of a figure generated with `plotly.js`, a bar appears which we call a `modeBar`. To display or hide this modebar set the `displayModeBar` attribute in the `config` of your figure to `true` or `false`, respectively. --- var data = { y:['Marc', 'Henrietta', 'Jean', 'Claude', 'Jeffrey', 'Jonathan', 'Jennifer', 'Zacharias'], x: [90, 40, 60, 80, 75, 92, 87, 73], type: 'bar', orientation: 'h' -}; +} -var layout = {title: 'Always Display the Modebar', showlegend: false}; -Plotly.newPlot('myDiv', data, layout, {displayModeBar: true}); +var layout = {title: 'Always Display the Modebar', showlegend: false} + +Plotly.newPlot('myDiv', data, layout, {displayModeBar: true}) diff --git a/_posts/plotly_js/fundamentals/config-options/2020-01-24-remove-modebarButtons.html b/_posts/plotly_js/fundamentals/config-options/2020-01-24-remove-modebarButtons.html index 977765566073..d87ea928fdf2 100644 --- a/_posts/plotly_js/fundamentals/config-options/2020-01-24-remove-modebarButtons.html +++ b/_posts/plotly_js/fundamentals/config-options/2020-01-24-remove-modebarButtons.html @@ -1,28 +1,27 @@ --- -name: Remove ModeBar Button -plot_url: https://codepen.io/plotly/embed/OQyEaP/?height=450&theme-id=15263&default-tab=result +name: Remove ModeBar Buttons language: plotly_js suite: configuration order: 5.5 sitemap: false arrangement: horizontal markdown_content: | - To delete buttons from the modebar, put buttons name in an array of string and pass it to 'modeBarButtonsToRemove' in config. Here is all the buttons' names: + To delete buttons from the modebar, pass an array of strings containing the names of the buttons you want to remove to the `modeBarButtonsToRemove` attribute in the figure's configuration object. Note that different chart types have different default modebars. The following is a list of all the modebar buttons and the chart types they are associated with:
    -
  • - 2D: zoom2d, pan2d, select2d, lasso2d, zoomIn2d, zoomOut2d, autoScale2d, resetScale2d
    • -
  • - 3D: zoom3d, pan3d, orbitRotation, tableRotation, handleDrag3d, resetCameraDefault3d, resetCameraLastSave3d, hoverClosest3d
    • -
  • - Cartesian: hoverClosestCartesian, hoverCompareCartesian
    • -
  • - Geo: zoomInGeo, zoomOutGeo, resetGeo, hoverClosestGeo
    • -
  • - Other: hoverClosestGl2d, hoverClosestPie, toggleHover, resetViews, "toImage", "sendDataToCloud", "toggleSpikelines", “resetViewMapbox"
    • +
  • - 2D: `zoom2d`, `pan2d`, `select2d`, `lasso2d`, `zoomIn2d`, `zoomOut2d`, `autoScale2d`, `resetScale2d`
    • +
  • - 3D: `zoom3d, `pan3d`, `orbitRotation`, `tableRotation`, `handleDrag3d`, resetCameraDefault3d, `resetCameraLastSave3d`, `hoverClosest3d`
    • +
  • - Cartesian: `hoverClosestCartesian, `hoverCompareCartesian`
    • +
  • - Geo: `zoomInGeo, `zoomOutGeo`, `resetGeo`, `hoverClosestGeo`
    • +
  • - Other: `hoverClosestGl2d`, `hoverClosestPie`, `toggleHover`, `resetViews`, toImage, `sendDataToCloud`, `toggleSpikelines`, `resetViewMapbox`
--- var data = { x:['trees', 'flowers', 'hedges'], y: [90, 130, 40], - type: 'bar'}; + type: 'bar'} var layout = { title: 'Remove Modebar Buttons', - showlegend: false}; + showlegend: false} -Plotly.newPlot('myDiv', data, layout, {modeBarButtonsToRemove: ['toImage']}); +Plotly.newPlot('myDiv', data, layout, {modeBarButtonsToRemove: ['toImage']}) From 22c0923c70c96324f494bfad6d7023624d8e10f2 Mon Sep 17 00:00:00 2001 From: Joseph Damiba Date: Fri, 24 Jan 2020 17:26:22 -0500 Subject: [PATCH 4/7] fixup inlined charts --- ...2015-09-24-config-opt-display-modebar.html | 23 ------------------- .../2020-01-24-display-modebar.html | 19 +++++++++------ .../2020-01-24-remove-modebarButtons.html | 18 +++++++++------ 3 files changed, 23 insertions(+), 37 deletions(-) delete mode 100644 _posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-display-modebar.html diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-display-modebar.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-display-modebar.html deleted file mode 100644 index 6c59e90cc275..000000000000 --- a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-display-modebar.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -name: Always Display the Modebar -language: plotly_js -suite: configuration -order: 4 -sitemap: false -arrangement: horizontal ---- -var trace1 = { - y:['Marc', 'Henrietta', 'Jean', 'Claude', 'Jeffrey', 'Jonathan', 'Jennifer', 'Zacharias'], - x: [90, 40, 60, 80, 75, 92, 87, 73], - type: 'bar', - orientation: 'h' -}; - -var data = [trace1]; - -var layout = { - title: 'Always Display the Modebar', - showlegend: false -}; - -Plotly.newPlot('myDiv', data, layout, {displayModeBar: true}); diff --git a/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html b/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html index 123b08b380ba..7ba50c3d05b5 100644 --- a/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html +++ b/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html @@ -1,5 +1,5 @@ --- -name: Display the Modebar +name: Always Display the Modebar language: plotly_js suite: configuration order: 4 @@ -8,13 +8,18 @@ markdown_content: | When you hover over the top right of a figure generated with `plotly.js`, a bar appears which we call a `modeBar`. To display or hide this modebar set the `displayModeBar` attribute in the `config` of your figure to `true` or `false`, respectively. --- -var data = { - y:['Marc', 'Henrietta', 'Jean', 'Claude', 'Jeffrey', 'Jonathan', 'Jennifer', 'Zacharias'], - x: [90, 40, 60, 80, 75, 92, 87, 73], - type: 'bar', - orientation: 'h' +var trace1 = { + y:['Marc', 'Henrietta', 'Jean', 'Claude', 'Jeffrey', 'Jonathan', 'Jennifer', 'Zacharias'], + x: [90, 40, 60, 80, 75, 92, 87, 73], + type: 'bar', + orientation: 'h' } + +var data = [trace1] -var layout = {title: 'Always Display the Modebar', showlegend: false} +var layout = { + title: 'Always Display the Modebar', + showlegend: false +} Plotly.newPlot('myDiv', data, layout, {displayModeBar: true}) diff --git a/_posts/plotly_js/fundamentals/config-options/2020-01-24-remove-modebarButtons.html b/_posts/plotly_js/fundamentals/config-options/2020-01-24-remove-modebarButtons.html index d87ea928fdf2..56112fbd57ac 100644 --- a/_posts/plotly_js/fundamentals/config-options/2020-01-24-remove-modebarButtons.html +++ b/_posts/plotly_js/fundamentals/config-options/2020-01-24-remove-modebarButtons.html @@ -15,13 +15,17 @@
  • - Other: `hoverClosestGl2d`, `hoverClosestPie`, `toggleHover`, `resetViews`, toImage, `sendDataToCloud`, `toggleSpikelines`, `resetViewMapbox`
    • --- -var data = { - x:['trees', 'flowers', 'hedges'], - y: [90, 130, 40], - type: 'bar'} +var trace1 = { + x:['trees', 'flowers', 'hedges'], + y: [90, 130, 40], + type: 'bar' +} + +var data = [trace1]; var layout = { - title: 'Remove Modebar Buttons', - showlegend: false} + title: 'Remove Modebar Buttons', + showlegend: false +} -Plotly.newPlot('myDiv', data, layout, {modeBarButtonsToRemove: ['toImage']}) +Plotly.newPlot('myDiv', data, layout, {modeBarButtonsToRemove: ['toImage']}); \ No newline at end of file From a700849a923d00f4fa0c45fe58aa14d603a75483 Mon Sep 17 00:00:00 2001 From: mahdis-z Date: Mon, 27 Jan 2020 14:38:53 -0500 Subject: [PATCH 5/7] minor revisions --- .../2015-09-24-config-opt-link-text.html | 20 +++++--------- .../2020-01-24-add-button-to-modebar.html | 7 ++--- .../2020-01-24-display-modebar.html | 12 +++------ .../2020-01-24-remove-modebarButtons.html | 26 ++++++++----------- 4 files changed, 24 insertions(+), 41 deletions(-) diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-link-text.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-link-text.html index 130d03bd3697..dced1b265f12 100644 --- a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-link-text.html +++ b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-link-text.html @@ -6,17 +6,11 @@ sitemap: false arrangement: horizontal --- -var trace1 = { - z: [[0, 1, 2, 3, 4, 5, 6], - [1, 9, 4, 7, 5, 2, 4], - [2, 4, 2, 1, 6, 9, 3]], - type: 'heatmap' - }; - - var data = [trace1]; +var data = [{ + z: [[0, 1, 2, 3, 4, 5, 6], + [1, 9, 4, 7, 5, 2, 4], + [2, 4, 2, 1, 6, 9, 3]], + type: 'heatmap'}] - var layout = { - title: 'Customize The Edit Chart Link Text' - }; - - Plotly.newPlot('myDiv', data, layout, {showLink: true, linkText: 'This text is custom!'}); \ No newline at end of file +var layout = {title: 'Customize The Edit Chart Link Text'} +Plotly.newPlot('myDiv', data, layout, {showLink: true, linkText: 'This text is custom!'}) \ No newline at end of file diff --git a/_posts/plotly_js/fundamentals/config-options/2020-01-24-add-button-to-modebar.html b/_posts/plotly_js/fundamentals/config-options/2020-01-24-add-button-to-modebar.html index ca2f38e53bc2..b40d4d9920dd 100644 --- a/_posts/plotly_js/fundamentals/config-options/2020-01-24-add-button-to-modebar.html +++ b/_posts/plotly_js/fundamentals/config-options/2020-01-24-add-button-to-modebar.html @@ -15,7 +15,6 @@ } var colors = ['green', 'red', 'blue'] - var data = [{ mode: 'lines', y: [2, 1, 2], @@ -24,8 +23,7 @@ var layout = { title: 'add mode bar button with custom icon', - modebardisplay: false -} + modebardisplay: false} var config = { modeBarButtonsToAdd: [ @@ -42,7 +40,6 @@ direction: 'up', click: function(gd) {alert('button1') }}], - modeBarButtonsToRemove: ['pan2d','select2d','lasso2d','resetScale2d','zoomOut2d'] -} + modeBarButtonsToRemove: ['pan2d','select2d','lasso2d','resetScale2d','zoomOut2d']} Plotly.newPlot('myDiv', data, layout, config) \ No newline at end of file diff --git a/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html b/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html index 7ba50c3d05b5..c15077b3dcf1 100644 --- a/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html +++ b/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html @@ -1,5 +1,5 @@ --- -name: Always Display the Modebar +name: Display Modebar language: plotly_js suite: configuration order: 4 @@ -8,18 +8,14 @@ markdown_content: | When you hover over the top right of a figure generated with `plotly.js`, a bar appears which we call a `modeBar`. To display or hide this modebar set the `displayModeBar` attribute in the `config` of your figure to `true` or `false`, respectively. --- -var trace1 = { +var data = [{ y:['Marc', 'Henrietta', 'Jean', 'Claude', 'Jeffrey', 'Jonathan', 'Jennifer', 'Zacharias'], x: [90, 40, 60, 80, 75, 92, 87, 73], type: 'bar', - orientation: 'h' -} - -var data = [trace1] + orientation: 'h'}] var layout = { title: 'Always Display the Modebar', - showlegend: false -} + showlegend: false} Plotly.newPlot('myDiv', data, layout, {displayModeBar: true}) diff --git a/_posts/plotly_js/fundamentals/config-options/2020-01-24-remove-modebarButtons.html b/_posts/plotly_js/fundamentals/config-options/2020-01-24-remove-modebarButtons.html index 56112fbd57ac..c0026066f223 100644 --- a/_posts/plotly_js/fundamentals/config-options/2020-01-24-remove-modebarButtons.html +++ b/_posts/plotly_js/fundamentals/config-options/2020-01-24-remove-modebarButtons.html @@ -7,25 +7,21 @@ arrangement: horizontal markdown_content: | To delete buttons from the modebar, pass an array of strings containing the names of the buttons you want to remove to the `modeBarButtonsToRemove` attribute in the figure's configuration object. Note that different chart types have different default modebars. The following is a list of all the modebar buttons and the chart types they are associated with: -
      -
    • - 2D: `zoom2d`, `pan2d`, `select2d`, `lasso2d`, `zoomIn2d`, `zoomOut2d`, `autoScale2d`, `resetScale2d`
      • -
    • - 3D: `zoom3d, `pan3d`, `orbitRotation`, `tableRotation`, `handleDrag3d`, resetCameraDefault3d, `resetCameraLastSave3d`, `hoverClosest3d`
      • -
    • - Cartesian: `hoverClosestCartesian, `hoverCompareCartesian`
      • -
    • - Geo: `zoomInGeo, `zoomOutGeo`, `resetGeo`, `hoverClosestGeo`
      • -
    • - Other: `hoverClosestGl2d`, `hoverClosestPie`, `toggleHover`, `resetViews`, toImage, `sendDataToCloud`, `toggleSpikelines`, `resetViewMapbox`
      • -
    +
      +
    • -'2D', `zoom2d`, `pan2d`, `select2d`, `lasso2d`, `zoomIn2d`, `zoomOut2d`, `autoScale2d`, `resetScale2d`
      • +
    • -'3D', `zoom3d`, `pan3d`, `orbitRotation`, `tableRotation`, `handleDrag3d`, `resetCameraDefault3d`, `resetCameraLastSave3d`, `hoverClosest3d`
      • +
    • -'Cartesian', `hoverClosestCartesian`, `hoverCompareCartesian`
      • +
    • -'Geo', `zoomInGeo`, `zoomOutGeo`, `resetGeo`, `hoverClosestGeo`
      • +
    • -'Other', `hoverClosestGl2d`, `hoverClosestPie`, `toggleHover`, `resetViews`, `toImage`, `sendDataToCloud`, `toggleSpikelines`, `resetViewMapbox`
      • +
    --- -var trace1 = { +var data = [{ x:['trees', 'flowers', 'hedges'], y: [90, 130, 40], - type: 'bar' -} - -var data = [trace1]; + type: 'bar'}] var layout = { title: 'Remove Modebar Buttons', - showlegend: false -} + showlegend: false} -Plotly.newPlot('myDiv', data, layout, {modeBarButtonsToRemove: ['toImage']}); \ No newline at end of file +Plotly.newPlot('myDiv', data, layout, {modeBarButtonsToRemove: ['toImage']}) \ No newline at end of file From 1103926ae932d745fffbff37828670803638a87d Mon Sep 17 00:00:00 2001 From: Joseph Damiba Date: Wed, 29 Jan 2020 15:22:00 -0500 Subject: [PATCH 6/7] update hide/show modebar doc --- .../config-options/2015-09-24-config-opt-hide-modebar.html | 6 +++++- .../config-options/2020-01-24-display-modebar.html | 6 ++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-hide-modebar.html b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-hide-modebar.html index 7a07028e7f3e..45d50391960e 100644 --- a/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-hide-modebar.html +++ b/_posts/plotly_js/fundamentals/config-options/2015-09-24-config-opt-hide-modebar.html @@ -1,10 +1,14 @@ --- -name: Hide the Modebar +name: Never Display The Modebar language: plotly_js suite: configuration order: 5 sitemap: false arrangement: horizontal +markdown_content: | + When users hover over a figure generated with `plotly.js`, a `modebar` appears in the top-right of the figure. This presents users with several options for interacting with the figure. + + By default, the `modebar` is only visible while the user is hovering over the chart. If you would like the `modebar` to never be visible, then set the `displayModeBar` attribute in the `config` of your figure to `false`. --- var trace1 = { x:['Zebras', 'Lions', 'Pelicans'], diff --git a/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html b/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html index 7ba50c3d05b5..62d84e2c47c9 100644 --- a/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html +++ b/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html @@ -1,12 +1,14 @@ --- -name: Always Display the Modebar +name: Prevent The Modebar From Disappearing language: plotly_js suite: configuration order: 4 sitemap: false arrangement: horizontal markdown_content: | - When you hover over the top right of a figure generated with `plotly.js`, a bar appears which we call a `modeBar`. To display or hide this modebar set the `displayModeBar` attribute in the `config` of your figure to `true` or `false`, respectively. + When users hover over a figure generated with `plotly.js`, a `modebar` appears in the top-right of the figure. This presents users with several options for interacting with the figure. + + By default, the `modebar` is only visible while the user is hovering over the chart. If you would like the `modebar` to always be visible regardless of whether or not the user is currently hovering over the figure, set the `displayModeBar` attribute in the `config` of your figure to `true`. --- var trace1 = { y:['Marc', 'Henrietta', 'Jean', 'Claude', 'Jeffrey', 'Jonathan', 'Jennifer', 'Zacharias'], From 3b876d71449393626e34d3f61a6902296011fdaf Mon Sep 17 00:00:00 2001 From: Joseph Damiba Date: Wed, 29 Jan 2020 15:25:44 -0500 Subject: [PATCH 7/7] change title of modebar doc --- .../fundamentals/config-options/2020-01-24-display-modebar.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html b/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html index b4316ed11152..3558dda7816d 100644 --- a/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html +++ b/_posts/plotly_js/fundamentals/config-options/2020-01-24-display-modebar.html @@ -1,5 +1,5 @@ --- -name: Prevent The Modebar From Disappearing +name: Force The Modebar to Always Be Visible language: plotly_js suite: configuration order: 4