{
  "title": {
    "text": "Monthly Revenue"
  },
  "data": [
    {
      "month": "Jan",
      "revenue": 48200,
      "growth": 12,
      "department": "Sales"
    },
    {
      "month": "Feb",
      "revenue": 52800,
      "growth": 9,
      "department": "Sales"
    },
    {
      "month": "Mar",
      "revenue": 61300,
      "growth": 16,
      "department": "Sales"
    },
    {
      "month": "Apr",
      "revenue": 58900,
      "growth": -4,
      "department": "Sales"
    },
    {
      "month": "May",
      "revenue": 67400,
      "growth": 14,
      "department": "Sales"
    },
    {
      "month": "Jun",
      "revenue": 72100,
      "growth": 7,
      "department": "Sales"
    }
  ],
  "series": [
    {
      "type": "bar",
      "xKey": "month",
      "yKey": "revenue",
      "fill": "#6366f1",
      "cornerRadius": 4,
      "title": "Revenue"
    }
  ],
  "tooltip": {
    "enabled": true,
    "bulletShape": "square",
    "bodyTemplate": "The ${department} department generated $${revenue} in revenue this month.",
    "footerTemplate": "Growth: ${growth}% vs. prior month",
    "style": {
      "background": "rgba(15,23,42,0.95)",
      "color": "#e2e8f0",
      "borderRadius": 12
    }
  }
}

Edit JSON above · auto-previews after 0.9 s

Embed data-driven text directly in the tooltip with bodyTemplate and footerTemplate. Placeholders like ${department}, ${revenue}, and ${growth} are replaced with values from the hovered row. Combine with a style override and a square bullet for a polished look.

Declarative JSX API

Every feature shown above is also available through the declarative JSX API. Use the <Tooltip> child inside any <Chart> to configure rich templates, images, styling, and nested charts.

Rich Context (template interpolation)

import { Chart, Bar, Tooltip } from 'radiant-charts';

<Chart data={revenueData}>
  <Bar xKey="month" yKey="revenue" fill="#6366f1" cornerRadius={4} />
  <Tooltip
    bulletShape="square"
    bodyTemplate="The ${department} department generated $${revenue} in revenue this month."
    footerTemplate="Growth: ${growth}% vs. prior month"
    style={{
      background: 'rgba(15,23,42,0.95)',
      color: '#e2e8f0',
      borderRadius: 12,
    }}
  />
</Chart>

Profile Card (image rendering)

import { Chart, Bar, Tooltip } from 'radiant-charts';

<Chart data={employeeData}>
  <Bar xKey="name" yKey="score" fill="#10b981" cornerRadius={4} />
  <Tooltip
    image={{
      dataKey: 'avatarUrl',
      width: 56,
      height: 56,
      borderRadius: 28,
      position: 'left',
    }}
    bodyTemplate="${name} — Score: ${score}"
  />
</Chart>

Viz-in-Viz (nested sparkline)

import { Chart, Bar, Tooltip } from 'radiant-charts';

<Chart data={regionData}>
  <Bar xKey="region" yKey="sales" fill="#f59e0b" cornerRadius={4} />
  <Tooltip
    nestedChart={{
      enabled: true,
      dataKey: 'trend_data',
      type: 'line',
      xKey: 'month',
      yKey: 'value',
      width: 200,
      height: 60,
      stroke: '#6366f1',
    }}
    footerTemplate="Historical trend for ${region}"
  />
</Chart>

Comparison (Sticky Pinning)

import { Chart, Bar, Tooltip } from 'radiant-charts';

<Chart data={revenueData}>
  <Bar xKey="month" yKey="revenue" fill="#8b5cf6" cornerRadius={4} />
  <Tooltip
    sticky={true}
    maxPinned={3}
    render={(state) => {
      if (!state.entries.length) return null;
      const row = state.entries[0].datum;
      const isPositive = row.growth >= 0;
      
      return (
        <div style={{ width: 220, borderRadius: 8, background: '#ffffff', border: '1px solid #e2e8f0', boxShadow: '0 10px 15px -3px rgba(0,0,0,0.1)', overflow: 'hidden', fontFamily: 'sans-serif' }}>
          <div style={{ background: '#f8fafc', padding: '8px 12px', borderBottom: '1px solid #e2e8f0', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontSize: 12, fontWeight: 600, color: '#64748b', textTransform: 'uppercase' }}>{row.month}</span>
            {state.pinned && (
              <button onClick={state.close} style={{ background: 'transparent', border: 'none', cursor: 'pointer', fontSize: 16, lineHeight: 1, color: '#94a3b8', padding: 0 }}>×</button>
            )}
          </div>
          <div style={{ padding: '16px 12px' }}>
            <div style={{ fontSize: 11, color: '#94a3b8', marginBottom: 4 }}>{row.department} Revenue</div>
            <div style={{ fontSize: 24, fontWeight: 'bold', color: '#0f172a', marginBottom: 12 }}>$${row.revenue.toLocaleString()}</div>
            <div style={{ display: 'inline-block', padding: '4px 8px', borderRadius: 4, fontSize: 12, fontWeight: 600, background: isPositive ? '#dcfce7' : '#fee2e2', color: isPositive ? '#16a34a' : '#ef4444' }}>
              {isPositive ? '↑' : '↓'} {Math.abs(row.growth)}% vs Prev
            </div>
          </div>
        </div>
      );
    }}
  />
