Chapter 37: Plotly.js
Step 1: What Exactly is Plotly.js? (Very Simple & Clear Definition)
Plotly.js is a free, open-source JavaScript library for creating beautiful, interactive, publication-quality charts and graphs directly in web pages.
Think of it like:
- Excel charts + PowerPoint animations + D3.js power but much easier to use and far more beautiful out of the box.
Key features that make it special (2026 reality):
- Interactive by default — zoom, pan, hover tooltips, click events, legends toggle, export to PNG/SVG/PDF
- Very wide chart types — 50+ chart types (line, bar, scatter, pie, heatmap, 3D surface, maps, financial candlestick, Sankey, treemap, violin, box, contour, etc.)
- Beautiful default styling — looks professional without any CSS work
- Responsive — works perfectly on mobile, tablet, desktop
- Pure JavaScript — no backend needed (can work with static data or live data via fetch/WebSocket)
- Works everywhere — plain HTML + JS, React, Vue, Angular, Svelte, Jupyter notebooks, Dash (Python framework), Shiny (R), etc.
Official website (still the best place): https://plotly.com/javascript/
GitHub: https://github.com/plotly/plotly.js
Step 2: Why Do People Love Plotly.js in 2026?
- Easier than D3.js (D3 is very powerful but requires writing a lot of code)
- More interactive & beautiful than Chart.js (Chart.js is simpler but less feature-rich)
- Better looking defaults than Highcharts (Highcharts is paid for commercial use)
- Free for everything (MIT license) — unlike some competitors
- Huge community — used by NASA, Google, Netflix, financial companies, scientific papers, news sites
- Excellent documentation + hundreds of examples
Common places you see Plotly.js today:
- Interactive dashboards on websites
- Financial stock charts
- Scientific publications (Nature, Science journals embed Plotly)
- Data analysis tools (like internal company dashboards)
- Educational websites & blogs
Step 3: Your First Plotly.js Chart – Copy-Paste & Run (30 Seconds)
Create a file called plotly-hello.html and paste this:
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>My First Plotly.js Chart</title> <!-- Load Plotly.js from CDN (always latest version) --> <script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script> <style> body { margin: 0; padding: 40px; background: #f8f9fa; font-family: Arial; text-align: center; } h1 { color: #636EFA; } #chart { width: 90%; max-width: 1000px; height: 600px; margin: 40px auto; } </style> </head> <body> <h1>My First Plotly.js Chart – IPL Runs Comparison</h1> <div id="chart"></div> <script> // Data – pretend IPL 2025 top 3 run scorers const trace1 = { x: ['Virat Kohli', 'Suryakumar Yadav', 'Travis Head'], y: [741, 682, 658], name: 'IPL 2025 Runs', type: 'bar', marker: { color: '#636EFA' } }; const trace2 = { x: ['Virat Kohli', 'Suryakumar Yadav', 'Travis Head'], y: [892, 745, 712], // previous season for comparison name: 'IPL 2024 Runs', type: 'bar', marker: { color: '#EF553B' } }; const data = [trace1, trace2]; // Layout – controls title, axes, legend, etc. const layout = { title: { text: 'Top Run Scorers – IPL 2024 vs 2025', font: { size: 28, color: '#2c3e50' } }, xaxis: { title: 'Player' }, yaxis: { title: 'Total Runs' }, barmode: 'group', // side-by-side bars bargap: 0.3, height: 600, margin: { t: 100, b: 100, l: 80, r: 40 }, legend: { orientation: 'h', y: 1.1 }, hovermode: 'closest', plot_bgcolor: '#f8f9fa', paper_bgcolor: '#ffffff' }; // Configuration – toolbar options const config = { responsive: true, displaylogo: false, modeBarButtonsToRemove: ['lasso2d', 'select2d'] }; // Create the chart! Plotly.newPlot('chart', data, layout, config); </script> </body> </html> |
Open this file in your browser — you should see a beautiful, interactive bar chart!
What you can do with it:
- Hover over bars → see exact numbers
- Click legend → hide/show series
- Zoom with mouse wheel or box zoom
- Pan by dragging
- Click camera icon → download as PNG
Step 4: Quick Summary Table (Keep This Handy!)
| Feature | What it lets you do | Example Use in 2026 | Difficulty |
|---|---|---|---|
| Basic Charts | Line, bar, scatter, pie, heatmap | Sales dashboard, stock price trends | Easy |
| Statistical Charts | Box, violin, histogram, 3D surface | A/B test results, scientific data | Medium |
| Maps & Geo | Choropleth, scattergeo, mapbox | COVID cases map, election results | Medium |
| 3D Charts | 3D scatter, surface, mesh | Molecular visualization, terrain models | Medium |
| Financial | Candlestick, OHLC, waterfall | Stock trading platforms | Medium |
| Interactivity | Hover, click, zoom, pan, legend toggle, export | Almost every Plotly chart | Built-in |
Final Teacher Words (2026 Reality)
Plotly.js = the go-to JavaScript library when you want beautiful, interactive, publication-quality charts with very little code.
- Start with bar/line/scatter → look professional immediately
- Add interactivity → hover, zoom, legend toggle — users love it
- Need maps, 3D, financial charts → Plotly has them ready
- Want it in React/Vue/Angular/Dash/Jupyter → Plotly works everywhere
In 2026 Plotly.js is still everywhere:
- Company dashboards
- Scientific papers & blogs
- News websites (The Hindu, Economic Times embed Plotly charts)
- Educational platforms
- Fintech apps (stock charts)
Got the big picture now? 🔥
Questions?
- Want a live updating stock price line chart?
- Full India COVID heatmap example?
- How to embed Plotly in React or Vue?
- Difference Plotly.js vs Chart.js vs D3.js?
Just tell me — next class is ready! 🚀
