{"library":"plotly.js","title":"Plotly.js","description":"Plotly.js is an open-source JavaScript data visualization library that provides a wide array of interactive, publication-quality charts and graphs. It is the core engine powering the popular Plotly.py and Plotly.R libraries, offering a unified graphing experience across different programming environments. The library supports dozens of chart types, including statistical, 3D, scientific, SVG/tile maps, and financial charts. It is currently stable at version 3.5.0, with minor releases featuring new attributes, bug fixes, and performance improvements appearing frequently. Its key differentiators include comprehensive chart type support, robust interactivity features, and its foundational role in the broader Plotly ecosystem, enabling complex data narratives in web applications. It can be used as a Node.js module via bundled distributions or directly in the browser via script tags and CDNs.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install plotly.js"],"cli":null},"imports":["import Plotly from 'plotly.js-dist-min'","const Plotly = require('plotly.js-dist-min')","<script src=\"https://cdn.plot.ly/plotly-3.5.0.min.js\"></script>"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"<!DOCTYPE html>\n<html>\n<head>\n    <title>Plotly.js Quickstart</title>\n    <script src=\"https://cdn.plot.ly/plotly-3.5.0.min.js\" charset=\"utf-8\"></script>\n</head>\n<body>\n    <h1>Simple Plotly.js Chart</h1>\n    <div id=\"myDiv\" style=\"width:600px;height:400px;\"></div>\n\n    <script type=\"text/javascript\">\n        // Data for the plot\n        const trace1 = {\n            x: [1, 2, 3, 4],\n            y: [10, 15, 13, 17],\n            mode: 'markers',\n            type: 'scatter',\n            name: 'Trace 1'\n        };\n\n        const trace2 = {\n            x: [1, 2, 3, 4],\n            y: [16, 5, 11, 9],\n            mode: 'lines+markers',\n            type: 'scatter',\n            name: 'Trace 2'\n        };\n\n        const data = [trace1, trace2];\n\n        // Layout for the plot\n        const layout = {\n            title: 'My First Plotly.js Graph',\n            xaxis: { title: 'X-axis Label' },\n            yaxis: { title: 'Y-axis Label' }\n        };\n\n        // Create the plot in the div with id 'myDiv'\n        Plotly.newPlot('myDiv', data, layout);\n\n        console.log(\"Plotly chart rendered successfully!\");\n    </script>\n</body>\n</html>","lang":"javascript","description":"This example demonstrates how to embed a simple interactive scatter plot using Plotly.js directly in an HTML file via CDN, initializing it with basic data and layout configurations.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}