</Chart>

Fixed Position & Formatting

import { Chart, Area, Tooltip } from 'radiant-charts';

<Chart data={revenueData}>
  <Area xKey="month" yKey="revenue" fill="rgba(99,102,241,0.2)" stroke="#6366f1" />
  <Tooltip
    positionMode="fixed"
    valueTemplate="$${value} USD"
    bulletShape="diamond"
    style={{
      borderRadius: 8,
      fontFamily: 'monospace',
      background: '#1e293b',
      color: '#f8fafc',
    }}
  />
</Chart>

Premium E-Commerce Product Card

import { Chart, Bar, Tooltip } from 'radiant-charts';

<Chart data={data}>
  <Bar xKey="month" yKey="sales" fill="#8b5cf6" cornerRadius={4} />
  <Tooltip
    sticky={true}
    render={(state) => {
      if (!state.entries.length) return null;
      const row = state.entries[0].datum;
      const isLowStock = row.stockStatus === 'Low Stock';
      
      return (
        <div style={{ width: 240, borderRadius: 12, overflow: 'hidden', background: '#ffffff', boxShadow: '0 10px 25px rgba(0,0,0,0.1)', border: '1px solid #e2e8f0', fontFamily: 'sans-serif' }}>
          <div style={{ position: 'relative', height: 120 }}>
            <img src={row.imgUrl} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            <div style={{ position: 'absolute', top: 8, right: 8, padding: '4px 8px', borderRadius: 999, fontSize: 10, fontWeight: 'bold', background: isLowStock ? '#fee2e2' : '#dcfce7', color: isLowStock ? '#ef4444' : '#10b981' }}>{row.stockStatus}</div>
          </div>
          <div style={{ padding: 16 }}>
            <div style={{ fontWeight: 600, fontSize: 14, color: '#0f172a', marginBottom: 4 }}>{row.productName}</div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 12 }}>
              <span style={{ color: '#fbbf24', fontSize: 14 }}>★★★★½</span>
              <span style={{ fontSize: 12, color: '#64748b' }}>({row.rating})</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
              <span style={{ fontSize: 12, color: '#64748b' }}>Monthly Sales</span>
              <span style={{ fontWeight: 'bold', fontSize: 16, color: '#0f172a' }}>{row.sales}</span>
            </div>
            <button style={{ width: '100%', padding: 8, background: '#6366f1', color: 'white', border: 'none', borderRadius: 6, fontWeight: 500, fontSize: 13, cursor: 'pointer' }}>View Details</button>
          </div>
        </div>
      );
    }}
  />
</Chart>

Server Health Mini-Dashboard

import { Chart, Line, Tooltip } from 'radiant-charts';

