Movatterモバイル変換

plotly/plotly.jsPublic

NotificationsYou must be signed in to change notification settings
Fork2k
Star18k

Open-source JavaScript charting library behind Plotly and Dash

plotly.com/javascript/

License

MIT license

18k stars 2k forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 28,179 Commits
.circleci		.circleci
.github		.github
build		build
devtools		devtools
dist		dist
draftlogs		draftlogs
lib		lib
src		src
stackgl_modules		stackgl_modules
tasks		tasks
test		test
topojson		topojson
.gitignore		.gitignore
.npmignore		.npmignore
BUILDING.md		BUILDING.md
CHANGELOG.md		CHANGELOG.md
CITATION.cff		CITATION.cff
CONTRIBUTING.md		CONTRIBUTING.md
CUSTOM_BUNDLE.md		CUSTOM_BUNDLE.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
appveyor.yml		appveyor.yml
biome.json		biome.json
bower.json		bower.json
code_of_conduct.md		code_of_conduct.md
composer.json		composer.json
esbuild-config.js		esbuild-config.js
package-lock.json		package-lock.json
package.json		package.json

Repository files navigation

Plotly.js is a standalone Javascript data visualization library, and it also powers the Python and R modules namedplotly in those respective ecosystems (referred to asPlotly.py andPlotly.R).

Plotly.js can be used to produce dozens of chart types and visualizations, including statistical charts, 3D graphs, scientific charts, SVG and tile maps, financial charts and more.

Load as a node module

Installa ready-to-use distributed bundle

npm i --save plotly.js-dist-min

and use import or require in node.js

// ES6 moduleimportPlotlyfrom'plotly.js-dist-min'// CommonJSvarPlotly=require('plotly.js-dist-min')

You may also consider usingplotly.js-dist if you prefer using an unminified package.

Load via script tag

The script HTML element

In the examples belowPlotly object is added to the window scope byscript. ThenewPlot method is then used to draw an interactive figure as described bydata andlayout into the desireddiv here namedgd. As demonstrated in the example above basic knowledge ofhtml andJSON syntax is enough to get started i.e. with/without JavaScript! To learn and build more with plotly.js please visitplotly.js documentation.

<head><scriptsrc="https://cdn.plot.ly/plotly-3.3.0.min.js"charset="utf-8"></script></head><body><divid="gd"></div><script>Plotly.newPlot("gd",/* JSON object */{"data":[{"y":[1,2,3]}],"layout":{"width":600,"height":400}})</script></body>

Alternatively you may consider usingnative ES6 import in the script tag.

<scripttype="module">import"https://cdn.plot.ly/plotly-3.3.0.min.js"Plotly.newPlot("gd",[{y:[1,2,3]}])</script>

Fastly supports Plotly.js with free CDN service. Read more athttps://www.fastly.com/open-source.

Un-minified versions are also available on CDN

While non-minified source files may contain characters outside UTF-8, it is recommended that you specify thecharset when loading those bundles.

<scriptsrc="https://cdn.plot.ly/plotly-3.3.0.js"charset="utf-8"></script>

Please note that as of v2 the "plotly-latest" outputs (e.g.https://cdn.plot.ly/plotly-latest.min.js) will no longer be updated on the CDN, and will stay at the last v1 patch v1.58.5. Therefore, to use the CDN with plotly.js v2 and higher, you must specify an exact plotly.js version.

MathJax

You could load either version two or version three of MathJax files, for example:

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_SVG.js"></script>

<scriptsrc="https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-svg.js"></script>

When using MathJax version 3, it is also possible to usechtml output on the other parts of the page in addition tosvg output for the plotly graph.Please refer todevtools/test_dashboard/index-mathjax3chtml.html to see an example.

Need to have several WebGL graphs on a page?

You may simply loadvirtual-webgl script for WebGL 1 (not WebGL 2) before loading other scripts.

<scriptsrc="https://unpkg.com/virtual-webgl@1.0.6/src/virtual-webgl.js"></script>

Bundles

There are two kinds of plotly.js bundles:

Complete and partial official bundles that are distributed tonpm and theCDN, described inthe dist README.
Custom bundles you can create yourself to optimize the size of bundle depending on your needs. Please visitCUSTOM_BUNDLE for more information.

Alternative ways to load and build plotly.js

If your library needs to bundle or directly loadplotly.js/lib/index.js or parts of its modules similar toindex-basic in some other way than via an official or a custom bundle, or in case you want to tweak the default build configurations, then please visitBUILDING.md.

Documentation

Official plotly.js documentation is hosted athttps://plotly.com/javascript.

These pages are generated by the Plotlygraphing-library-docs repo built withJekyll and publicly hosted on GitHub Pages.For more info about contributing to Plotly documentation, please read throughcontributing guidelines.

Bugs and feature requests

Have a bug or a feature request? Pleaseopen a Github issue keeping in mind theissue guidelines. You may also want to read abouthow changes get made to Plotly.js

Contributing

Please read through ourcontributing guidelines. Included are directions for opening issues, using plotly.js in your project and notes on development.

Notable contributors

Plotly.js is at the core of a large and dynamic ecosystem with many contributors who file issues, reproduce bugs, suggest improvements, write code in this repo (and other upstream or downstream ones) and help users in the Plotly community forum. The following people deserve special recognition for their outsized contributions to this ecosystem:

Contributor	GitHub	Status
Alex C. Johnson	@alexcjohnson	Active, Maintainer
Emily Kellison-Linn	@emilykl	Active, Maintainer
Cameron DeCoster	@camdecoster	Active, Maintainer
Mojtaba Samimi	@archmoj	Active, Community Contributor
My-Tien Nguyen	@my-tien	Active, Community Contributor
Birk Skyum	@birkskyum	Active, Community Contributor
Étienne Tétreault-Pinard	@etpinard	Hall of Fame
Antoine Roy-Gobeil	@antoinerg	Hall of Fame
Jack Parmer	@jackparmer	Hall of Fame
Nicolas Kruchten	@nicolaskruchten	Hall of Fame
Mikola Lysenko	@mikolalysenko	Hall of Fame
Ricky Reusser	@rreusser	Hall of Fame
Dmitry Yv.	@dy	Hall of Fame
Jon Mease	@jonmmease	Hall of Fame
Robert Monfera	@monfera	Hall of Fame
Robert Möstl	@rmoestl	Hall of Fame
Nicolas Riesco	@n-riesco	Hall of Fame
Miklós Tusz	@mdtusz	Hall of Fame
Chelsea Douglas	@cldougl	Hall of Fame
Ben Postlethwaite	@bpostlethwaite	Hall of Fame
Hannah Ker	@hannahker	Hall of Fame
Chris Parmer	@chriddyp	Hall of Fame
Alex Vados	@alexander-daniel	Hall of Fame

Copyright and license

Code released under theMIT license.

Versioning

This project is maintained under theSemantic Versioning guidelines.

See theReleases section of our GitHub project for changelogs for each release version of plotly.js.

Community

Follow us onX andLinkedIn for the latest Plotly news.
Implementation help may be found on our community forum (taggedplotly-js) oron Stack Overflow (taggedplotly.js).
Developers should use the keywordplotly on packages which modify or add to the functionality of plotly.js when distributing throughnpm.