CINXE.COM
ScottPlot 5.0 Demo
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ScottPlot 5.0 Demo</title> <meta name="description" content="A click-to-run application demonstrating ScottPlot's capabilities"> <link rel="canonical" href="https://ScottPlot.NET/demo/5.0/" /> <link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" href="/images/brand/favicon.svg" type="image/svg+xml"> <link rel="apple-touch-icon" href="/images/brand/favicon-180.png"> <link rel="manifest" href="/images/brand/manifest.webmanifest"> <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml"> <meta name="theme-color" content="#67217A" /> <meta property="og:url" content="https://ScottPlot.NET"> <meta property="og:type" content="website"> <meta property="og:title" content="ScottPlot 5.0 Demo"> <meta property="og:description" content="A click-to-run application demonstrating ScottPlot's capabilities"> <meta property="og:image" content="/images/brand/banner.jpg"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <script src="/js/anchor.js"></script> <script src="/js/recipe.js?20250128"></script> <link rel="stylesheet" href="/css/accordian.css?20231209"> <link rel="stylesheet" href="/css/stats.css?20231209"> <link rel="stylesheet" href="/css/page.css?20231209"> <link rel="stylesheet" href="/css/github.css?20240321"> <link rel="stylesheet" href="/css/contributors.css?20241125b"> <link rel="stylesheet" href="/css/highlightjs/vs2015.css?20241101"> <script src="/js/highlight.min.js"></script> <link rel="stylesheet" href="/css/recipe.css?20250123"> </head> <body onload="scrollToUrlAnchor()"> <header> <div style="background-color: #67217a;"> <div class="content-limited-width"> <div class="d-flex justify-content-between show-when-large pt-3 px-2"> <div class="d-flex"> <div class="me-2 mt-1"> <a href="/"> <img class="" src='/images/brand/favicon.svg' width="56" height="56" /> </a> </div> <div class="mt-1"> <a class="text-light lh-1" href="/" style="font-size: 1.8em;"> ScottPlot.NET </a> <div class=""> <div id="githubinfo"> <a href="https://github.com/scottplot/scottplot" id="githubinfo-repo" class="align-bottom"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" /> </svg> <span class="align-middle"> ScottPlot </span> </a> <a href="https://github.com/scottplot/scottplot" class="align-middle" id="githubinfo-stars"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z" /> </svg> <span class="align-middle"> 6,942 </span> </a> <a href="https://github.com/scottplot/scottplot" class="align-middle" id="githubinfo-forks"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z" /> </svg> <span class="align-middle"> 420 </span> </a> </div> <script> function updateGitHubInfoData() { const isDevEnvironment = window.location.href.includes("localhost:"); const repoUrl = isDevEnvironment ? '/test/scottplot.json' : 'https://api.github.com/repos/scottplot/scottplot'; document.getElementById("githubinfo-repo").style.opacity = .55; fetch(repoUrl) .then(response => response.ok ? response.json() : null) .then(data => { if (data) { document.getElementById("githubinfo-stars").getElementsByTagName("span")[0].innerText = data.stargazers_count.toLocaleString(); document.getElementById("githubinfo-stars").style.opacity = .55; document.getElementById("githubinfo-forks").getElementsByTagName("span")[0].innerText = data.forks_count.toLocaleString(); document.getElementById("githubinfo-forks").style.opacity = .55; document } else { console.log("GitHubInfo: Error reading JSON"); } }); } setTimeout(updateGitHubInfoData, 50); </script> </div> </div> </div> <div> <a href="https://github.com/scottplot/scottplot/"> <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/scottplot/scottplot" id="starImg"> </a> </div> </div> <nav class="navbar navbar-expand-md"> <div class="container-fluid"> <div class="navbar-brand d-flex align-items-center show-when-small"> <a href="/"> <img src="https://scottplot.net/images/brand/favicon.svg" width="32" height="32" class="me-2"> </img> </a> <div class="fs-4"> <a href="/">ScottPlot.NET</a> </div> </div> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5" /> </svg> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="/quickstart/" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Quickstart </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li> <a class="dropdown-item" href="/quickstart/console/"> Console Application </a> </li> <li> <a class="dropdown-item" href="/quickstart/winforms/"> Windows Forms </a> </li> <li> <a class="dropdown-item" href="/quickstart/wpf/"> WPF </a> </li> <li> <a class="dropdown-item" href="/quickstart/winui/"> WinUI </a> </li> <li> <a class="dropdown-item" href="/quickstart/maui/"> MAUI </a> </li> <li> <a class="dropdown-item" href="/quickstart/unoplatform/"> Uno Platform </a> </li> <li> <a class="dropdown-item" href="/quickstart/avalonia/"> Avalonia </a> </li> <li> <a class="dropdown-item" href="/quickstart/eto/"> Eto </a> </li> <li> <a class="dropdown-item" href="/quickstart/api/"> .NET Core API </a> </li> <li> <a class="dropdown-item" href="/quickstart/blazor/"> Blazor WASM </a> </li> <li> <a class="dropdown-item" href="/quickstart/powershell/"> PowerShell </a> </li> <li> <a class="dropdown-item" href="/quickstart/notebook/"> .NET Notebook </a> </li> <li> <a class="dropdown-item" href="/quickstart/ironpython/"> IronPython </a> </li> <li> <hr class="dropdown-divider"> </li> <li> <a class="dropdown-item" href="/quickstart/console/"> C# </a> </li> <li> <a class="dropdown-item" href="/quickstart/fsharp/"> F# </a> </li> <li> <a class="dropdown-item" href="/quickstart/vb/"> VB </a> </li> </ul> </li> <li class="nav-item"> <a class=" nav-link" href="/cookbook/5.0/"> Cookbook </a> </li> <li class="nav-item"> <a class="nav-link" href="/demo/5.0/"> Demo </a> </li> <li class="nav-item"> <a class="nav-link" href="/faq"> FAQ </a> </li> <li class="nav-item"> <a class="nav-link" href="/discord"> Discord </a> </li> <li class="nav-item"> <a class="nav-link" href="https://github.com/scottplot/scottplot/"> GitHub </a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> More </a> <ul class="dropdown-menu" aria-labelledby="navbarDropdown"> <li> <a class="dropdown-item" href="/changelog"> <img src="/images/icons/journal-text.svg"> Changelog </a> </li> <li> <a class="dropdown-item" href="/contributors"> <img src="/images/icons/people-fill.svg"> Contributors </a> </li> <hr /> <li> <a class="dropdown-item" href="https://www.nuget.org/profiles/ScottPlot"> <img src="/images/icons/box-seam.svg"> ScottPlot on NuGet </a> </li> <li> <a class="dropdown-item" href="https://github.com/ScottPlot/ScottPlot"> <img src="/images/icons/github.svg"> ScottPlot on GitHub </a> </li> <li> <a class="dropdown-item" href="https://github.com/ScottPlot/ScottPlot.NET"> <img src="/images/icons/github.svg"> This website on GitHub </a> </li> <hr /> <li> <a class="dropdown-item" href="/support/"> <img src="/images/icons/question-circle.svg"> ScottPlot Support </a> </li> <li> <a class="dropdown-item" href="/discord/"> <img src="/images/icons/discord.svg"> ScottPlot on Discord </a> </li> <hr /> <li> <a class="dropdown-item" href="https://scottplotstatsstorage.z20.web.core.windows.net/"> <img src="/images/icons/bar-chart-line-fill.svg"> Repository Metrics </a> </li> <li> <a class="dropdown-item" href="https://scottplot.net/metrics/"> <img src="/images/icons/list-columns-reverse.svg"> Code Metrics </a> </li> <li> <a class="dropdown-item" href="https://scottplot.net/api/5.0/"> <img src="/images/icons/file-earmark-code.svg"> ScottPlot API </a> </li> <li> <a class="dropdown-item" href="/versions"> <img src="/images/icons/list-check.svg"> Major Versions </a> </li> <li> <a class="dropdown-item" href="/about/"> <img src="/images/icons/person-lines-fill.svg"> About ScottPlot </a> </li> </ul> </li> </ul> </div> </div> </nav> </div> </div> </header> <div class="container-fluid p-0 content-limited-width"> <main class="mb-5"> <article class="my-0"> <div class="p-2"> <a href="#scottplot-50-demo"><h1 id="scottplot-50-demo">ScottPlot 5.0 Demo</a> </h1> <p><strong>The ScottPlot 5.0 Demo is a click-to-run application that demonstrates capabilities of ScottPlot.</strong> The demo application displays all <a href="/cookbook/5.0/">ScottPlot 5.0 Cookbook</a> recipes and demonstrates advanced user control features which are useful in GUI environments.</p> <ul> <li> <p>Each demo is provided with a <a href="https://github.com/ScottPlot/ScottPlot/tree/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos">link to its source code</a></p> </li> <li> <p>The demo app is a <a href="/quickstart/winforms/">Windows Forms</a> application, but the user control API is virtually identical across <a href="/quickstart/wpf/">WPF</a>, <a href="/quickstart/avalonia/">Avalonia</a>, <a href="/quickstart/eto/">Eto</a>, <a href="/quickstart/winui/">WinUI</a>, <a href="/quickstart/unoplatform/">Uno Platform</a> and <a href="/quickstart/blazor/">Blazor</a>, so the source code is relevant to all graphical platforms.</p> </li> </ul> <div class='text-center mt-5 mb-2' id='download'> <a class="btn btn-success btn-lg" href="https://scottplot.net/demos/ScottPlot-Demo-5.0.48.zip" role="button"> <div class='d-flex align-items-center'> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-download me-2" viewBox="0 0 16 16"> <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5"/> <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z"/> </svg> <div class='fs-4'>ScottPlot 5.0 Demo</div> </div> </a> </div> <p><img src="/images/demo/5.0/demo.png" alt=""></p> <a href="#notable-demos"><h2 id="notable-demos">Notable Demos</a> </h2> <p>These are some of the most useful demonstrations included in the <a href="/demo/5.0/">ScottPlot Demo application</a>:</p> <a href="#show-value-under-mouse"><h3 id="show-value-under-mouse">Show Value Under Mouse</a> </h3> <p><strong>The show value under mouse demo</strong> uses the control’s <code>MouseMove</code> event to determine the position of the cursor using <code>Plot.GetCoordinates()</code>, determines if a data point is beneath the cursor, and if so places a circular <code>Marker</code> around it. Although this demo showcases data from scatter plots, the concept can be applied to any plot type.</p> <ul> <li>Source code: <a href="https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/ShowValueOnHover.cs">ShowValueOnHover.cs</a></li> <li>Download: <a href='#download'>ScottPlot 5.0 demo</a></li> </ul> <p><img src="/images/demo/5.0/show-point.gif" alt=""></p> <a href="#draggable-axis-lines"><h3 id="draggable-axis-lines">Draggable Axis Lines</a> </h3> <p><strong>The draggable axis line demo</strong> shows how to use the user control’s <code>MouseDown</code>, <code>MouseUp</code>, and <code>MouseMove</code> events to check whether a plotted object is beneath the mouse, grab it when clicked, move it when dragged, and drop it. Although this demo only showcases dragging axis lines, this technique can be applied to add interactivity to any plot type.</p> <ul> <li>Source code: <a href="https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/DraggableAxisLines.cs">DraggableAxisLines.cs</a></li> <li>Download: <a href='#download'>ScottPlot 5.0 demo</a></li> </ul> <p><img src="/images/demo/5.0/drag.gif" alt=""></p> <a href="#draggable-axis-spans"><h3 id="draggable-axis-spans">Draggable Axis Spans</a> </h3> <p><strong>The draggable axis span demo</strong> shows how to use the user control’s <code>MouseDown</code>, <code>MouseUp</code>, and <code>MouseMove</code> events to check whether a plotted object is beneath the mouse, grab it when clicked, and move or resize it when dragged. Although this demo only showcases dragging axis spans, this technique can be applied to add interactivity to any plot type.</p> <ul> <li>Source code: <a href="https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/DraggableAxisSpans.cs">DraggableAxisSpans.cs</a></li> <li>Download: <a href='#download'>ScottPlot 5.0 demo</a></li> </ul> <p><img src="/images/demo/5.0/draggable-span.gif" alt=""></p> <a href="#draggable-data-points"><h3 id="draggable-data-points">Draggable Data Points</a> </h3> <p><strong>The draggable points demo</strong> shows how to use the user control’s <code>MouseDown</code>, <code>MouseUp</code>, and <code>MouseMove</code> events to check whether a plotted object is beneath the mouse, grab it when clicked, move it when dragged, and drop it.</p> <ul> <li>Source code: <a href="https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/DraggablePoints.cs">DraggablePoints.cs</a></li> <li>Download: <a href='#download'>ScottPlot 5.0 demo</a></li> </ul> <p><img src="/images/demo/5.0/draggable-points.gif" alt=""></p> <a href="#selectable-data-points"><h3 id="selectable-data-points">Selectable Data Points</a> </h3> <p><strong>The select points demo</strong> shows how to use the control’s <code>MouseDown</code>, <code>MouseUp</code>, and <code>MouseMove</code> events to track where the mouse was pressed, dragged, and released to determine which data points are within the mouse rectangle. It then places <code>Marker</code> objects over the selected data points. Notice that none of these plot types contain mouse-specific logic, but users can add their own without too much complexity.</p> <ul> <li>Source code: <a href="https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/SelectPoints.cs">SelectPoints.cs</a></li> <li>Download: <a href='#download'>ScottPlot 5.0 demo</a></li> </ul> <p><img src="/images/demo/5.0/select-points.gif" alt=""></p> <a href="#multiplot-layouts"><h3 id="multiplot-layouts">Multiplot Layouts</a> </h3> <p>The plot control’s <code>Multiplot</code> system may be used to add subplots and configure their placement in the figure as described on the <a href="/faq/shared-layout/">Multiplot</a> FAQ page and in this demo.</p> <ul> <li>Source code: <a href="https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/MultiplotAdvancedLayout.cs">MultiplotAdvancedLayout.cs</a></li> <li>Download: <a href='#download'>ScottPlot 5.0 demo</a></li> </ul> <p><img src="/images/demo/5.0/multiplot-advanced.png" alt=""></p> <a href="#multiplot-with-shared-axes"><h3 id="multiplot-with-shared-axes">Multiplot with Shared Axes</a> </h3> <p>The plot control’s <code>Multiplot</code> system may be used to add subplots and configure shared axis limits as described on the <a href="/faq/multiplot/">Multiplot</a> and <a href="/faq/shared-axes/">Shared Axes</a> FAQ pages and in this demo.</p> <ul> <li>Source code: <a href="https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/MultiplotSharedAxis.cs">MultiplotSharedAxis.cs</a></li> <li>Download: <a href='#download'>ScottPlot 5.0 demo</a></li> </ul> <p><img src="/images/demo/5.0/multiplot-shared.gif" alt=""></p> <a href="#synchronizing-axes-across-multiple-plot-controls"><h3 id="synchronizing-axes-across-multiple-plot-controls">Synchronizing Axes Across Multiple Plot Controls</a> </h3> <p>The shared axes demo uses <code>Plot.Axes.Link()</code> to link axis limits between <strong>two separate plot controls</strong> so changes to the view of one plot are automatically applied to the other.</p> <blockquote> <p>馃挕 Users may prefer the simplicity of the <code>Multiplot</code> system described above</p> </blockquote> <ul> <li>Source code: <a href="https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/SharedAxes.cs">SharedAxes.cs</a></li> <li>Download: <a href='#download'>ScottPlot 5.0 demo</a></li> </ul> <p><img src="/images/demo/5.0/linked-axes.gif" alt=""></p> <a href="#shared-axes"><h3 id="shared-axes">Shared Axes</a> </h3> <p>Axis limits may be shared across multiple plots using one of two strategies:</p> <ol> <li> <p>Use the <code>Multiplot</code> system as demonstrated in the the <a href="#multiplot-with-shared-axes"><strong>multiplot with shared axes demo</strong></a></p> </li> <li> <p>Place multiple controls and synchronize them as shown in <a href="#synchronizing-axes-across-multiple-plot-controls"><strong>multiple plot control demo</strong></a></p> </li> </ol> <hr class='invisible my-4'> <a href="#resizable-multiplot"><h3 id="resizable-multiplot">Resizable Multiplot</a> </h3> <p>This window demonstrates how subplots can be given zero padding to achieve a collapsed effect, and a custom layout can be created which contains logic for interactivity to allow resizing using the mouse.</p> <ul> <li>Source code: <a href="https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/MultiplotCollapsed.cs">MultiplotCollapsed.cs</a></li> <li>Download: <a href='#download'>ScottPlot 5.0 demo</a></li> </ul> <p><img src="/images/demo/5.0/multiplot-resize.gif" alt=""></p> <a href="#axis-rules"><h3 id="axis-rules">Axis Rules</a> </h3> <p><strong>The axis rules demo</strong> demonstrates how to add to the list of <code>Plot.Axes.Rules</code> which are applied before rendering each frame. This strategy can be used to set boundaries that limit how far the user can zoom in or out, lock the vertical or horizontal axis, or enforce equal axes scaling such that circles and squares cannot be stretched into rectangles and ellipses.</p> <ul> <li>Source code: <a href="https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/AxisRules.cs">AxisRules.cs</a></li> <li>Download: <a href='#download'>ScottPlot 5.0 demo</a></li> </ul> <p><img src="/images/demo/5.0/axis-rules.png" alt=""></p> <a href="#continuously-autoscale"><h3 id="continuously-autoscale">Continuously Autoscale</a> </h3> <p><strong>Custom logic may be applied to refine axis limits at the start of each render.</strong> A common use case, demonstrated here, is automatically scaling vertically to fit the range of data encompassed by the horizontal view. Implementation details may differ whether the data is displayed as a scatter plot, signal plot, or something else, but the underlying concept is the same.</p> <ul> <li>Source code: <a href="https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/ContinuouslyAutoscale.cs">ContinuouslyAutoscale.cs</a></li> <li>Download: <a href='#download'>ScottPlot 5.0 demo</a></li> </ul> <p><img src="/images/faq/continuously-autoscale/autoscale-vertically.gif" alt=""></p> <a href="#custom-plot-type"><h3 id="custom-plot-type">Custom Plot Type</a> </h3> <p><strong>The custom plot type</strong> demo shows how to create a custom plot type that implements <code>IPlottable</code> to allow full customization over styling and behavior. Creating custom plot types is useful for experimenting with new types of plots and does not require editing ScottPlot’s source code.</p> <ul> <li>Source code: <a href="https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/CustomPlotType.cs">CustomPlotType.cs</a></li> <li>Download: <a href='#download'>ScottPlot 5.0 demo</a></li> </ul> <p><img src="/images/faq/custom-plot-type/rainbow.png" alt=""></p> <a href="#custom-context-menu"><h3 id="custom-context-menu">Custom Context Menu</a> </h3> <p><strong>The custom right-click menu</strong> shows how to customize the context menu that appears when users right-click the plot. Developers can call the control’s <code>Menu.Clear()</code> method to remove default menu items then call the control’s <code>Menu.Add()</code> method to add new items which call custom actions when clicked.</p> <ul> <li>Source code: <a href="https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/CustomMenu.cs">CustomMenu.cs</a></li> <li>Download: <a href='#download'>ScottPlot 5.0 demo</a></li> </ul> <p><img src="/images/demo/5.0/menu.png" alt=""></p> <a href="#custom-mouse-actions"><h3 id="custom-mouse-actions">Custom Mouse Actions</a> </h3> <p><strong>The custom mouse actions demo</strong> shows how to customize which mouse actions perform various operations on the plot. This strategy can be used to enable alternative behaviors such as middle-click-drag panning, right-click autoscaling, and left-click launching a context menu.</p> <ul> <li>Source code: <a href="https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/CustomMouseActions.cs">CustomMouseActions.cs</a></li> <li>Download: <a href='#download'>ScottPlot 5.0 demo</a></li> </ul> <p><img src="/images/demo/5.0/custom-mouse.png" alt=""></p> <a href="#multi-axis"><h3 id="multi-axis">Multi-Axis</a> </h3> <p><strong>The multi-axis demo</strong> plots data with largely different dimensions on multiple axes with different scales, then demonstrates how to interact with the multi-axis plot.</p> <ul> <li>Source code: <a href="https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/MultiAxis.cs">MultiAxis.cs</a></li> <li>Download: <a href='#download'>ScottPlot 5.0 demo</a></li> </ul> <p><img src="/images/demo/5.0/multi-axis.png" alt=""></p> <a href="#plot-streaming-data"><h3 id="plot-streaming-data">Plot Streaming Data</a> </h3> <p><strong>The data streamer demo</strong> displays live data using a fixed number of data points. The oldest data points are removed as new data points are shifted in. If the <code>ManageAxisLimits</code> property is enabled, the data streamer will automatically adjust the axis limits to keep the incoming data in view. The data streamer plot type has options for switching between a wipe view (like an ECG machine) and a scroll view (where the newest data is always on one side of the plot).</p> <ul> <li>Source code: <a href="https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/DataStreamer.cs">DataStreamer.cs</a></li> <li>Download: <a href='#download'>ScottPlot 5.0 demo</a></li> </ul> <p><img src="/images/demo/5.0/data-streamer.gif" alt=""></p> <a href="#plot-growing-data"><h3 id="plot-growing-data">Plot Growing Data</a> </h3> <p><strong>The data logger demo</strong> displays live data in a <code>List</code> that grows as new data is added. If the <code>ManageAxisLimits</code> property is enabled, the data logger will automatically adjust the axis limits to keep the incoming data in view. The data logger plot type has options for switching between a full signal view or views that focus on the latest portion of the incoming signal.</p> <ul> <li>Source code: <a href="https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/DataLogger.cs">DataLogger.cs</a></li> <li>Download: <a href='#download'>ScottPlot 5.0 demo</a></li> </ul> <p><img src="/images/demo/5.0/data-logger.gif" alt=""></p> <a href="#plot-live-financial-data"><h3 id="plot-live-financial-data">Plot Live Financial Data</a> </h3> <p><strong>The Live Finance</strong> demo demonstrates how to display price OHLC data in real time, modifying the last bar for live updates and adding new bars as time progresses.</p> <ul> <li>Source code: <a href="https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/LiveFinance.cs">LiveFinance.cs</a></li> <li>Download: <a href='#download'>ScottPlot 5.0 demo</a></li> </ul> <p><img src="/images/demo/5.0/live-finance.gif" alt=""></p> <a href="#all-winforms-demo-windows"><h2 id="all-winforms-demo-windows">All WinForms Demo Windows</a> </h2> <p><em>Download the WinForms demo at the top of the page to run these interactively</em></p> <ul> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/CookbookViewer.cs' target='_blank'>ScottPlot 5.0.55 Cookbook</a></strong> - Common ScottPlot features demonstrated as interactive graphs displayed next to the code used to create them</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/MouseTracker.cs' target='_blank'>Mouse Tracker</a></strong> - Demonstrates how to interact with the mouse and convert between screen units (pixels) and axis units (coordinates)</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/DraggableAxisLines.cs' target='_blank'>Draggable Axis Lines</a></strong> - Demonstrates how to add mouse interactivity to plotted objects</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/DraggablePoints.cs' target='_blank'>Draggable Data Points</a></strong> - GUI events can be used to interact with data drawn on the plot. This example shows how to achieve drag-and-drop behavior for points of a scatter plot. Extra code may be added to limit how far points may be moved.</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/AxisRules.cs' target='_blank'>Axis Rules</a></strong> - Configure rules that limit how far the user can zoom in or out or enforce equal axis scaling</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/ContinuouslyAutoscale.cs' target='_blank'>Continuously Autoscale</a></strong> - Custom axis scale logic may be applied at the start of each render</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/CustomAxis.cs' target='_blank'>Custom Axis</a></strong> - How to create a custom axis class that implements IAxis to create totally customizable axis panels</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/CustomFonts.cs' target='_blank'>Custom Fonts</a></strong> - Demonstrates how to create plots that render text using fonts defined in an external TTF file.</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/CustomMarkerDemo.cs' target='_blank'>Custom Marker Shapes</a></strong> - Demonstrates how to create plots using custom markers</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/CustomMenu.cs' target='_blank'>Custom Right-Click Context Menu</a></strong> - Demonstrates how to replace the default right-click menu with a user-defined one that performs custom actions.</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/CustomMouseActions.cs' target='_blank'>Custom Mouse Actions</a></strong> - Demonstrates how to disable the mouse or changes what the button actions are</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/CustomPlotType.cs' target='_blank'>Custom Plot Type</a></strong> - How to create a custom plot type that implements IPlottable to achieve full customization over how data is rendered on a plot.</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/DataLogger.cs' target='_blank'>Data Logger</a></strong> - Plots live streaming data as a growing line plot.</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/DataStreamer.cs' target='_blank'>Data Streamer</a></strong> - Plots live streaming data as a fixed-width line plot, shifting old data out as new data comes in.</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/DetachedLegend.cs' target='_blank'>Detachable Legend</a></strong> - Add an option to the right-click menu to display the legend in a pop-up window</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/DraggableAxisSpans.cs' target='_blank'>Draggable Axis Spans</a></strong> - Demonstrates how to create a mouse-interactive axis span that can be resized or dragged</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/DraggableCallout.cs' target='_blank'>Draggable Callout</a></strong> - Demonstrates how to make a Callout mouse-interactive</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/HeatmapLive.cs' target='_blank'>Live Heatmap</a></strong> - Demonstrates how to display a heatmap with data that changes over time</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/ImageBackgrounds.cs' target='_blank'>Background Images</a></strong> - Use a bitmap image for the background of the figure or data area</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/LabelDemo.cs' target='_blank'>Font Styling</a></strong> - A tool to facilitate evaluating different fonts and the customization options for size, alignment, line height, and more.</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/LegendOutsideBitmap.cs' target='_blank'>Legend Outside the Plot (Bitmap)</a></strong> - Demonstrates how to display the legend outside the plot by obtaining it as a Bitmap and displaying it outside the plot control anywhere in your window.</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/LiveFinance.cs' target='_blank'>Live Financial Plot</a></strong> - Demonstrates how to display price OHLC data in real time, modifying the last bar for live updates and adding new bars as time progresses.</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/LiveHistogram.cs' target='_blank'>Live Histogram</a></strong> - A continuously updating histogram that expands binned counts as new values are added.</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/MicrophoneDemo.cs' target='_blank'>Microphone Demo</a></strong> - Plot real-time audio signal data from the microphone</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/MultiAxis.cs' target='_blank'>Multi-Axis</a></strong> - Display data which visually overlaps but is plotted on different axes</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/MultiplotAdvancedLayout.cs' target='_blank'>Multiplot with Advanced Layout</a></strong> - Custom multi-plot layouts may be achieved by assigning fractional rectangle dimensions to each subplot</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/MultiplotAlignment.cs' target='_blank'>Multiplot Layout Alignment</a></strong> - Plots automatically resize the data area to accommodate tick labels of varying length, but this may lead to misaligned data areas in multiplot figures. Using a fixed padding resolves this issue.</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/MultiplotCustom.cs' target='_blank'>Custom Multiplot System</a></strong> - Although the default Multiplot is suitable for most applications, advanced users may achieve extreme control by creating a class that implements IMultiplot.</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/MultiplotDraggable.cs' target='_blank'>Multiplot with Draggable Subplots</a></strong> - Subplots may be placed very close together by setting their padding to zero. This example uses an advanced Layout system to enable mouse drag resizing of subplots.</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/MultiplotGrowingAxis.cs' target='_blank'>Multiplot with Growing Axes</a></strong> - Demonstrates how to allow axes to grow to fit long tick labels while maintaining layout alignment across subplots in a multiplot.</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/MultiplotSharedAxis.cs' target='_blank'>Multiplot with shared axis limits</a></strong> - Updates to axis limits of a subplot may be applied to all other subplots in the multiplot.</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/PersistingPlot.cs' target='_blank'>Persisting Plot</a></strong> - Manipulations to a Plot on another Form persist through Close() events</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/PlottableDrag.cs' target='_blank'>Draggable Plottables</a></strong> - Demonstrates how to create Plottables which can be dragged with the mouse</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/PlotViewer.cs' target='_blank'>Plot Viewer</a></strong> - A Plot can be created programmatically and displayed in a pop-up window. This strategy can be used to launch mouse-interactive plots from console applications if the ScottPlot.WinForms package is included.</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/ReportViewer.cs' target='_blank'>Report Viewer</a></strong> - A simple strategy for displaying multiple plots paired with descriptions</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/ScrollViewerDemo.cs' target='_blank'>Plot is a Scroll Viewer</a></strong> - How to switch between using the mouse wheel to scroll up/down vs. zoom in/out</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/SelectPoints.cs' target='_blank'>Select Data Points</a></strong> - Demonstrates how to use mouse events to draw a rectangle around data points to select them</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/SharedAxes.cs' target='_blank'>Shared Axes</a></strong> - Link two controls together so they share an axis and have aligned layouts</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/ShowValueOnHover.cs' target='_blank'>Show Value Under Mouse, Scatter</a></strong> - How to sense where the mouse is in coordinate space and retrieve information about the plotted data the cursor is hovering over</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/ShowValueOnHoverMultiple.cs' target='_blank'>Show Value Under Mouse, Multiple Scatter</a></strong> - How to sense where the mouse is in coordinate space and retrieve information about the plottable and data the cursor is hovering over</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/ShowValueUnderMouseSignalXY.cs' target='_blank'>Show Value Under Mouse, SignalXY</a></strong> - Demonstrates how to determine where the cursor is in coordinate space and identify the data point closest to it.</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/SignalPerformance.cs' target='_blank'>Scatter Plot, Signal Plot, and SignalConst</a></strong> - Demonstrates performance of Scatter plots, Signal Plots, and SignalConst on large datasets.</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/SignalXYDrag.cs' target='_blank'>Mouse Interactive SignalXY Plots</a></strong> - Demonstrates how to create SignalXY plots which can be dragged with the mouse, and also how to display informatoin about which point is nearest the cursor.</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/TransparentBackground.cs' target='_blank'>Transparent Background</a></strong> - Plot controls may be made transparent so the Form beneath it can shine through</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/blob/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WinForms%20Demo/Demos/OpenGL.cs' target='_blank'>OpenGL Example</a></strong> - Compare the standard (CPU) vs OpenGL (GPU) rendering of plot controls</li> </ul> <a href="#all-wpf-demos"><h2 id="all-wpf-demos">All WPF Demos</a> </h2> <p><em>Download the ScottPlot repository on GitHub to run these interactively</em></p> <ul> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/tree/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WPF%20Demo/DemoWindows/Quickstart.xaml.cs' target='_blank'>WPF Quickstart</a></strong> - Create a simple plot using the WPF control.</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/tree/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WPF%20Demo/DemoWindows/DisplayScaling.xaml.cs' target='_blank'>Display Scaling</a></strong> - Demonstrates how to track mouse position on displays which use DPI scaling.</li> <li><strong><a href='https://github.com/ScottPlot/ScottPlot/tree/main/src/ScottPlot5/ScottPlot5%20Demos/ScottPlot5%20WPF%20Demo/DemoWindows/MultiThreading.xaml.cs' target='_blank'>WPF Multi-Threading</a></strong> - Demonstrate how to safely change data while rendering asynchronously.</li> </ul> </div> </article> </main> </div> <footer class="container align-items-end mt-5"> <div class="row"> <div class="col-sm text-center py-3" style="opacity: .3;"> <div> Copyright © 2025 </div> <div> <a href='https://swharden.com/about' class="text-dark">Scott W Harden</a> </div> </div> <div class="col-sm text-center py-3" style="opacity: .3;"> <div> Built with Hugo 0.121.1 </div> <div> March 22, 2025 at 5:37 pm EST </div> </div> <div class="col-sm text-center py-3" style="opacity: .3;"> <div> <a href="https://github.com/scottplot/scottplot.net/blob/main/content/demo/5.0.md" class="text-dark"> Edit on GitHub </a> </div> <div> <a href="/sitemap.xml" class="text-dark">Sitemap</a> </div> </div> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script> <script> const startupLanguage = localStorage.getItem("startupLanguage") ?? "Console"; set_language(startupLanguage); </script> </body> </html>