<Chart data={data}>
  <Line xKey="time" yKey="cpu" stroke="#3b82f6" strokeWidth={3} />
  <Tooltip
    render={(state) => {
      if (!state.entries.length) return null;
      const row = state.entries[0].datum;
      const isWarning = row.cpu > 80 || row.status !== 'Healthy';
      const cpuColor = row.cpu > 80 ? '#ef4444' : '#3b82f6';
      
      return (
        <div style={{ width: 260, borderRadius: 8, background: '#0f172a', color: '#f8fafc', border: '1px solid #334155', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', boxShadow: '0 10px 15px -3px rgba(0,0,0,0.5)' }}>
          <div style={{ padding: '12px 16px', borderBottom: '1px solid #1e293b', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <span style={{ fontWeight: 600, fontSize: 13 }}>{row.serverName}</span>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: isWarning ? '#ef4444' : '#10b981', boxShadow: `0 0 8px ${isWarning ? '#ef4444' : '#10b981'}` }}></span>
          </div>
          <div style={{ padding: 16 }}>
            <div style={{ marginBottom: 12 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginBottom: 6, color: '#94a3b8' }}>
                <span>CPU</span><span>{row.cpu}%</span>
              </div>
              <div style={{ height: 6, background: '#1e293b', borderRadius: 999, overflow: 'hidden' }}>
                <div style={{ height: '100%', width: `${row.cpu}%`, background: cpuColor }}></div>
              </div>
            </div>
            <div style={{ marginBottom: 16 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, marginBottom: 6, color: '#94a3b8' }}>
                <span>RAM</span><span>{row.ram}%</span>
              </div>
              <div style={{ height: 6, background: '#1e293b', borderRadius: 999, overflow: 'hidden' }}>
                <div style={{ height: '100%', width: `${row.ram}%`, background: '#8b5cf6' }}></div>
              </div>
            </div>
            <div style={{ fontSize: 11, color: '#94a3b8', borderTop: '1px solid #1e293b', paddingTop: 12 }}>
              Latency: <span style={{ color: row.latency > 100 ? '#f59e0b' : '#10b981', fontWeight: 600 }}>{row.latency}ms</span>
            </div>
          </div>
        </div>
      );
    }}
  />
</Chart>

Financial Trade Ticket

import { Chart, Area, Tooltip } from 'radiant-charts';

<Chart data={data}>
  <Area xKey="time" yKey="price" fill="rgba(16, 185, 129, 0.1)" stroke="#10b981" />
  <Tooltip
    positionMode="fixed"
    render={(state) => {
      if (!state.entries.length) return null;
      const row = state.entries[0].datum;
      const isPos = row.delta >= 0;
      const deltaColor = isPos ? '#10b981' : '#ef4444';
      const sign = isPos ? '+' : '';
      
      return (
        <div style={{ width: 220, borderRadius: 8, background: '#ffffff', border: '1px solid #e2e8f0', boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1)', padding: 16, fontFamily: 'sans-serif' }}>
          <div style={{ fontSize: 13, color: '#64748b', fontWeight: 600, marginBottom: 4 }}>{row.symbol}</div>
          <div style={{ fontSize: 28, fontWeight: 'bold', color: '#0f172a', marginBottom: 4 }}>$${row.price.toFixed(2)}</div>
          <div style={{ fontSize: 14, fontWeight: 500, color: deltaColor, marginBottom: 16 }}>
            {sign}{row.delta.toFixed(2)} ({sign}{row.deltaPct.toFixed(2)}%)
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <button onClick={() => console.log('BUY', row.symbol)} style={{ flex: 1, padding: 8, background: '#10b981', color: 'white', border: 'none', borderRadius: 6, fontWeight: 600, fontSize: 13, cursor: 'pointer' }}>BUY</button>
            <button onClick={() => console.log('SELL', row.symbol)} style={{ flex: 1, padding: 8, background: '#ef4444', color: 'white', border: 'none', borderRadius: 6, fontWeight: 600, fontSize: 13, cursor: 'pointer' }}>SELL</button>
          </div>
          <div style={{ marginTop: 12, fontSize: 11, color: '#94a3b8', textAlign: 'center' }}>Vol: {row.volume}</div>
        </div>
      );
    }}
  />
</Chart>

PreviousBasic Tooltips Next Bar Charts

Was this article helpful?

Radiant Charts

Radiant Charts Help Center

Knowledge Base/Core Interactions/Advanced Tooltips

Data Grid

Overview Getting Started Column Definitions Sorting & Filtering Cell Renderers Pivot Mode

Core Interactions

Getting Started Installation Theming Tooltips Basic Tooltips Advanced Tooltips

Chart Types

Categorical

Part to Whole

Pie Charts Donut Charts Treemap Charts Circle Packing Icicle Charts Dendrograms Waffle Charts Sunburst Charts

Distribution

Histogram BoxPlot Charts Ridgeline Plots Beeswarm Plots Strip Plots ECDF Charts KDE Plots QQ Plots Pareto Charts Error Bar Control Chart Violin Plots Statistical Charts

Relationship

Scatter Charts Bubble Charts Density Contours Hexbin Charts Ternary Plots Venn Diagrams

Flow & Networks

Waterfall Charts Funnel Charts Sankey Diagrams Alluvial Diagrams Arc Diagrams Chord Diagrams Dependency Wheel Gantt Charts Force Graphs Streamgraph

Specialized

Gauge Charts Heatmap Charts Candlestick Charts Liquid Fill Charts Calendar Heatmap OHLC Charts Renko Charts Point & Figure Word Clouds Horizon Charts Bump Charts

Geospatial

Choropleth Maps Bubble Map

Comparison

Range Bar Chart Grouped Stacked Bar

Interaction

Advanced Interactivity

Advanced Tooltips

Rich templates, media, styling, and nested charts inside tooltips.

Subtype

▾

Live Preview

month	revenue
Jan	48200
Feb	52800
Mar	61300
Apr	58900
May	67400
Jun	72100