Interactive Charts on Plotly for Website

Building Interactive Charts with Plotly for Websites

Plotly is a library for scientific and analytical visualizations: 3D charts, contour maps, statistical plots (box, violin, histogram), geographic maps. Used in data science applications and analytical dashboards.

Installation

npm install plotly.js-dist react-plotly.js
# Or lightweight version:
npm install plotly.js-basic-dist react-plotly.js

Basic Integration

import Plot from 'react-plotly.js';

function ScatterMatrix({ data }) {
  return (
    <Plot
      data={[{
        type: 'scatter',
        mode: 'markers',
        x: data.map(d => d.pageViews),
        y: data.map(d => d.conversions),
        text: data.map(d => d.pageName),
        marker: {
          size: data.map(d => Math.sqrt(d.revenue) / 10),
          color: data.map(d => d.bounceRate),
          colorscale: 'RdYlGn',
          showscale: true,
          colorbar: { title: 'Bounce Rate, %' }
        },
        hovertemplate:
          '<b>%{text}</b><br>Views: %{x}<br>Conversion: %{y:.1f}%<extra></extra>'
      }]}
      layout={{
        xaxis: { title: 'Page Views', type: 'log' },
        yaxis: { title: 'Conversion, %' },
        margin: { t: 20 },
        height: 400
      }}
      config={{ responsive: true, displaylogo: false }}
      style={{ width: '100%' }}
    />
  );
}

3D Surface Plot

function Surface3D({ zData, xLabels, yLabels }) {
  return (
    <Plot
      data={[{
        type: 'surface',
        z: zData,
        x: xLabels,
        y: yLabels,
        colorscale: 'Viridis',
        contours: {
          z: { show: true, usecolormap: true, highlightcolor: '#42f462', project: { z: true } }
        }
      }]}
      layout={{
        title: '3D Conversion Map',
        scene: {
          xaxis: { title: 'Hour of Day' },
          yaxis: { title: 'Day of Week' },
          zaxis: { title: 'Conversion, %' }
        },
        height: 500
      }}
      config={{ responsive: true }}
      style={{ width: '100%' }}
    />
  );
}

Statistical: Box Plot and Violin

function StatisticsPlot({ groups }) {
  const traces = groups.map(group => ({
    type: 'violin' as const,
    name: group.name,
    y: group.values,
    box: { visible: true },
    meanline: { visible: true },
    points: 'outliers'
  }));

  return (
    <Plot
      data={traces}
      layout={{
        title: 'Response Time Distribution by Service',
        yaxis: { title: 'Time, ms', zeroline: false },
        violingap: 0.3,
        height: 400
      }}
      style={{ width: '100%' }}
    />
  );
}

Subplots (Multiple Charts in Grid)

function DashboardSubplots({ salesData, trafficData, funnelData }) {
  return (
    <Plot
      data={[
        {
          type: 'bar',
          x: salesData.labels,
          y: salesData.values,
          name: 'Sales',
          xaxis: 'x',
          yaxis: 'y'
        },
        {
          type: 'scatter',
          mode: 'lines+markers',
          x: trafficData.dates,
          y: trafficData.sessions,
          name: 'Sessions',
          xaxis: 'x2',
          yaxis: 'y2'
        },
        {
          type: 'funnel',
          y: funnelData.stages,
          x: funnelData.values,
          name: 'Funnel',
          xaxis: 'x3',
          yaxis: 'y3'
        }
      ]}
      layout={{
        grid: { rows: 1, columns: 3, pattern: 'independent' },
        height: 400,
        showlegend: false
      }}
      style={{ width: '100%' }}
    />
  );
}

Lazy Loading for Heavy Bundle

const Plot = dynamic(() => import('react-plotly.js'), {
  ssr: false,
  loading: () => <ChartSkeleton />
});

Timeline

Scatter plots, 3D charts, statistical plots and subplots — 4–6 days.