Plotly javascript graphing library in JavaScript

<!DOCTYPE html> <html> <head>  <meta charset="utf-8" /> <link rel="canonical" href="https://plotly.com/javascript/" /> <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" />  <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" />   <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" />  <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-35">    <link rel="shortcut icon" href="https://dash.plotly.com/assets/favicon.ico" />   <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>      <title> Plotly javascript graphing library in JavaScript </title> <meta name="description" content=A free open source interactive javascript graphing library. Plotly.js is built on d3.js and webgl and supports over 20 types of interactive charts.>  <meta name="msvalidate.01" content="D319859A832F9F1D15A7646E2A42150A" />  <meta property="og:title" content= Plotly javascript graphing library in JavaScript /> <meta property="og:type" content="website"/> <meta property="og:image" content="https://help.plot.ly/images/twitter-default.png"> <meta property="og:description" content=A free open source interactive javascript graphing library. Plotly.js is built on d3.js and webgl and supports over 20 types of interactive charts./> <meta property="og:url" /> <meta property="fb:admins" content="1123751525"/> <meta property="fb:admins" content="22418"/>  <meta name="twitter:card" content="photo" /> <meta name="twitter:title" content= Plotly javascript graphing library in JavaScript /> <meta name="twitter:url" content="https://plotly.com//javascript/"/> <meta name="twitter:description" content=A free open source interactive javascript graphing library. Plotly.js is built on d3.js and webgl and supports over 20 types of interactive charts./> <meta name="twitter:image" content="https://help.plot.ly/images/twitter-default.png"> <meta name="twitter:site" content="@plotlygraphs"/> </head> <body class="darkmode">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N6T2RXG" height="0" width="0" style="display:none;visibility:hidden"></iframe></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-js/6">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>  </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="plotly_js"> <div class="icon"></div> Javascript (v3.0.1) </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-js/6">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>  <iframe src="https://ghbtns.com/github-btn.html?user=plotly&repo=plotly.js&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 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;" open > <summary>Quick Reference</summary> <nav class="--sidebar-body watch" id="where"> <ul class="--sidebar-list" style="margin-left: 15px;">  <li class="--sidebar-item"> <a href="/javascript/getting-started" class="js-splash--navigation-item">Getting Started</a> </li> <li class="--sidebar-item"> <a href="/javascript/is-plotly-free" class="js-splash--navigation-item">Is Plotly Free?</a> </li>  <li class="--sidebar-item"> <a href="/javascript/reference/index/" class="js-splash--navigation-item">Figure Reference</a> </li>   <li class="--sidebar-item"> <a href="/javascript/plotlyjs-function-reference/" class="js-splash--navigation-item">Function Reference</a> </li> <li class="--sidebar-item"> <a href="/javascript/plotlyjs-events" class="js-splash--navigation-item">Event Reference</a> </li> <li class="--sidebar-item"> <a href="/javascript/configuration-options/" class="js-splash--navigation-item">Configuration Options</a> </li>     <li class="--sidebar-item"> <a target="_blank" href="https://github.com/plotly/plotly.js/" class="js-splash--navigation-item">GitHub</a> </li> <li class="--sidebar-item"> <a target="_blank" href="http://community.plotly.com/" class="js-splash--navigation-item">community.plotly.com</a> </li> </ul> </nav> </details>  <details style="color: white;margin-top: 20px;" open> <summary>Examples</summary> <nav class="--sidebar-body watch" id="where"> <ul class="--sidebar-list" style="margin-left: 15px;"> <li class="--sidebar-item"> <a href="/javascript/plotly-fundamentals/" class="js-splash--navigation-item">Fundamentals</a> </li> <li class="--sidebar-item"> <a href="/javascript/basic-charts/" class="js-splash--navigation-item">Basic Charts</a> </li> <li class="--sidebar-item"> <a href="/javascript/statistical-charts/" class="js-splash--navigation-item">Statistical Charts</a> </li> <li class="--sidebar-item"> <a href="/javascript/scientific-charts/" class="js-splash--navigation-item">Scientific Charts</a> </li> <li class="--sidebar-item"> <a href="/javascript/financial-charts/" class="js-splash--navigation-item">Financial Charts</a> </li> <li class="--sidebar-item"> <a href="/javascript/maps/" class="js-splash--navigation-item">Maps</a> </li> <li class="--sidebar-item"> <a href="/javascript/3d-charts/" class="js-splash--navigation-item">3D Charts</a> </li> <li class="--sidebar-item"> <a href="/javascript/subplot-charts/" class="js-splash--navigation-item">Subplots</a> </li> <li class="--sidebar-item"> <a href="/javascript/#chart-events" class="js-splash--navigation-item">Chart Events</a> </li> <li class="--sidebar-item"> <a href="/javascript/#animations" class="js-splash--navigation-item">Animations</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>  <section class="--page-body --tutorial-index"> <div class="nav-breadcrumb-container"> <div> <div class="breadcrumb-nav"> </div> </div> </div>  <script src="//cdn.plot.ly/plotly-3.0.1.min.js"></script> <header class="--welcome"> <div class="--welcome-body">  <div class="--title"> <div class="--body"> <h1>Plotly JavaScript Open Source Graphing Library</h1> <p> Built on top of <a target="_blank" href="https://d3js.org/">d3.js</a> and <a target="_blank" href="https://github.com/stackgl">stack.gl</a>, Plotly.js is a high-level, declarative charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps. <br>plotly.js is <a href="/javascript/is-plotly-free">free and open source</a> and you can <a target="_blank" href="https://github.com/plotly/plotly.js">view the source, report issues or contribute on GitHub</a>. </p> </div> </div> <div class="--title"> <div class="--body"> <div class="dash-plug"> <p>Deploy Plotly_js AI Dash apps on private Kubernetes clusters: <a href="/get-pricing/">Pricing</a>  |  <a href="/get-demo/">Demo</a>  |  <a href="/dash/">Overview</a>  |  <a href="/consulting-and-oem/">AI App Services</a> </p> </div> <br> <details> <summary>Read more about plotly.js features</summary> <section class="tutorial-content --tutorial-index --base"> <div class="js-splash--feature-block"> <div class="block-title"> Sophisticated chart types </div> <div class="block-content"> <code>plotly.js</code> abstracts the types of statistical and scientific charts that you would find in packages like matplotlib, ggplot2, or MATLAB. </div>  <div style="border: 1px solid #C2C2C2; width: 100%; text-align: center;"> <a class="image-link" style="display: inline-block;" href="https://plotly.com/~mdtusz/72.embed"><img style="width: 100%" src="https://images.plot.ly/plotly-documentation/images/turbulence-simulation.jpg"/></a> </div> <pre><code class="js-splash--code-block">d3.json('https://plotly.com/~DanielCarrera/13.json', function(figure){ var trace = { x: figure.data[0].x, y: figure.data[0].y, z: figure.data[0].z, type: 'contour', autocolorscale: false, colorscale: [[0,"rgb( 0, 0, 0)"],[0.3,"rgb(230, 0, 0)"],[0.6,"rgb(255,210, 0)"],[1,"rgb(255,255,255)"]], reversescale: true, zmax: 2.5, zmin: -2.5 }; var layout = { title: { text: 'turbulence simulation' }, xaxis: { title: { text: 'radial direction' }, showline: true, mirror: 'allticks', ticks: 'inside' }, yaxis: { title: { text: 'vertical direction' }, showline: true, mirror: 'allticks', ticks: 'inside' }, margin: {l: 40, b: 40, t: 60}, annotations: [{ showarrow: false, text: 'Credit: <a target="_blank" href="https://plotly.com/~DanielCarrera">Daniel Carrera</a>', x: 0, y: 0, xref: 'paper', yref: 'paper' }] } Plotly.newPlot(document.getElementById('contour-plot'), [trace], layout, {showLink: false}); });</code></pre> <div class="block-title">Fully customizable</div> <div class="block-content"> <code>plotly.js</code> charts are described declaratively as JSON objects. Every aspect of the charts, such as colors, grid lines, and the legend, has a corresponding set of JSON attributes. <div style=" padding-top: 15px; padding-bottom: 10px; text-align: right; height: 30px;"> <a style="float: right" target="_blank" href="https://plotly.com/javascript/reference">view all of the available attributes</a> </div> </div> <pre><code class="js-splash--code-block">d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/wind_speed_laurel_nebraska.csv', function(rows){ var trace = { type: 'scatter', // set the chart type mode: 'lines', // connect points with lines x: rows.map(function(row){ // set the x-data return row['Time']; }), y: rows.map(function(row){ // set the x-data return row['10 Min Sampled Avg']; }), line: { // set the width of the line. width: 1 }, error_y: { array: rows.map(function(row){ // set the height of the error bars return row['10 Min Std Dev']; }), thickness: 0.5, // set the thickness of the error bars width: 0 } }; var layout = { yaxis: { title: { text: "Wind Speed" } }, // set the y axis title xaxis: { showgrid: false, // remove the x-axis grid lines tickformat: "%B, %Y" // customize the date format to "month, day" }, margin: { // update the left, bottom, right, top margin l: 40, b: 10, r: 10, t: 20 } }; Plotly.newPlot(document.getElementById('wind-speed'), [trace], layout, {showLink: false}); });</code></pre> <div class="block-title">High performance</div> <div style="width: 100%" class="block-content"> <div class="js-splash--inline-text-header"> Most plotly graphs are drawn with SVG. This offers great compatibility across browsers and publication-quality vector image export. Unfortunately, there are inherent performance limitations with the number of SVG elements that you can draw in the DOM.<br><br> <code>plotly.js</code> uses <a target="_blank" href="http://stack.gl">stack.gl</a> for high performance 2D and 3D charting.<br><br> </div> <div style="position: relative;" class="row"> <div class="js-splash--inline-image-left"> <a class="image-link" style="display: inline-block;" href="https://plotly.com/~chris/17389.embed"><img style="width: 100%" src="https://images.plot.ly/plotly-documentation/images/hue-value-vs.jpg"/></a> </div> <div class="js-splash--inline-text-right"> This chart was drawn with the <code>plotly.js</code> chart type <code>scattergl</code>. <code>scattergl</code> charts render an order of magnitude faster than their SVG counterparts.<br> </div> </div> <div style="position: relative; width: 100%" class="row"> <div class="js-splash--inline-image-right"> <a class="image-link" style="display: inline-block; width: 100%;" href="https://plotly.com/~chriddyp/1780.embed"> <img style="width: 100%;" src="https://images.plot.ly/plotly-documentation/images/surface-plot.jpg"/> </a> </div> <div class="js-splash--inline-text-left"> All 3D charts in <code>plotly.js</code> are rendered with WebGL, leveraging the power of the GPU for fast interactivity. <a class="js-splash--chart-link" target="_blank" href="https://plotly.com/~chris/17389.embed">view the interactive version</a> </div> </div> </div> <div class="block-title">Universal</div> <div class="block-content"> By abstracting charts to a declarative JSON structure, <code>plotly.js</code> is used as a browser-based charting library for <a target="_blank" href="https://plotly.com/python/">Python</a>, <a target="_blank" href="https://plotly.com/r/">R</a>, <a target="_blank" href="https://plotly.com/matlab/">MATLAB</a>. </div> </div> </section> </details> </div> </div> </div> </header> <section class="--tutorial-section"> <header class="--section-header"> <a href="#fundamentals" name="fundamentals" id="fundamentals">Fundamentals</a> <a href="/javascript/plotly-fundamentals" class="langindexlink">More Fundamentals »</a> </header> <section class="--grid"> <ul class="--grid-list"> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/modebar-icons.png);" class="--grid-item"> <a href="/javascript/configuration-options/"> <div class="--item-meta"><span>Configuration Options</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/modebar-icons.png" alt="Configuration Options"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/fluid-layout.gif);" class="--grid-item"> <a href="/javascript/responsive-fluid-layout/"> <div class="--item-meta"><span>Responsive / Fluid Layouts</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/fluid-layout.gif" alt="Responsive / Fluid Layouts"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/uirevision.gif);" class="--grid-item"> <a href="/javascript/uirevision/"> <div class="--item-meta"><span>uirevision in Plotly.react</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/uirevision.gif" alt="uirevision in Plotly.react"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/react.png);" class="--grid-item"> <a href="/javascript/react/"> <div class="--item-meta"><span>React Plotly.js</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/react.png" alt="React Plotly.js"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/dash_apps.png);" class="--grid-item"> <a href="https://dash.plotly.com/?/"> <div class="--item-meta"><span>Analytical Apps with Dash</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/dash_apps.png" alt="Analytical Apps with Dash"> </div> </a> </li> </ul> </section> </section> <section class="--tutorial-section"> <header class="--section-header"> <a href="#basic-charts" id="basic-charts">Basic Charts</a> <a href="/javascript/basic-charts/" class="langindexlink">More Basic Charts »</a> </header> <section class="--grid"> <ul class="--grid-list"> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/line-and-scatter.jpg);" class="--grid-item"> <a href="/javascript/line-and-scatter/"> <div class="--item-meta"><span>Scatter Plots</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/line-and-scatter.jpg" alt="Scatter Plots"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/line-plots.jpg);" class="--grid-item"> <a href="/javascript/line-charts/"> <div class="--item-meta"><span>Line Charts</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/line-plots.jpg" alt="Line Charts"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/bar.jpg);" class="--grid-item"> <a href="/javascript/bar-charts/"> <div class="--item-meta"><span>Bar Charts</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/bar.jpg" alt="Bar Charts"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/pie-chart.jpg);" class="--grid-item"> <a href="/javascript/pie-charts/"> <div class="--item-meta"><span>Pie Charts</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/pie-chart.jpg" alt="Pie Charts"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/bubble.jpg);" class="--grid-item"> <a href="/javascript/bubble-charts/"> <div class="--item-meta"><span>Bubble Charts</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/bubble.jpg" alt="Bubble Charts"> </div> </a> </li> </ul> </section> </section> <section class="--tutorial-section"> <header class="--section-header"> <a href="#statistical-charts" id="statistical-charts">Statistical Charts</a> <a href="/javascript/statistical-charts/" class="langindexlink">More Statistical Charts »</a> </header> <section class="--grid"> <ul class="--grid-list"> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/error-bar.jpg);" class="--grid-item"> <a href="/javascript/error-bars/"> <div class="--item-meta"><span>Error Bars</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/error-bar.jpg" alt="Error Bars"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/box.jpg);" class="--grid-item"> <a href="/javascript/box-plots/"> <div class="--item-meta"><span>Box Plots</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/box.jpg" alt="Box Plots"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/histogram.jpg);" class="--grid-item"> <a href="/javascript/histograms/"> <div class="--item-meta"><span>Histograms</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/histogram.jpg" alt="Histograms"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/2d-density-plot.jpg);" class="--grid-item"> <a href="/javascript/2d-density-plots/"> <div class="--item-meta"><span>2d Density Plots</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/2d-density-plot.jpg" alt="2d Density Plots"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/error-cont.jpg);" class="--grid-item"> <a href="/javascript/continuous-error-bars/"> <div class="--item-meta"><span>Continuous Error Bars</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/error-cont.jpg" alt="Continuous Error Bars"> </div> </a> </li> </ul> </section> </section> <section class="--tutorial-section" id="scientific-charts"> <header class="--section-header"> <a href="#scientific-charts">Scientific Charts</a> <a href="/javascript/scientific-charts/" class="langindexlink">More Scientific Charts »</a> </header> <section class="--grid"> <ul class="--grid-list"> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/contour.jpg);" class="--grid-item"> <a href="/javascript/contour-plots/"> <div class="--item-meta"><span>Contour Plots</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/contour.jpg" alt="Contour Plots"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/heatmap.jpg);" class="--grid-item"> <a href="/javascript/heatmaps/"> <div class="--item-meta"><span>Heatmaps</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/heatmap.jpg" alt="Heatmaps"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/ternary-plot.jpg);" class="--grid-item"> <a href="/javascript/ternary-plots/"> <div class="--item-meta"><span>Ternary Plots</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/ternary-plot.jpg" alt="Ternary Plots"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/parcoords.jpg);" class="--grid-item"> <a href="/javascript/parallel-coordinates-plot/"> <div class="--item-meta"><span>Parallel Coordinates Plot</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/parcoords.jpg" alt="Parallel Coordinates Plot"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/log.jpg);" class="--grid-item"> <a href="/javascript/log-plot/"> <div class="--item-meta"><span>Log Plots</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/log.jpg" alt="Log Plots"> </div> </a> </li> </ul> </section> </section> <section class="--tutorial-section" id="financial-charts"> <header class="--section-header"> <a href="#financial-charts">Financial Charts</a> <a href="/javascript/financial-charts/" class="langindexlink">More Financial Charts »</a> </header> <section class="--grid"> <ul class="--grid-list"> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/waterfall-charts.jpg);" class="--grid-item"> <a href="/javascript/waterfall-charts/"> <div class="--item-meta"><span>Waterfall Charts</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/waterfall-charts.jpg" alt="Waterfall Charts"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/indicator.jpg);" class="--grid-item"> <a href="/javascript/indicator/"> <div class="--item-meta"><span>Indicators</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/indicator.jpg" alt="Indicators"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/candlestick.jpg);" class="--grid-item"> <a href="/javascript/candlestick-charts/"> <div class="--item-meta"><span>Candlestick Charts</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/candlestick.jpg" alt="Candlestick Charts"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/funnel.jpg);" class="--grid-item"> <a href="/javascript/funnel-charts/"> <div class="--item-meta"><span>Funnel and Funnelarea Charts</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/funnel.jpg" alt="Funnel and Funnelarea Charts"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/time-series.jpg);" class="--grid-item"> <a href="/javascript/time-series/"> <div class="--item-meta"><span>Time Series</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/time-series.jpg" alt="Time Series"> </div> </a> </li> </ul> </section> </section> <section class="--tutorial-section" id="maps"> <header class="--section-header"> <a href="#maps">Maps</a> <a href="/javascript/maps/" class="langindexlink">More Maps »</a> </header> <section class="--grid"> <ul class="--grid-list"> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/area.jpg);" class="--grid-item"> <a href="/javascript/maplibre-migration/"> <div class="--item-meta"><span>Migrate to Maplibre</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/area.jpg" alt="Migrate to Maplibre"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/mapbox-layers.png);" class="--grid-item"> <a href="/javascript/tile-map-layers/"> <div class="--item-meta"><span>Tile Map Layers</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/mapbox-layers.png" alt="Tile Map Layers"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/mapbox-density.png);" class="--grid-item"> <a href="/javascript/tile-density-heatmaps/"> <div class="--item-meta"><span>Tile Density Heatmap</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/mapbox-density.png" alt="Tile Density Heatmap"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/mapbox-choropleth.png);" class="--grid-item"> <a href="/javascript/tile-county-choropleth/"> <div class="--item-meta"><span>Choropleth Tile Map</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/mapbox-choropleth.png" alt="Choropleth Tile Map"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/flight-paths.jpg);" class="--grid-item"> <a href="/javascript/lines-on-maps/"> <div class="--item-meta"><span>Lines on Maps</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/flight-paths.jpg" alt="Lines on Maps"> </div> </a> </li> </ul> </section> </section> <section class="--tutorial-section" id="3d-charts"> <header class="--section-header"> <a href="#3d-charts">3D Charts</a> <a href="/javascript/3d-charts/" class="langindexlink">More 3D Charts »</a> </header> <section class="--grid"> <ul class="--grid-list"> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/3d-scatter.jpg);" class="--grid-item"> <a href="/javascript/3d-scatter-plots/"> <div class="--item-meta"><span>3D Scatter Plots</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/3d-scatter.jpg" alt="3D Scatter Plots"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/ribbon-plot.jpg);" class="--grid-item"> <a href="/javascript/ribbon-plots/"> <div class="--item-meta"><span>Ribbon Plots</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/ribbon-plot.jpg" alt="Ribbon Plots"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/3d-surface.jpg);" class="--grid-item"> <a href="/javascript/3d-surface-plots/"> <div class="--item-meta"><span>3D Surface Plots</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/3d-surface.jpg" alt="3D Surface Plots"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/3d-mesh.jpg);" class="--grid-item"> <a href="/javascript/3d-mesh/"> <div class="--item-meta"><span>3D Mesh Plots</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/3d-mesh.jpg" alt="3D Mesh Plots"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/3d-line.jpg);" class="--grid-item"> <a href="/javascript/3d-line-plots/"> <div class="--item-meta"><span>3D Line Plots</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/3d-line.jpg" alt="3D Line Plots"> </div> </a> </li> </ul> </section> </section> <section class="--tutorial-section" id="multiple-axes-subplots-and-insets"> <header class="--section-header"> <a href="#subplot-charts" name="subplot-charts" id="subplot-charts">Subplots</a> <a href="/javascript/subplot-charts/" class="langindexlink">More Subplots »</a> </header> <section class="--grid"> <ul class="--grid-list"> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/subplots.jpg);" class="--grid-item"> <a href="/javascript/subplots/"> <div class="--item-meta"><span>Subplots</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/subplots.jpg" alt="Subplots"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/insets.jpg);" class="--grid-item"> <a href="/javascript/insets/"> <div class="--item-meta"><span>Inset Plots</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/insets.jpg" alt="Inset Plots"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/3d-subplots.jpg);" class="--grid-item"> <a href="/javascript/3d-subplots/"> <div class="--item-meta"><span>3D Subplots</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/3d-subplots.jpg" alt="3D Subplots"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/mixed_subplot.JPG);" class="--grid-item"> <a href="/javascript/mixed-subplots/"> <div class="--item-meta"><span>Mixed Subplots</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/mixed_subplot.JPG" alt="Mixed Subplots"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/table_subplots.jpg);" class="--grid-item"> <a href="/javascript/table-subplots/"> <div class="--item-meta"><span>Table Subplots</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/table_subplots.jpg" alt="Table Subplots"> </div> </a> </li> </ul> </section> </section> <section class="--tutorial-section" id="custom-chart-events"> <header class="--section-header"> <a href="#custom-chart-events">Custom Chart Events</a> </header> <section class="--grid"> <ul class="--grid-list"> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/click.jpg);" class="--grid-item"> <a href="/javascript/click-events/"> <div class="--item-meta"><span>Click Events</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/click.jpg" alt="Click Events"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/hover.jpg);" class="--grid-item"> <a href="/javascript/hover-events/"> <div class="--item-meta"><span>Hover Events</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/hover.jpg" alt="Hover Events"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/zoom.jpg);" class="--grid-item"> <a href="/javascript/zoom-events/"> <div class="--item-meta"><span>Zoom Events</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/zoom.jpg" alt="Zoom Events"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/zoom.jpg);" class="--grid-item"> <a href="/javascript/disable-zoom/"> <div class="--item-meta"><span>Disable Zoom Events</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/zoom.jpg" alt="Disable Zoom Events"> </div> </a> </li> </ul> </section> </section> <section class="--tutorial-section" id="controls"> <header class="--section-header"> <a href="#controls">Add Custom Controls</a> <a href="/javascript/controls/" class="langindexlink">More Controls »</a> </header> <section class="--grid"> <ul class="--grid-list"> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/dropdown.jpg);" class="--grid-item"> <a href="/javascript/dropdowns/"> <div class="--item-meta"><span>Dropdown Events</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/dropdown.jpg" alt="Dropdown Events"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/custom-buttons.jpg);" class="--grid-item"> <a href="/javascript/custom-buttons/"> <div class="--item-meta"><span>Button Events</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/custom-buttons.jpg" alt="Button Events"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/slider-component.jpg);" class="--grid-item"> <a href="/javascript/sliders/"> <div class="--item-meta"><span>Slider Events</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/slider-component.jpg" alt="Slider Events"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/lasso.jpg);" class="--grid-item"> <a href="/javascript/lasso-selection/"> <div class="--item-meta"><span>Lasso Selection</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/lasso.jpg" alt="Lasso Selection"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/sliders.jpg);" class="--grid-item"> <a href="/javascript/range-slider/"> <div class="--item-meta"><span>Range Slider and Selector</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/sliders.jpg" alt="Range Slider and Selector"> </div> </a> </li> </ul> </section> </section> <section class="--tutorial-section" id="animations"> <header class="--section-header"> <a href="#animations">Animations</a> </header> <section class="--grid"> <ul class="--grid-list"> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/animations.gif);" class="--grid-item"> <a href="/javascript/animations/"> <div class="--item-meta"><span>Animations</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/animations.gif" alt="Animations"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/gapminder_animation.gif);" class="--grid-item"> <a href="/javascript/gapminder-example/"> <div class="--item-meta"><span>Adding Sliders to Animations</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/gapminder_animation.gif" alt="Adding Sliders to Animations"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/apple_stock_animation.gif);" class="--grid-item"> <a href="/javascript/filled-area-animation/"> <div class="--item-meta"><span>Filled-Area Animation</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/apple_stock_animation.gif" alt="Filled-Area Animation"> </div> </a> </li> <li style="background-image: url(https://images.plot.ly/plotly-documentation/thumbnail/map-animation.gif);" class="--grid-item"> <a href="/javascript/map-animations/"> <div class="--item-meta"><span>Map Animation</span></div> <div class="--item-image"> <span>View Tutorial</span> <img src="https://images.plot.ly/plotly-documentation/thumbnail/map-animation.gif" alt="Map Animation"> </div> </a> </li> </ul> </section> </section>  <a href="https://dash.plotly.com/tutorial?utm_medium=graphing_libraries&utm_content=javascript_footer"><img width="100%" style="margin-top: 20px;" src="/all_static/images/dash_2023.png" /></a> </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 = "plotly_js"; </script>  <script> window.ALGOLIA_CONFIG = { 'applicationId': '7EK9KHJW8M', 'indexName': 'js_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>  <script src="/all_static//javascripts/hash_offset.js"></script>  <script src="/all_static/javascripts/imghover.js"></script> <script src="/all_static/javascripts/improve.js?version=2025-03-21-13-35"></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>

CINXE.COM

Plotly javascript graphing library in JavaScript