---

name: Customize Hover for Spikelines

plot_url: https://codepen.io/plotly/embed/NOgjrR/?height=500&theme-id=15263&default-tab=result

language: plotly_js

suite: 3d-hover

order: 1

sitemap: false

arrangement: horizontal

markdown_content: |

By default, Plotly's 3D plots display lines called "spikelines" while hovering over a point.

These lines project from the hover point to each of the three axes' normal planes and

then extend from those projection data points to the planes' wall boundaries.

---

function getrandom(num , mul)

{

var value = [ ];

for(i=0;i<=num;i++)

{

var rand = Math.random() * mul;

value.push(rand);

}

return value;

}

var data=[

{

opacity:0.4,

type: 'scatter3d',

x: getrandom(50 , -75),

y: getrandom(50 , -75),

z: getrandom(50 , -75),

},

];

var layout = {

scene:{

xaxis: {

spikecolor: '#1fe5bd',

spikesides: false,

spikethickness: 6

},

yaxis: {

spikecolor: '#1fe5bd',

spikesides: false,

spikethickness: 6

},

zaxis: {

spikecolor: '#1fe5bd',

spikethickness: 6

}

},

};

Plotly.newPlot('myDiv', data, layout);

---

name: Customize Hover for Surface Contours

plot_url: https://codepen.io/plotly/embed/qJjmbQ/?height=500&theme-id=15263&default-tab=result

language: plotly_js

suite: 3d-hover

order: 2

sitemap: false

arrangement: horizontal

markdown_content: |

In addition to spikelines, Plotly 3D Surface plots also display surface contours on hover by default.

