CINXE.COM
Layout.images in R
<!DOCTYPE html> <html> <head> <!-- This page was last built at 2025-03-21 13:39 --> <meta charset="utf-8" /> <link rel="canonical" href="https://plotly.com/r/reference/layout/images/" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,500&display=swap" rel="stylesheet" /> <!-- Media query magic - http://stackoverflow.com/questions/19945658/my-iphone-thinks-its-980px-wide --> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="/all_static/javascripts/algolia/instantsearch.js"></script> <script src="/all_static/javascripts/algolia/polyfill.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script> const theme = localStorage.getItem('theme'); if (theme === "dark-mode") { var root = document.getElementsByTagName('html')[0]; // '0' to assign the first (and only `HTML` tag) root.setAttribute('class', 'dark-mode'); } </script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" crossorigin="anonymous"></script> <link href="https://esm.sh/@markprompt/css@0.18.0?css" rel="stylesheet" /> <link href="/all_static/css/markprompt.css" rel="stylesheet" /> <!-- //// Stylesheets --> <!-- Fonts --> <link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic|Ubuntu+Mono:400,700|Asap" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" /> <!-- Main Stylesheets --> <link rel="stylesheet" type="text/css" href="/all_static/css/main.css?version=false" /> <link rel="stylesheet" type="text/css" href="/all_static/css/improve.css?version=2025-03-21-13-39"> <!-- LOCAL DEV STYLESHEET --> <!--<link rel="stylesheet" type="text/css" href="http://api.plotly.dev/all_static/css/main.css">--> <!-- Icon --> <link rel="shortcut icon" href="https://dash.plotly.com/assets/favicon.ico" /> <!-- Google Tags--> <!-- Google Tag Manager Tag --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-N6T2RXG');</script> <!-- META TAGS --> <!-- Capture language --> <!-- Create a title --> <!-- Count number of plots on the page --> <!-- SEO Tags - title, meta_description --> <title> Layout.images in R </title> <meta name="description" content=Figure attribute reference for Plotly's R open-source graphing library.> <!-- Bing tags --> <meta name="msvalidate.01" content="D319859A832F9F1D15A7646E2A42150A" /> <!-- Facebook tags --> <meta property="og:title" content= Layout.images in R /> <meta property="og:type" content="website"/> <meta property="og:image" content="https://help.plot.ly/images/twitter-default.png"> <meta property="og:description" content=Figure attribute reference for Plotly's R open-source graphing library./> <meta property="og:url" /> <meta property="fb:admins" content="1123751525"/> <meta property="fb:admins" content="22418"/> <!-- twitter tags --> <meta name="twitter:card" content="photo" /> <meta name="twitter:title" content= Layout.images in R /> <meta name="twitter:url" content="https://plotly.com//r/reference/layout/images/"/> <meta name="twitter:description" content=Figure attribute reference for Plotly's R open-source graphing library./> <meta name="twitter:image" content="https://help.plot.ly/images/twitter-default.png"> <meta name="twitter:site" content="@plotlygraphs"/> </head> <body class="darkmode"> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N6T2RXG" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> <div class="menu-mobile"> <div class="switch-mode"> <div class="icon-dark"></div> <div class="switch"></div> <div class="icon-light"></div> </div> <div class="close-menu"></div> <ul> <li><a style="font-weight: bold;" href="https://community.plotly.com/c/plotly-r-matlab-julia-net/29">Forum</a> </li> <li><a style="font-weight: bold;" href="https://plotly.com/get-pricing/">Pricing</a></li> <li><a style="font-weight: bold;" href="https://dash.plotly.com">Dash</a></li> <!--<li><a style="font-weight: bold;" href="http://plotly.cloud">Dash Cloud</a></li>--> </ul> </div> <div class="header-container"> <header class="header-main --default"> <div class="--wrap"> <div class="--wrap-left"> <div class="-identity"> <a href="https://plotly.com/"><img src="/all_static/images/graphing_library_dark.svg" style="height: 30px;" class="logo-dark"></a> <a href="/graphing-libraries/"><img src="/all_static/images/graphing_library.svg" style="height: 30px;" class="logo-white"></a> </div> </div> <div class="--wrap-right"> <nav class="--nav-meta" role="navigation"> <ul> <li class="languages"> <a class="r"> <div class="icon"></div> R </a> <ul> <li> <a href="https://plotly.com/python/" class="python"> <div class="icon"></div>Python (v6.0.1) </a> </li> <li> <a href="https://plotly.com/r/" class="r"> <div class="icon"></div>R </a> </li> <li> <a href="https://plotly.com/julia/" class="julia"> <div class="icon"></div>Julia </a> </li> <li> <a href="https://plotly.com/javascript/" class="plotly_js"> <div class="icon"></div>Javascript (v3.0.1) </a> </li> <li> <a href="https://plotly.com/ggplot2/" class="ggplot2"> <div class="icon"></div>ggplot2 </a> </li> <li> <a href="https://plotly.com/matlab/" class="matlab"> <div class="icon"></div>MATLAB </a> </li> <li> <a href="https://plotly.com/fsharp/" class="fsharp"> <div class="icon"></div>F# </a> </li> <li> <a href="https://dash.plotly.com/" class="dash"> <div class="icon"></div>Dash </a> </li> </ul> </li> <li><a style="font-weight: bold;" href="https://community.plotly.com/c/plotly-r-matlab-julia-net/29">Forum</a> </li> <li><a style="font-weight: bold;" href="https://plotly.com/get-pricing/">Pricing</a></li> <li><a style="font-weight: bold;" href="https://dash.plotly.com">Dash</a></li> <!--<li><a style="font-weight: bold;" href="http://plotly.cloud">Dash Cloud</a></li>--> <iframe src="https://ghbtns.com/github-btn.html?user=plotly&repo=plotly.R&type=star&count=true&size=large" style="padding-top: 5px;" frameborder="0" scrolling="0" width="160px" height="40px"></iframe> </ul> <div class="switch-mode"> <div class="icon-dark"></div> <div class="switch"></div> <div class="icon-light"></div> </div> </nav> </div> <div class="menu-icon"> <span></span><span></span><span></span> </div> </div> </header> </div> <main class="--page page--single --index"> <div class="--wrap"> <!-- aside - Main Sidebar--> <!-- START OF GGPLOT CUSTOM LAYOUT --> <aside class="--sidebar-container"> <div class="--sidebar-fixed reference" data-spy="affix" id="where"> <div class="brand"> <a href="/graphing-libraries/"><img src="/all_static/images/graphing_library.svg" style="height: 30px;"></a> </div> <button id="modal-button" type="button" data-toggle="modal" data-target="#myModal"> <input id="modal-input" style="border-radius: 5px; width: 100%;" type="text" placeholder=" Search..." readonly /> </button> <details style="color: white; margin-top: 20px"> <summary>Simple Traces</summary> <nav class="--sidebar-body watch" id="where"> <ul class="--sidebar-list --ref"> <li class="--sidebar-item"> <a href="/r/reference/scatter">Scatter</a> </li> <li class="--sidebar-item"> <a href="/r/reference/scattergl">Scatter GL</a> </li> <li class="--sidebar-item"> <a href="/r/reference/bar">Bar</a> </li> <li class="--sidebar-item"> <a href="/r/reference/pie">Pie</a> </li> <li class="--sidebar-item"> <a href="/r/reference/heatmap">Heatmap</a> </li> <li class="--sidebar-item"> <a href="/r/reference/heatmapgl">Heatmap GL</a> </li> <li class="--sidebar-item"> <a href="/r/reference/image">Image</a> </li> <li class="--sidebar-item"> <a href="/r/reference/contour">Contour</a> </li> <li class="--sidebar-item"> <a href="/r/reference/table">Table</a> </li> </ul> </nav> </details> <details style="color: white; margin-top: 20px"> <summary>Distribution Traces</summary> <nav class="--sidebar-body watch" id="where"> <ul class="--sidebar-list --ref"> <li class="--sidebar-item"> <a href="/r/reference/box">Box</a> </li> <li class="--sidebar-item"> <a href="/r/reference/violin">Violin</a> </li> <li class="--sidebar-item"> <a href="/r/reference/histogram">Histogram</a> </li> <li class="--sidebar-item"> <a href="/r/reference/histogram2d">Histogram 2D</a> </li> <li class="--sidebar-item"> <a href="/r/reference/histogram2dcontour" >Histogram 2D Contour</a > </li> </ul> </nav> </details> <details style="color: white; margin-top: 20px"> <summary>Finance Traces</summary> <nav class="--sidebar-body watch" id="where"> <ul class="--sidebar-list --ref"> <li class="--sidebar-item"> <a href="/r/reference/ohlc">OHLC</a> </li> <li class="--sidebar-item"> <a href="/r/reference/candlestick">Candlestick</a> </li> <li class="--sidebar-item"> <a href="/r/reference/waterfall">Waterfall</a> </li> <li class="--sidebar-item"> <a href="/r/reference/funnel">Funnel</a> </li> <li class="--sidebar-item"> <a href="/r/reference/funnelarea">Funnel Area</a> </li> <li class="--sidebar-item"> <a href="/r/reference/indicator">Indicator</a> </li> </ul> </nav> </details> <details style="color: white; margin-top: 20px"> <summary>3D Traces</summary> <nav class="--sidebar-body watch" id="where"> <ul class="--sidebar-list --ref"> <li class="--sidebar-item"> <a href="/r/reference/scatter3d">Scatter 3D</a> </li> <li class="--sidebar-item"> <a href="/r/reference/surface">Surface</a> </li> <li class="--sidebar-item"> <a href="/r/reference/mesh3d">Mesh</a> </li> <li class="--sidebar-item"> <a href="/r/reference/cone">Cone</a> </li> <li class="--sidebar-item"> <a href="/r/reference/streamtube">Streamtube</a> </li> <li class="--sidebar-item"> <a href="/r/reference/volume">Volume</a> </li> <li class="--sidebar-item"> <a href="/r/reference/isosurface">Isosurface</a> </li> </ul> </nav> </details> <details style="color: white; margin-top: 20px"> <summary>Map Traces</summary> <nav class="--sidebar-body watch" id="where"> <ul class="--sidebar-list --ref"> <li class="--sidebar-item"> <a href="/r/reference/scattergeo">Scatter Geo</a> </li> <li class="--sidebar-item"> <a href="/r/reference/choropleth">Choropleth</a> </li> <li class="--sidebar-item"> <a href="/r/reference/scattermap">Scatter Map</a> </li> <li class="--sidebar-item"> <a href="/r/reference/scattermapbox">Scatter Mapbox</a> </li> <li class="--sidebar-item"> <a href="/r/reference/choroplethmap">Choropleth Map</a> </li> <li class="--sidebar-item"> <a href="/r/reference/choroplethmapbox">Choropleth Mapbox</a> </li> <li class="--sidebar-item"> <a href="/r/reference/densitymap">Density Map</a> </li> <li class="--sidebar-item"> <a href="/r/reference/densitymapbox">Density Mapbox</a> </li> </ul> </nav> </details> <details style="color: white; margin-top: 20px"> <summary>Specialized Traces</summary> <nav class="--sidebar-body watch" id="where"> <ul class="--sidebar-list --ref"> <li class="--sidebar-item"> <a href="/r/reference/scatterpolar">Scatter Polar</a> </li> <li class="--sidebar-item"> <a href="/r/reference/scatterpolargl">Scatter Polar GL</a> </li> <li class="--sidebar-item"> <a href="/r/reference/barpolar">Bar Polar</a> </li> <li class="--sidebar-item"> <a href="/r/reference/scatterternary">Scatter Ternary</a> </li> <li class="--sidebar-item"> <a href="/r/reference/scattersmith">Scatter Smith</a> </li> <li class="--sidebar-item"> <a href="/r/reference/sunburst">Sunburst</a> </li> <li class="--sidebar-item"> <a href="/r/reference/treemap">Treemap</a> </li> <li class="--sidebar-item"> <a href="/r/reference/icicle">Icicle</a> </li> <li class="--sidebar-item"> <a href="/r/reference/sankey">Sankey</a> </li> <li class="--sidebar-item"> <a href="/r/reference/splom">SPLOM</a> </li> <li class="--sidebar-item"> <a href="/r/reference/parcoords">Parallel Coordinates</a> </li> <li class="--sidebar-item"> <a href="/r/reference/parcats">Parallel Categories</a> </li> <li class="--sidebar-item"> <a href="/r/reference/carpet">Carpet</a> </li> <li class="--sidebar-item"> <a href="/r/reference/scattercarpet">Scatter Carpet</a> </li> <li class="--sidebar-item"> <a href="/r/reference/contourcarpet">Contour Carpet</a> </li> </ul> </nav> </details> <hr /> <details style="color: white; margin-top: 20px"> <summary>Layout</summary> <nav class="--sidebar-body watch" id="where"> <ul class="--sidebar-list --ref"> <li class="--sidebar-item"> <a href="/r/reference/layout/">Title</a> </li> <li class="--sidebar-item"> <a href="/r/reference/layout/#layout-showlegend">Legend</a> </li> <li class="--sidebar-item"> <a href="/r/reference/layout/#layout-margin">Margins</a> </li> <li class="--sidebar-item"> <a href="/r/reference/layout/#layout-autosize">Size</a> </li> <li class="--sidebar-item"> <a href="/r/reference/layout/#layout-font">Fonts</a> </li> <li class="--sidebar-item"> <a href="/r/reference/layout/#layout-paper_bgcolor" >Colors</a > </li> </ul> </nav> </details> <details style="color: white; margin-top: 20px"> <summary>Axes and Subplots</summary> <nav class="--sidebar-body watch" id="where"> <ul class="--sidebar-list --ref"> <li class="--sidebar-item"> <a href="/r/reference/layout/xaxis/">X Axis</a> </li> <li class="--sidebar-item"> <a href="/r/reference/layout/yaxis/">Y Axis</a> </li> <li class="--sidebar-item"> <a href="/r/reference/layout/ternary/">Ternary</a> </li> <li class="--sidebar-item"> <a href="/r/reference/layout/smith/">Smith</a> </li> <li class="--sidebar-item"> <a href="/r/reference/layout/scene/">3D Scene</a> </li> <li class="--sidebar-item"> <a href="/r/reference/layout/geo/">Geo</a> </li> <li class="--sidebar-item"> <a href="/r/reference/layout/mapbox/">Mapbox</a> </li> <li class="--sidebar-item"> <a href="/r/reference/layout/polar/">Polar</a> </li> <li class="--sidebar-item"> <a href="/r/reference/layout/coloraxis/">Color Axis</a> </li> </ul> </nav> </details> <details style="color: white; margin-top: 20px"> <summary>Layers</summary> <nav class="--sidebar-body watch" id="where"> <ul class="--sidebar-list --ref"> <li class="--sidebar-item"> <a href="/r/reference/layout/annotations/">Annotations</a> </li> <li class="--sidebar-item"> <a href="/r/reference/layout/shapes/">Shapes</a> </li> <li class="--sidebar-item"> <a href="/r/reference/layout/selections/">Selections</a> </li> <li class="--sidebar-item"> <a href="/r/reference/layout/images/">Images</a> </li> <li class="--sidebar-item"> <a href="/r/reference/layout/sliders/">Sliders</a> </li> <li class="--sidebar-item"> <a href="/r/reference/layout/updatemenus/">Update Menus</a> </li> </ul> </nav> </details> </div> <a href="https://go.plotly.com/elevate-your-analytics?utm_source=Webinar:%20Dash%20Enterprise%205.7&utm_medium=graphing_libraries&utm_content=sidebar" target="_blank"> <img src="https://images.prismic.io/plotly-marketing-website-2/Z9mL0DiBA97Gimoh_Square_ads.jpg?auto=format,compress" style="width: 200px; height: 200px; position: fixed; bottom: 10px; left: 50px" alt="Sign up for the upcoming webinar: Elevate Your Analytics with Plotly Dash Enterprise 5.7"> </a> </aside> <!-- Main--> <section class="--page-body --tutorial-index"> <div class="nav-breadcrumb-container"> <div> <div class="breadcrumb-nav"> <a href="/r"> R </a> > <a href="/r/reference/index/">Figure Reference</a> > <span>layout.images</span> </div> </div> </div> <!-- Start pulling content --> <h2>R Figure Reference: <code>layout.images</code></h2> <div class="row"> <div class="eight columns" style="max-width: 900px;"> <ul> <li> <a class="attribute-name" id="layout-images" href="#layout-images"> images </a> <br><em>Parent:</em> <code>layout</code> <br><em>Type:</em> list of named list where each named list has one or more of the keys listed below. <!--This will break if there ever more than one type of item in in items - but for now it's just "shape" and "annotation"--> <ul> <li> <a class="attribute-name" id="layout-images-items-image-layer" href="#layout-images-items-image-layer"> layer </a> <br><em>Parent:</em> <code>layout.images[]</code> <br /> <em>Type:</em> enumerated , one of ( <code>"below"</code> | <code>"above"</code> ) <br><em>Default:</em> <code>"above"</code> <p>Specifies whether images are drawn below or above traces. When `xref` and `yref` are both set to `paper`, image is drawn below the entire plot area.</p> </li> <li> <a class="attribute-name" id="layout-images-items-image-name" href="#layout-images-items-image-name"> name </a> <br><em>Parent:</em> <code>layout.images[]</code> <br /> <em>Type:</em> string <p>When used in a template, named items are created in the output figure in addition to any items the figure already has in this array. You can modify these items in the output figure by making your own item with `templateitemname` matching this `name` alongside your modifications (including `visible: FALSE` or `enabled: FALSE` to hide it). Has no effect outside of a template.</p> </li> <li> <a class="attribute-name" id="layout-images-items-image-opacity" href="#layout-images-items-image-opacity"> opacity </a> <br><em>Parent:</em> <code>layout.images[]</code> <br /> <em>Type:</em> number between or equal to 0 and 1 <br><em>Default:</em> <code>1</code> <p>Sets the opacity of the image.</p> </li> <li> <a class="attribute-name" id="layout-images-items-image-sizex" href="#layout-images-items-image-sizex"> sizex </a> <br><em>Parent:</em> <code>layout.images[]</code> <br /> <em>Type:</em> number <br><em>Default:</em> <code>0</code> <p>Sets the image container size horizontally. The image will be sized based on the `position` value. When `xref` is set to `paper`, units are sized relative to the plot width. When `xref` ends with ` domain`, units are sized relative to the axis width.</p> </li> <li> <a class="attribute-name" id="layout-images-items-image-sizey" href="#layout-images-items-image-sizey"> sizey </a> <br><em>Parent:</em> <code>layout.images[]</code> <br /> <em>Type:</em> number <br><em>Default:</em> <code>0</code> <p>Sets the image container size vertically. The image will be sized based on the `position` value. When `yref` is set to `paper`, units are sized relative to the plot height. When `yref` ends with ` domain`, units are sized relative to the axis height.</p> </li> <li> <a class="attribute-name" id="layout-images-items-image-sizing" href="#layout-images-items-image-sizing"> sizing </a> <br><em>Parent:</em> <code>layout.images[]</code> <br /> <em>Type:</em> enumerated , one of ( <code>"fill"</code> | <code>"contain"</code> | <code>"stretch"</code> ) <br><em>Default:</em> <code>"contain"</code> <p>Specifies which dimension of the image to constrain.</p> </li> <li> <a class="attribute-name" id="layout-images-items-image-source" href="#layout-images-items-image-source"> source </a> <br><em>Parent:</em> <code>layout.images[]</code> <br /> <em>Type:</em> string <p>Specifies the URL of the image to be used. The URL must be accessible from the domain where the plot code is run, and can be either relative or absolute.</p> </li> <li> <a class="attribute-name" id="layout-images-items-image-templateitemname" href="#layout-images-items-image-templateitemname"> templateitemname </a> <br><em>Parent:</em> <code>layout.images[]</code> <br /> <em>Type:</em> string <p>Used to refer to a named item in this array in the template. Named items from the template will be created even without a matching item in the input figure, but you can modify one by making an item with `templateitemname` matching its `name`, alongside your modifications (including `visible: FALSE` or `enabled: FALSE` to hide it). If there is no template or no matching item, this item will be hidden unless you explicitly show it with `visible: TRUE`.</p> </li> <li> <a class="attribute-name" id="layout-images-items-image-visible" href="#layout-images-items-image-visible"> visible </a> <br><em>Parent:</em> <code>layout.images[]</code> <br /> <em>Type:</em> boolean <br><em>Default:</em> <code>TRUE</code> <p>Determines whether or not this image is visible.</p> </li> <li> <a class="attribute-name" id="layout-images-items-image-x" href="#layout-images-items-image-x"> x </a> <br><em>Parent:</em> <code>layout.images[]</code> <br /> <em>Type:</em> number or categorical coordinate string <br><em>Default:</em> <code>0</code> <p>Sets the image's x position. When `xref` is set to `paper`, units are sized relative to the plot height. See `xref` for more info</p> </li> <li> <a class="attribute-name" id="layout-images-items-image-xanchor" href="#layout-images-items-image-xanchor"> xanchor </a> <br><em>Parent:</em> <code>layout.images[]</code> <br /> <em>Type:</em> enumerated , one of ( <code>"left"</code> | <code>"center"</code> | <code>"right"</code> ) <br><em>Default:</em> <code>"left"</code> <p>Sets the anchor for the x position</p> </li> <li> <a class="attribute-name" id="layout-images-items-image-xref" href="#layout-images-items-image-xref"> xref </a> <br><em>Parent:</em> <code>layout.images[]</code> <br /> <em>Type:</em> enumerated , one of ( <code>"paper"</code> | <code>"/^x([2-9]|[1-9][0-9]+)?( domain)?$/"</code> ) <br><em>Default:</em> <code>"paper"</code> <p>Sets the images's x coordinate axis. If set to a x axis id (e.g. "x" or "x2"), the `x` position refers to a x coordinate. If set to "paper", the `x` position refers to the distance from the left of the plotting area in normalized coordinates where "0" ("1") corresponds to the left (right). If set to a x axis ID followed by "domain" (separated by a space), the position behaves like for "paper", but refers to the distance in fractions of the domain length from the left of the domain of that axis: e.g., "x2 domain" refers to the domain of the second x axis and a x position of 0.5 refers to the point between the left and the right of the domain of the second x axis.</p> </li> <li> <a class="attribute-name" id="layout-images-items-image-y" href="#layout-images-items-image-y"> y </a> <br><em>Parent:</em> <code>layout.images[]</code> <br /> <em>Type:</em> number or categorical coordinate string <br><em>Default:</em> <code>0</code> <p>Sets the image's y position. When `yref` is set to `paper`, units are sized relative to the plot height. See `yref` for more info</p> </li> <li> <a class="attribute-name" id="layout-images-items-image-yanchor" href="#layout-images-items-image-yanchor"> yanchor </a> <br><em>Parent:</em> <code>layout.images[]</code> <br /> <em>Type:</em> enumerated , one of ( <code>"top"</code> | <code>"middle"</code> | <code>"bottom"</code> ) <br><em>Default:</em> <code>"top"</code> <p>Sets the anchor for the y position.</p> </li> <li> <a class="attribute-name" id="layout-images-items-image-yref" href="#layout-images-items-image-yref"> yref </a> <br><em>Parent:</em> <code>layout.images[]</code> <br /> <em>Type:</em> enumerated , one of ( <code>"paper"</code> | <code>"/^y([2-9]|[1-9][0-9]+)?( domain)?$/"</code> ) <br><em>Default:</em> <code>"paper"</code> <p>Sets the images's y coordinate axis. If set to a y axis id (e.g. "y" or "y2"), the `y` position refers to a y coordinate. If set to "paper", the `y` position refers to the distance from the bottom of the plotting area in normalized coordinates where "0" ("1") corresponds to the bottom (top). If set to a y axis ID followed by "domain" (separated by a space), the position behaves like for "paper", but refers to the distance in fractions of the domain length from the bottom of the domain of that axis: e.g., "y2 domain" refers to the domain of the second y axis and a y position of 0.5 refers to the point between the bottom and the top of the domain of the second y axis.</p> </li> </ul> </li> </ul> </div> </div> <!--End content --> </section> </div> </main> <footer class="--footer-main"> <section class="--footer-top"> <div class="--wrap"> <ul class="--footer-body"> <li class="--footer-column"> <h6 style="color:#119dff" class="--footer-heading">JOIN OUR MAILING LIST</h6>			 <ul> 				 <li> <p class="subscribe-text"> Sign up to stay in the loop with all things Plotly — from Dash Club to product updates, webinars, and more!</p> <a href="https://go.plot.ly/subscription" class="subscribe-button" target="_blank"> Subscribe </a> </li> </ul> </li> 		 <li class="--footer-column"> <h6 style="color:#e763fa" class="--footer-heading">Products</h6>			 <ul> <li><a href="https://plotly.com/dash/" target="_self">Dash</a></li> 				 				 <li><a href="https://plotly.com/consulting-and-oem/" target="_self">Consulting and Training</a></li> </ul> </li> 		 <li class="--footer-column"> <h6 style="color:#636efa" class="--footer-heading">Pricing</h6>			 <ul> <li><a href="https://plotly.com/get-pricing/" target="_self">Enterprise Pricing</a></li> 				 </ul> </li> 		 <li class="--footer-column"> <h6 style="color:#00cc96" class="--footer-heading">About Us</h6>			 <ul> <li><a href="https://plotly.com/careers" target="_self">Careers</a></li> 				 <li><a href="https://plotly.com/resources/" target="_self">Resources</a></li> 				 <li><a href="https://medium.com/@plotlygraphs" target="_self">Blog</a></li> 				 </ul> </li> 		 <li class="--footer-column"> <h6 style="color:#EF553B" class="--footer-heading">Support</h6>			 <ul> <li><a href="https://community.plot.ly/" target="_self">Community Support</a></li> 				 <li><a href="https://plotly.com/graphing-libraries" target="_self">Documentation</a></li> 				 </ul> </li> </ul> </div> </section> <section class="--footer-meta"> <div class="--wrap"> <div class="left"> <article class="--copyright">Copyright © 2025 Plotly. All rights reserved.</article> </div> <div class="right"> <article class="--tos"><a href="https://community.plotly.com/tos" target="_blank">Terms of Service</a> </article> <article class="--privacy"><a href="https://plotly.com/privacy/" target="_blank">Privacy Policy</a> </article> </div> </div> <div id="markprompt" /> </section> </footer> <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content" id="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <span style="float: left; padding-top:13px; padding-right:10px;"><i class="fa fa-search fa-lg"></i></span> <input id="search-input" class="search-input" type="text" placeholder="" /> </div> <div class="modal-body" id="modal-body"> <div id="search-results" class="search-results"> <div id="primary-search-results" class="primary-search-results"></div> <div id="schema-search-results" class="schema-search-results"></div> </div> </div> </div> </div> </div> <script> window.plotly_doc_language = "r"; </script> <!-- ALGOLIA SEARCH --> <script> window.ALGOLIA_CONFIG = { 'applicationId': '7EK9KHJW8M', 'indexName': 'r_docs', 'apiKey': '4dae07ded6a721de73bde7356eec9280', 'baseurl': '/' } </script> <script id="algolia__template" type="text/template"> <div class="algolia__result"> <a class="algolia__result-link" onClick="$('#myModal').modal('toggle')" href="/{{ permalink }}">{{{ _highlightResult.name.value }}}</a> <div class="algolia__result-text">{{{ _highlightResult.description.value }}}</div> </div> </script> <script id="algolia__secondary-template" type="text/template"> <div class="algolia__secondary-result"> <a class="algolia__result-link" onClick="$('#myModal').modal('toggle')" href="/{{ permalink }}">{{{ _highlightResult.name.value }}}</a> <div class="algolia__result-text">{{{ _highlightResult.description.value }}}</div> </div> </script> <script id="algolia__template--no-results" type="text/template">No results found.</script> <script src="//cdn.jsdelivr.net/hogan.js/3.0.2/hogan.min.js"></script> <script src="/all_static/javascripts/algolia/algolia.js"></script> <!-- Hash offset Script --> <script src="/all_static//javascripts/hash_offset.js"></script> <!-- Image Hover Script --> <script src="/all_static/javascripts/imghover.js"></script> <script src="/all_static/javascripts/improve.js?version=2025-03-21-13-39"></script> <!-- code highlighting --> <!--<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script> <script src="/all_static/javascripts/highlight.line-numbers.js"></script>--> <script src="/all_static/javascripts/highlight/highlight.min.js"></script> <script src="/all_static/javascripts/highlight/julia.min.js"></script> <script src="/all_static/javascripts/highlight.line-numbers.js"></script> </body> </html>