{"id":11567,"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.","status":"active","version":"3.5.0","language":"javascript","source_language":"en","source_url":"https://github.com/plotly/plotly.js","tags":["javascript","graphing","plotting","data","visualization","plotly"],"install":[{"cmd":"npm install plotly.js","lang":"bash","label":"npm"},{"cmd":"yarn add plotly.js","lang":"bash","label":"yarn"},{"cmd":"pnpm add plotly.js","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"For ES modules, `Plotly` is the default export. Use `plotly.js-dist-min` for a minified production bundle or `plotly.js-dist` for an unminified version.","wrong":"import { Plotly } from 'plotly.js-dist-min'","symbol":"Plotly","correct":"import Plotly from 'plotly.js-dist-min'"},{"note":"For CommonJS environments, `Plotly` is the module's export. Similar to ESM, use the bundled packages (`plotly.js-dist-min` or `plotly.js-dist`).","wrong":"const { Plotly } = require('plotly.js-dist-min')","symbol":"Plotly","correct":"const Plotly = require('plotly.js-dist-min')"},{"note":"When loaded via a traditional script tag or an ES module script tag, the `Plotly` object becomes available globally on the `window` object. Direct named imports from the CDN URL are not supported for this global bundle.","wrong":"","symbol":"Plotly","correct":""}],"quickstart":{"code":"\n\n\n Plotly.js Quickstart\n \n\n\n Simple Plotly.js Chart
\n \n\n \n\n","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."},"warnings":[{"fix":"Consult the Plotly.js v3 migration guide for detailed attribute mapping and update chart configurations accordingly. Ensure all title-related attributes are nested under `title.*` and use modern attribute equivalents.","message":"Plotly.js v3.0.0 introduced significant breaking changes, including dropping support for string values in the `title` attribute, and removing deprecated attributes like `titlefont`, `titleposition`, `titleside`, `titleoffset` (now under `title.font`, `title.side`, `title.offset`). It also removed traces `pointcloud` and `heatmapgl`, and attributes such as `bardir` (use `orientation`), `annotation.ref` (use `annotation.xref`/`yref`), and error bar `opacity` (use alpha channel of `color`). Support for jQuery events was also removed.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Upgrade Node.js to version 18.0.0 or newer.","message":"Plotly.js v3.x now requires Node.js version 18.0.0 or higher. Deployments or development environments running older Node.js versions will encounter errors.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Always use `import Plotly from 'plotly.js-dist-min'` or `require('plotly.js-dist-min')` for module usage.","message":"When importing Plotly.js as a module, it is crucial to use the specific distributed bundles like `plotly.js-dist-min` (minified) or `plotly.js-dist` (unminified) rather than the bare `plotly.js` package name. Direct import from `plotly.js` can lead to incorrect bundling or larger artifact sizes.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always use default import syntax: `import Plotly from 'plotly.js-dist-min'` or `const Plotly = require('plotly.js-dist-min')`.","message":"The `Plotly` object is a default export when used as an ES module or CommonJS module. Attempting to use named imports (e.g., `import { Plotly } from 'plotly.js-dist-min'`) will result in an undefined `Plotly` object or an error, as no such named export exists.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure your Plotly.js version is 3.1.2 or newer to resolve this specific regression.","message":"A regression introduced in Plotly.js 3.0.0 affected the editable `title.text` property for `ternary`, `polar`, `colorbar`, and `rangeslider` components. Users upgrading to versions `>=3.0.0` but `<3.1.2` might experience issues with these editable titles.","severity":"breaking","affected_versions":">=3.0.0 <3.1.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[],"ecosystem":"npm"}