These are customized by styling the [`contours`](https://plot.ly/javascript/reference/#surface-contours)

attribute in the surface trace.

---

x = [10,20,30,40]

y = [0,1,2,3]

z = [

[2,2,2,3],

[1,1,1,1],

[1,1,0,0],

[0,0,0,0]

];

var data=[

{

opacity:0.9,

type: 'surface',

x:x, y:y, z:z,

contours: {

x: {

highlight: true,

highlightcolor: "#41a7b3"

},

y: { highlight: false },

z: { highlight: false}

}

},

];

var layout = {

scene:{

xaxis: { showspikes: false },

yaxis: { showspikes: false },

zaxis: { showspikes: false }

},

};

Plotly.newPlot('myDiv', data, layout);

---

title: Javascript Graphing Library D3.js-based Charts with 3d Hover Options | Examples | Plotly

name: 3D Hover Options

permalink: javascript/3d-hover/

description: How to customize hover options for 3d charts.

layout: base

language: plotly_js

page_type: example_index

has_thumbnail: false

display_as: layout_opt

---

{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","3d-hover" | sort: "order" %}

{% include auto_examples.html examples=examples %}

---

permalink: python/3d-hover/

description: How to customize 3d hover options in python with Plotly.

name: Python 3D Hover Options | Plotly

has_thumbnail: true

thumbnail: thumbnail/3d-hover-options.jpg

layout: user-guide

name: 3D Hover Options

language: python

title: Python 3D Hover Options | Plotly

display_as: layout_opt

has_thumbnail: false

page_type: example_index

order: 19

ipynb: ~notebook_demo/257

---

{% raw %}

<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">

<div class="inner_cell">

<div class="text_cell_render border-box-sizing rendered_html">

<h4 id="New-to-Plotly?">New to Plotly?<a class="anchor-link" href="#New-to-Plotly?">&#182;</a></h4><p>Plotly's Python library is free and open source! <a href="https://plot.ly/python/getting-started/">Get started</a> by downloading the client and <a href="https://plot.ly/python/getting-started/">reading the primer</a>.

<br>You can set up Plotly to work in <a href="https://plot.ly/python/getting-started/#initialization-for-online-plotting">online</a> or <a href="https://plot.ly/python/getting-started/#initialization-for-offline-plotting">offline</a> mode, or in <a href="https://plot.ly/python/getting-started/#start-plotting-online">jupyter notebooks</a>.

<br>We also have a quick-reference <a href="https://images.plot.ly/plotly-documentation/images/python_cheat_sheet.pdf">cheatsheet</a> (new!) to help you get started!</p>

<div class="cell border-box-sizing code_cell rendered">

<div class="input">

<div class="prompt input_prompt">In&nbsp;[1]:</div>

<div class="inner_cell">

<div class="input_area">

<div class=" highlight hl-ipython2"><pre><span></span><span class="kn">import</span> <span class="nn">plotly.plotly</span> <span class="kn">as</span> <span class="nn">py</span>

<span class="kn">import</span> <span class="nn">plotly.graph_objs</span> <span class="kn">as</span> <span class="nn">go</span>

<span class="kn">import</span> <span class="nn">pandas</span> <span class="kn">as</span> <span class="nn">pd</span>

<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">

<div class="inner_cell">

<div class="text_cell_render border-box-sizing rendered_html">

<h4 id="Customize-Hover-for-Spikelines">Customize Hover for Spikelines<a class="anchor-link" href="#Customize-Hover-for-Spikelines">&#182;</a></h4><p>By default, Plotly's 3D plots display lines called "spikelines" while hovering over a point.

These lines project from the hover point to each of the three axes' normal planes and

then extend from those projection data points to the planes' wall boundaries.</p>

<div class="cell border-box-sizing code_cell rendered">

<div class="input">

<div class="prompt input_prompt">In&nbsp;[2]:</div>

<div class="inner_cell">

<div class="input_area">

<div class=" highlight hl-ipython2"><pre><span></span><span class="kn">import</span> <span class="nn">plotly.plotly</span> <span class="kn">as</span> <span class="nn">py</span>

<span class="kn">import</span> <span class="nn">plotly.graph_objs</span> <span class="kn">as</span> <span class="nn">go</span>

<span class="kn">import</span> <span class="nn">numpy</span> <span class="kn">as</span> <span class="nn">np</span>

<span class="n">data</span> <span class="o">=</span> <span class="p">[</span><span class="n">go</span><span class="o">.</span><span class="n">Scatter3d</span><span class="p">(</span>

<span class="n">x</span><span class="o">=</span><span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">randn</span><span class="p">(</span><span class="mi">50</span><span class="p">),</span>

<span class="n">y</span><span class="o">=</span><span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">randn</span><span class="p">(</span><span class="mi">50</span><span class="p">),</span>

<span class="n">z</span><span class="o">=</span><span class="n">np</span><span class="o">.</span><span class="n">random</span><span class="o">.</span><span class="n">randn</span><span class="p">(</span><span class="mi">50</span><span class="p">),</span>

<span class="p">)]</span>

<span class="n">layout</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">Layout</span><span class="p">(</span>

<span class="n">scene</span><span class="o">=</span><span class="n">go</span><span class="o">.</span><span class="n">layout</span><span class="o">.</span><span class="n">Scene</span><span class="p">(</span>

<span class="n">xaxis</span><span class="o">=</span><span class="n">go</span><span class="o">.</span><span class="n">layout</span><span class="o">.</span><span class="n">scene</span><span class="o">.</span><span class="n">XAxis</span><span class="p">(</span>

<span class="n">spikecolor</span><span class="o">=</span><span class="s1">&#39;#1fe5bd&#39;</span><span class="p">,</span>

<span class="n">spikesides</span><span class="o">=</span><span class="bp">False</span><span class="p">,</span>

<span class="n">spikethickness</span><span class="o">=</span><span class="mi">6</span><span class="p">,</span>

<span class="p">),</span>

<span class="n">yaxis</span><span class="o">=</span><span class="n">go</span><span class="o">.</span><span class="n">layout</span><span class="o">.</span><span class="n">scene</span><span class="o">.</span><span class="n">YAxis</span><span class="p">(</span>

<span class="n">spikecolor</span><span class="o">=</span><span class="s1">&#39;#1fe5bd&#39;</span><span class="p">,</span>

<span class="n">spikesides</span><span class="o">=</span><span class="bp">False</span><span class="p">,</span>

<span class="n">spikethickness</span><span class="o">=</span><span class="mi">6</span><span class="p">,</span>

<span class="p">),</span>

<span class="n">zaxis</span><span class="o">=</span><span class="n">go</span><span class="o">.</span><span class="n">layout</span><span class="o">.</span><span class="n">scene</span><span class="o">.</span><span class="n">ZAxis</span><span class="p">(</span>

<span class="n">spikecolor</span><span class="o">=</span><span class="s1">&#39;#1fe5bd&#39;</span><span class="p">,</span>

<span class="n">spikethickness</span><span class="o">=</span><span class="mi">6</span><span class="p">,</span>

<span class="p">),</span>

<span class="p">)</span>

<span class="p">)</span>

<span class="n">fig</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">Figure</span><span class="p">(</span><span class="n">data</span><span class="o">=</span><span class="n">data</span><span class="p">,</span> <span class="n">layout</span><span class="o">=</span><span class="n">layout</span><span class="p">)</span>

<span class="n">py</span><span class="o">.</span><span class="n">iplot</span><span class="p">(</span><span class="n">fig</span><span class="p">,</span> <span class="n">filename</span><span class="o">=</span><span class="s1">&#39;hover-spikelines&#39;</span><span class="p">)</span>

<div class="output_wrapper">

<div class="output">

<div class="output_area">

<div class="prompt output_prompt">Out[2]:</div>

<div class="output_html rendered_html output_subarea output_execute_result">

<iframe id="igraph" scrolling="no" style="border:none;" seamless="seamless" src="https://plot.ly/~PythonPlotBot/2829.embed" height="525px" width="100%"></iframe>

<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">

<div class="inner_cell">

<div class="text_cell_render border-box-sizing rendered_html">

<h4 id="Customize-Hover-for-Surface-Contours">Customize Hover for Surface Contours<a class="anchor-link" href="#Customize-Hover-for-Surface-Contours">&#182;</a></h4><p>In addition to spikelines, Plotly 3D Surface plots also display surface contours on hover by default.

These are customized by styling the <a href="https://plot.ly/python/reference/#surface-contours"><code>contours</code></a>

attribute in the surface trace.</p>

<div class="cell border-box-sizing code_cell rendered">

<div class="input">

<div class="prompt input_prompt">In&nbsp;[3]:</div>

<div class="inner_cell">

<div class="input_area">

<div class=" highlight hl-ipython2"><pre><span></span><span class="kn">import</span> <span class="nn">plotly.plotly</span> <span class="kn">as</span> <span class="nn">py</span>

<span class="kn">import</span> <span class="nn">plotly.graph_objs</span> <span class="kn">as</span> <span class="nn">go</span>

<span class="n">x</span> <span class="o">=</span> <span class="p">[</span><span class="mi">10</span><span class="p">,</span><span class="mi">20</span><span class="p">,</span><span class="mi">30</span><span class="p">,</span><span class="mi">40</span><span class="p">]</span>

<span class="n">y</span> <span class="o">=</span> <span class="p">[</span><span class="mi">0</span><span class="p">,</span><span class="mi">1</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">]</span>

<span class="n">z</span> <span class="o">=</span> <span class="p">[[</span><span class="mi">2</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">2</span><span class="p">,</span><span class="mi">3</span><span class="p">],</span>

<span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">1</span><span class="p">,</span><span class="mi">1</span><span class="p">,</span><span class="mi">1</span><span class="p">],</span>

<span class="p">[</span><span class="mi">1</span><span class="p">,</span><span class="mi">1</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">],</span>

<span class="p">[</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">,</span><span class="mi">0</span><span class="p">]]</span>

<span class="n">data</span> <span class="o">=</span> <span class="p">[</span><span class="n">go</span><span class="o">.</span><span class="n">Surface</span><span class="p">(</span>

<span class="n">opacity</span><span class="o">=</span><span class="mf">0.9</span><span class="p">,</span>

<span class="n">x</span><span class="o">=</span><span class="n">x</span><span class="p">,</span>

<span class="n">y</span><span class="o">=</span><span class="n">y</span><span class="p">,</span>

<span class="n">z</span><span class="o">=</span><span class="n">z</span><span class="p">,</span>

<span class="n">contours</span><span class="o">=</span><span class="n">go</span><span class="o">.</span><span class="n">surface</span><span class="o">.</span><span class="n">Contours</span><span class="p">(</span>

<span class="n">x</span><span class="o">=</span><span class="n">go</span><span class="o">.</span><span class="n">surface</span><span class="o">.</span><span class="n">contours</span><span class="o">.</span><span class="n">X</span><span class="p">(</span>

<span class="n">highlight</span><span class="o">=</span><span class="bp">True</span><span class="p">,</span>

<span class="n">highlightcolor</span><span class="o">=</span><span class="s2">&quot;#41a7b3&quot;</span><span class="p">,</span>

<span class="p">),</span>

<span class="n">y</span><span class="o">=</span><span class="n">go</span><span class="o">.</span><span class="n">surface</span><span class="o">.</span><span class="n">contours</span><span class="o">.</span><span class="n">Y</span><span class="p">(</span><span class="n">highlight</span><span class="o">=</span><span class="bp">False</span><span class="p">),</span>

<span class="n">z</span><span class="o">=</span><span class="n">go</span><span class="o">.</span><span class="n">surface</span><span class="o">.</span><span class="n">contours</span><span class="o">.</span><span class="n">Z</span><span class="p">(</span><span class="n">highlight</span><span class="o">=</span><span class="bp">False</span><span class="p">),</span>

<span class="p">)</span>

<span class="p">)]</span>

<span class="n">layout</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">Layout</span><span class="p">(</span>

<span class="n">scene</span><span class="o">=</span><span class="n">go</span><span class="o">.</span><span class="n">layout</span><span class="o">.</span><span class="n">Scene</span><span class="p">(</span>

<span class="n">xaxis</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">layout</span><span class="o">.</span><span class="n">scene</span><span class="o">.</span><span class="n">XAxis</span><span class="p">(</span><span class="n">showspikes</span><span class="o">=</span><span class="bp">False</span><span class="p">),</span>

<span class="n">yaxis</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">layout</span><span class="o">.</span><span class="n">scene</span><span class="o">.</span><span class="n">YAxis</span><span class="p">(</span><span class="n">showspikes</span><span class="o">=</span><span class="bp">False</span><span class="p">),</span>

<span class="n">zaxis</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">layout</span><span class="o">.</span><span class="n">scene</span><span class="o">.</span><span class="n">ZAxis</span><span class="p">(</span><span class="n">showspikes</span><span class="o">=</span><span class="bp">False</span><span class="p">),</span>

<span class="p">)</span>

<span class="p">)</span>

<span class="n">fig</span> <span class="o">=</span> <span class="n">go</span><span class="o">.</span><span class="n">Figure</span><span class="p">(</span><span class="n">data</span><span class="o">=</span><span class="n">data</span><span class="p">,</span> <span class="n">layout</span><span class="o">=</span><span class="n">layout</span><span class="p">)</span>

<span class="n">py</span><span class="o">.</span><span class="n">iplot</span><span class="p">(</span><span class="n">fig</span><span class="p">,</span> <span class="n">filename</span><span class="o">=</span><span class="s1">&#39;hover-surface-contours&#39;</span><span class="p">)</span>

<div class="output_wrapper">

<div class="output">

<div class="output_area">

<div class="prompt output_prompt">Out[3]:</div>

<div class="output_html rendered_html output_subarea output_execute_result">

<iframe id="igraph" scrolling="no" style="border:none;" seamless="seamless" src="https://plot.ly/~PythonPlotBot/2831.embed" height="525px" width="100%"></iframe>

<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">

<div class="inner_cell">

<div class="text_cell_render border-box-sizing rendered_html">

<h4 id="Reference">Reference<a class="anchor-link" href="#Reference">&#182;</a></h4>

<div class="cell border-box-sizing text_cell rendered"><div class="prompt input_prompt">

<div class="inner_cell">

<div class="text_cell_render border-box-sizing rendered_html">

<p>See <a href="https://plot.ly/python/reference/#layout-scene">https://plot.ly/python/reference/#layout-scene</a> and <a href="https://plot.ly/python/reference/#surface-contours">https://plot.ly/python/reference/#surface-contours</a> for more information and options!</p>

{% endraw %}