Chart container — figure + caption for plots

A styled wrapper for matplotlib/plotly charts. White card, title, the chart, and a caption.

style.css v3.1

style.css — the CSS rules

.chart-card {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.chart-card .chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.chart-card .chart-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
}

.chart-card .chart-subtitle {
  font-size: 0.82rem;
  color: #666;
  margin-top: 0.2rem;
}

.chart-card .chart-actions {
  display: flex;
  gap: 0.4rem;
}

.chart-card .chart-actions button {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
  color: #666;
  cursor: pointer;
  transition: all 0.15s;
}

.chart-card .chart-actions button:hover {
  background: #a0c000;
  color: white;
  border-color: #a0c000;
}

.chart-card .chart-body {
  width: 100%;
  height: 300px;
  background: #fafafa;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 0.9rem;
}

.chart-card .chart-caption {
  font-size: 0.8rem;
  color: #888;
  margin-top: 0.8rem;
  font-style: italic;
}

index.html — the HTML structure (what the CSS targets)

<div class="chart-card">
  <div class="chart-header">
    <div>
      <h3 class="chart-title">Model Accuracy Over Time</h3>
      <div class="chart-subtitle">Last 30 days &middot; test set</div>
    </div>
    <div class="chart-actions">
      <button>Download</button>
      <button>Fullscreen</button>
    </div>
  </div>
  <div class="chart-body">
    [ Your matplotlib / plotly chart goes here ]
  </div>
  <div class="chart-caption">
    Figure 1: Accuracy improved 12% after hyperparameter tuning on day 15.
  </div>
</div>

Live preview updates as you type

🧠 How it works

This is the wrapper pattern for EVERY chart in a data-science dashboard. chart-header — title + subtitle on the left, action buttons (download, fullscreen) on the right. chart-body — fixed height (300px) so all charts in a grid are the same size. The actual chart (an <img> from matplotlib, or a <div> for plotly) goes inside. chart-caption — italic grey text below, like a figure caption in a paper. box-shadow: 0 1px 3px rgba(0,0,0,0.06) — very subtle shadow. Don't overdo shadows on cards. The action buttons are grey by default, turn green on hover — branded micro-interaction.

✏️ Try these changes

Change chart-body height from 300px to 500px
→ taller chart area
Change the button hover color from #a0c000 to #58a6ff
→ buttons turn blue on hover
Change border-radius: 10px to 0
→ sharp corners — more 'academic paper' look
Add a max-width: 800px to .chart-card
→ chart doesn't stretch too wide on big screens

← Previous lab

Loading spinner — pure CSS animation

Next lab →

Modal dialog — overlay + centered box