[React][Lib] Dashboard Charts with react-plotly

1. Environment

• OS: Windows 11 / macOS
• Frontend library: React.js (v18+)
• Chart libraries: react-plotly.js, plotly.js
• Terminal: PowerShell (Windows) / zsh (macOS)

2. Problem

When building data dashboards or admin pages, chart work often hits the same pain points:

• Zoom / pan: Wheel and drag zoom usually means hand-rolling messy mouse coordinate math.
• Export to PNG: A single “download chart|–button often pulls in a heavy capture library like html2canvas.
• Combo charts: Overlaying a bar chart and a line chart is missing or awkwardly configured in many libraries.

3. Cause

Lighter chart libraries focus on static SVG/Canvas drawing.

Adding real interaction means fighting the DOM or stacking many plugins. Frontend engineers reinvent the wheel instead of shipping business logic, and the codebase becomes hard to maintain.

4. Solution

1) Install and draw a combo chart

Install both the React wrapper and the Plotly engine:

# npm
npm install react-plotly.js plotly.js

# yarn
yarn add react-plotly.js plotly.js

# pnpm (recommended)
pnpm add react-plotly.js plotly.js

Overlay a bar series and a line series in one chart:

• type: 'bar' for bars, 'scatter' (with mode: 'lines+markers') for lines
• data: each object in the array is another overlapping trace
• For a responsive chart, omit fixed width/height in layout and use useResizeHandler with style={{ width: '100%', height: '100%' }} so the plot follows the browser size

import React from 'react';
import Plot from 'react-plotly.js';

function DashboardChart() {
  // 1. Define traces (array items overlay on one plot)
  const chartData = [
    {
      type: 'bar',
      x: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
      y: [20, 40, 25, 50, 45],
      name: 'Monthly revenue',
      marker: { color: '#3b82f6' },
    },
    {
      type: 'scatter',
      mode: 'lines+markers',
      x: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
      y: [25, 30, 35, 45, 55],
      name: 'Target',
      line: { color: '#ef4444', width: 3 },
    },
  ];

  // 2. Layout: title, axes, backgrounds
  const chartLayout = {
    width: 700,
    height: 500,
    title: 'H1 2024 Revenue (Plotly)',
    xaxis: { title: 'Month' },
    yaxis: { title: 'Revenue ("M)' },
    plot_bgcolor: '#f8fafc',
    paper_bgcolor: '#ffffff',
  };

  return (
    <div style={{ padding: '20px', border: '1px solid #ddd' }}>
      {/* 3. Pass data + layout */}
      <Plot data={chartData} layout={chartLayout} />
    </div>
  );
}

export default DashboardChart;

5. Summary

react-plotly wraps the proven Plotly engine (familiar to many Python analysts) for React.

• Default modebar: Zoom, pan, reset, and PNG download with no extra code.
• Clear split: Define a data array and a layout object, then render.

Pick a visualization library by project needs:

Library	Best for	Notes
Chart.js	Light pages, simple charts	Easy and small; limited deep customization
D3.js	Highly custom visuals	Maximum freedom; you own the DOM
react-plotly.js	Dashboards, stats, science/finance	Strong defaults and an intuitive structure