plotly

# Quick, high-level API for common chart types
import plotly.express as px
import pandas as pd

# Scatter plot with color and size encoding
df = px.data.gapminder().query("year == 2007")
fig = px.scatter(
    df, x="gdpPercap", y="lifeExp",
    size="pop", color="continent",
    hover_name="country",
    log_x=True,
    size_max=60,
    title="GDP vs Life Expectancy (2007)"
)
fig.show()

# Time series with multiple lines
df = px.data.stocks()
fig = px.line(df, x="date", y=["GOOG", "AAPL", "AMZN", "FB", "MSFT"],
              title="Stock Prices Over Time")
fig.update_layout(yaxis_title="Price ($)", legend_title="Company")
fig.show()

# Heatmap
fig = px.imshow(
    correlation_matrix,
    text_auto=".2f",
    color_continuous_scale="RdBu_r",
    title="Feature Correlation Matrix"
)
fig.show()

# Geographic choropleth
fig = px.choropleth(
    df, locations="iso_alpha", color="gdpPercap",
    hover_name="country",
    color_continuous_scale="Viridis",
    title="GDP Per Capita by Country"
)
fig.show()

# Subplots
from plotly.subplots import make_subplots
import plotly.graph_objects as go

fig = make_subplots(rows=2, cols=2,
    subplot_titles=("Revenue", "Users", "Churn", "NPS"))
fig.add_trace(go.Bar(x=months, y=revenue), row=1, col=1)
fig.add_trace(go.Scatter(x=months, y=users, mode="lines"), row=1, col=2)
fig.add_trace(go.Scatter(x=months, y=churn, fill="tozeroy"), row=2, col=1)
fig.add_trace(go.Indicator(mode="gauge+number", value=72, gauge={"axis": {"range": [0, 100]}}), row=2, col=2)
fig.update_layout(height=600, showlegend=False)
fig.show()

import Plotly from "plotly.js-dist-min";

// Create interactive chart in the browser
Plotly.newPlot("chart", [
  {
    x: dates,
    y: values,
    type: "scatter",
    mode: "lines+markers",
    name: "Revenue",
    line: { color: "#4f46e5", width: 2 },
    hovertemplate: "%{x}<br>$%{y:,.0f}<extra></extra>",
  },
], {
  title: "Monthly Revenue",
  xaxis: { title: "Date" },
  yaxis: { title: "Revenue ($)", tickformat: "$,.0f" },
  hovermode: "x unified",
});

// React wrapper
import Plot from "react-plotly.js";
<Plot
  data={[{ x: [1,2,3], y: [2,6,3], type: "scatter", mode: "lines+markers" }]}
  layout={{ width: 800, height: 400, title: "My Chart" }}
/>

# Build interactive dashboards with Plotly + Dash
from dash import Dash, html, dcc, callback, Output, Input
import plotly.express as px

app = Dash(__name__)

app.layout = html.Div([
    html.H1("Sales Dashboard"),
    dcc.Dropdown(id="region-filter",
        options=[{"label": r, "value": r} for r in regions],
        value="All", multi=False),
    dcc.Graph(id="revenue-chart"),
    dcc.Graph(id="breakdown-chart"),
])

@callback(
    Output("revenue-chart", "figure"),
    Input("region-filter", "value")
)
def update_chart(region):
    filtered = df if region == "All" else df[df.region == region]
    return px.line(filtered, x="date", y="revenue", title=f"Revenue — {region}")

app.run(debug=True)

pip install plotly pandas             # Python
pip install dash                       # Dash framework
npm install plotly.js-dist-min         # JavaScript (minimal bundle)
npm install react-plotly.js            # React wrapper