Popup Examples

Auto-popups and custom popups for chart interactivity

Auto-Popup on Entire Chart

Add the auto-popup attribute to a chart to automatically show popups with label, value, and percentage on hover. No custom HTML needed!

Bar Chart with Auto-Popup

<dc-chart auto-popup width="500" height="350">
  <dc-title>Quarterly Sales</dc-title>
  <dc-bar value="120" fill="#4CAF50" label="Q1"></dc-bar>
  <dc-bar value="180" fill="#2196F3" label="Q2"></dc-bar>
  <dc-bar value="150" fill="#FF9800" label="Q3"></dc-bar>
  <dc-bar value="220" fill="#9C27B0" label="Q4"></dc-bar>
</dc-chart>
Quarterly Sales

Stacked Bar Chart with Auto-Popup

<dc-chart auto-popup width="500" height="350">
  <dc-title>Revenue by Product</dc-title>
  <dc-bar label="Q1">
    <dc-bar-segment value="50" label="Product A"></dc-bar-segment>
    <dc-bar-segment value="30" label="Product B"></dc-bar-segment>
    <dc-bar-segment value="20" label="Product C"></dc-bar-segment>
  </dc-bar>
  <dc-bar label="Q2">
    <dc-bar-segment value="60" label="Product A"></dc-bar-segment>
    <dc-bar-segment value="40" label="Product B"></dc-bar-segment>
    <dc-bar-segment value="25" label="Product C"></dc-bar-segment>
  </dc-bar>
  <dc-bar label="Q3">
    <dc-bar-segment value="70" label="Product A"></dc-bar-segment>
    <dc-bar-segment value="35" label="Product B"></dc-bar-segment>
    <dc-bar-segment value="30" label="Product C"></dc-bar-segment>
  </dc-bar>
</dc-chart>
Revenue by Product

Pie Chart with Auto-Popup

<dc-pie-chart auto-popup width="500" height="350">
  <dc-title>Market Share</dc-title>
  <dc-pie-slice value="45" label="Product A"></dc-pie-slice>
  <dc-pie-slice value="30" label="Product B"></dc-pie-slice>
  <dc-pie-slice value="15" label="Product C"></dc-pie-slice>
  <dc-pie-slice value="10" label="Other"></dc-pie-slice>
</dc-pie-chart>
Market Share

Funnel Chart with Auto-Popup

<dc-funnel-chart auto-popup width="500" height="350" palette="blues">
  <dc-title>Conversion Funnel</dc-title>
  <dc-funnel-stage value="1000" label="Visitors"></dc-funnel-stage>
  <dc-funnel-stage value="600" label="Leads"></dc-funnel-stage>
  <dc-funnel-stage value="200" label="Opportunities"></dc-funnel-stage>
  <dc-funnel-stage value="80" label="Customers"></dc-funnel-stage>
</dc-funnel-chart>
Conversion Funnel

Line Chart with Auto-Popup

<dc-chart auto-popup width="500" height="350">
  <dc-title>Weekly Trends</dc-title>
  <dc-line stroke="#E91E63" label="Sales">
    <dc-point value="25" label="Mon"></dc-point>
    <dc-point value="40" label="Tue"></dc-point>
    <dc-point value="35" label="Wed"></dc-point>
    <dc-point value="55" label="Thu"></dc-point>
    <dc-point value="45" label="Fri"></dc-point>
  </dc-line>
  <dc-line stroke="#9C27B0" label="Orders">
    <dc-point value="15" label="Mon"></dc-point>
    <dc-point value="30" label="Tue"></dc-point>
    <dc-point value="25" label="Wed"></dc-point>
    <dc-point value="40" label="Thu"></dc-point>
    <dc-point value="35" label="Fri"></dc-point>
  </dc-line>
</dc-chart>
Weekly Trends

Auto-Popup with Element Suppression

Enable auto-popup on the chart, then disable it on specific elements with auto-popup="false":

Suppress Popup on Specific Bars

<dc-chart auto-popup width="500" height="350">
  <dc-title>Sales by Region</dc-title>
  <dc-bar value="85" fill="#4CAF50" label="North"></dc-bar>
  <dc-bar value="120" fill="#2196F3" label="South"></dc-bar>
  <dc-bar value="45" fill="#FF9800" label="East" auto-popup="false"></dc-bar>
  <dc-bar value="95" fill="#9C27B0" label="West"></dc-bar>
</dc-chart>
Sales by Region (East suppressed)

Popup Only on Small Slices (labels hidden)

<dc-pie-chart width="500" height="350" show-label="8%">
  <dc-title>Browser Market Share</dc-title>
  <dc-pie-slice value="65" label="Chrome"></dc-pie-slice>
  <dc-pie-slice value="18" label="Safari"></dc-pie-slice>
  <dc-pie-slice value="4" label="Firefox" auto-popup></dc-pie-slice>
  <dc-pie-slice value="3" label="Edge" auto-popup></dc-pie-slice>
  <dc-pie-slice value="10" label="Other"></dc-pie-slice>
</dc-pie-chart>
Browser Share (hover small slices)

Suppress Popup on Specific Funnel Stages

<dc-funnel-chart auto-popup width="500" height="350" chevron="15px">
  <dc-title>User Journey</dc-title>
  <dc-funnel-stage value="5000" label="Page Views"></dc-funnel-stage>
  <dc-funnel-stage value="2000" label="Signups" auto-popup="false"></dc-funnel-stage>
  <dc-funnel-stage value="800" label="Active Users"></dc-funnel-stage>
  <dc-funnel-stage value="200" label="Paid Users"></dc-funnel-stage>
</dc-funnel-chart>
User Journey (Signups suppressed)

Selective Auto-Popup (Opt-In)

Leave auto-popup off the chart (default), and enable it only on specific elements:

Auto-Popup on Selected Bars Only

<dc-chart width="500" height="350">
  <dc-title>Monthly Revenue</dc-title>
  <dc-bar value="80" fill="#78909C" label="Jan"></dc-bar>
  <dc-bar value="95" fill="#78909C" label="Feb"></dc-bar>
  <dc-bar value="150" fill="#4CAF50" label="Mar" auto-popup></dc-bar>
  <dc-bar value="85" fill="#78909C" label="Apr"></dc-bar>
  <dc-bar value="200" fill="#4CAF50" label="May" auto-popup></dc-bar>
  <dc-bar value="90" fill="#78909C" label="Jun"></dc-bar>
</dc-chart>
Monthly Revenue (highlights have popups)

Auto-Popup on Large Slices Only

<dc-pie-chart width="500" height="350">
  <dc-title>Revenue by Category</dc-title>
  <dc-pie-slice value="45" label="Enterprise" auto-popup></dc-pie-slice>
  <dc-pie-slice value="30" label="SMB" auto-popup></dc-pie-slice>
  <dc-pie-slice value="10" label="Startup"></dc-pie-slice>
  <dc-pie-slice value="8" label="Education"></dc-pie-slice>
  <dc-pie-slice value="7" label="Other"></dc-pie-slice>
</dc-pie-chart>
Revenue by Category (major segments)

Auto-Popup on Key Funnel Stages

<dc-funnel-chart width="500" height="350" palette="purples">
  <dc-title>Hiring Pipeline</dc-title>
  <dc-funnel-stage value="500" label="Applications"></dc-funnel-stage>
  <dc-funnel-stage value="150" label="Screened" auto-popup></dc-funnel-stage>
  <dc-funnel-stage value="50" label="Interviewed"></dc-funnel-stage>
  <dc-funnel-stage value="10" label="Hired" auto-popup></dc-funnel-stage>
</dc-funnel-chart>
Hiring Pipeline (key stages)

Custom Popups with <dc-popup>

For complete control over popup content, use the <dc-popup> element. Custom popups take precedence over auto-popup.

Custom Hover Popups

<dc-chart width="500" height="350">
  <dc-title>Quarterly Revenue</dc-title>
  <dc-bar value="150" fill="#FF6B6B" label="Q1">
    <dc-popup trigger="hover">
      <strong>Q1 2024</strong><br>
      Revenue: $150k<br>
      Growth: +12%
    </dc-popup>
  </dc-bar>
  <dc-bar value="180" fill="#4ECDC4" label="Q2">
    <dc-popup trigger="hover">
      <strong>Q2 2024</strong><br>
      Revenue: $180k<br>
      Growth: +20%
    </dc-popup>
  </dc-bar>
  <dc-bar value="165" fill="#45B7D1" label="Q3">
    <dc-popup trigger="hover">
      <strong>Q3 2024</strong><br>
      Revenue: $165k<br>
      Growth: -8%
    </dc-popup>
  </dc-bar>
  <dc-bar value="220" fill="#96CEB4" label="Q4">
    <dc-popup trigger="hover">
      <strong>Q4 2024</strong><br>
      Revenue: $220k<br>
      Growth: +33%
    </dc-popup>
  </dc-bar>
</dc-chart>
Quarterly Revenue Q1 2024
Revenue: $150k
Growth: +12% Q2 2024
Revenue: $180k
Growth: +20% Q3 2024
Revenue: $165k
Growth: -8% Q4 2024
Revenue: $220k
Growth: +33%

Custom Click Popups with Links

<dc-funnel-chart width="500" height="350" palette="blues">
  <dc-title>Sales Funnel - Click a Stage!</dc-title>
  <dc-funnel-stage value="1000" label="Visitors">
    <dc-popup trigger="click">
      <strong>Website Visitors</strong><br>
      Total: 1,000 unique visitors<br>
      Source: Organic + Paid
    </dc-popup>
  </dc-funnel-stage>
  <dc-funnel-stage value="450" label="Leads">
    <dc-popup trigger="click">
      <strong>Qualified Leads</strong><br>
      Count: 450 (45% conversion)<br>
      <a href="#">View Lead Details</a>
    </dc-popup>
  </dc-funnel-stage>
  <dc-funnel-stage value="150" label="Opportunities">
    <dc-popup trigger="click">
      <strong>Sales Opportunities</strong><br>
      Count: 150 (33% conversion)<br>
      Avg. Deal Size: $5,200
    </dc-popup>
  </dc-funnel-stage>
  <dc-funnel-stage value="50" label="Customers">
    <dc-popup trigger="click">
      <strong>New Customers</strong><br>
      Count: 50 (33% close rate)<br>
      Total Revenue: $260,000
    </dc-popup>
  </dc-funnel-stage>
</dc-funnel-chart>
Sales Funnel - Click a Stage! Website Visitors
Total: 1,000 unique visitors
Source: Organic + Paid Qualified Leads
Count: 450 (45% conversion)
View Lead Details Sales Opportunities
Count: 150 (33% conversion)
Avg. Deal Size: $5,200 New Customers
Count: 50 (33% close rate)
Total Revenue: $260,000

Mixing Auto-Popup with Custom Popups

When auto-popup is enabled on a chart, elements with a <dc-popup> child will use the custom popup instead. This lets you use auto-popup for most elements while providing detailed custom popups for specific ones.

Auto-Popup with Custom Override

<dc-chart auto-popup width="500" height="350">
  <dc-title>Team Performance</dc-title>
  <dc-bar value="85" fill="#4CAF50" label="Alice"></dc-bar>
  <dc-bar value="92" fill="#2196F3" label="Bob">
    <dc-popup trigger="hover">
      <strong>Top Performer!</strong><br>
      Score: 92/100<br>
      Completed: 45 tasks<br>
      <em>Employee of the Month</em>
    </dc-popup>
  </dc-bar>
  <dc-bar value="78" fill="#FF9800" label="Carol"></dc-bar>
  <dc-bar value="88" fill="#9C27B0" label="Dave"></dc-bar>
</dc-chart>
Team Performance Top Performer!
Score: 92/100
Completed: 45 tasks
Employee of the Month

Pie Chart with Mixed Popups

<dc-pie-chart auto-popup width="500" height="350">
  <dc-title>Budget Allocation</dc-title>
  <dc-pie-slice value="40" label="Engineering">
    <dc-popup trigger="hover">
      <strong>Engineering Department</strong><br>
      Budget: $4.0M<br>
      Headcount: 125<br>
      Projects: 8 active
    </dc-popup>
  </dc-pie-slice>
  <dc-pie-slice value="25" label="Marketing"></dc-pie-slice>
  <dc-pie-slice value="20" label="Sales"></dc-pie-slice>
  <dc-pie-slice value="10" label="Support"></dc-pie-slice>
  <dc-pie-slice value="5" label="Admin"></dc-pie-slice>
</dc-pie-chart>
Budget Allocation Engineering Department
Budget: $4.0M
Headcount: 125
Projects: 8 active

Funnel with Selective Custom Popups

<dc-funnel-chart auto-popup width="500" height="350" chevron="20px" flat-top flat-bottom>
  <dc-title>E-commerce Funnel</dc-title>
  <dc-funnel-stage value="10000" label="Visitors"></dc-funnel-stage>
  <dc-funnel-stage value="3000" label="Add to Cart">
    <dc-popup trigger="hover">
      <strong>Shopping Cart</strong><br>
      Items Added: 3,000<br>
      Avg. Cart Value: $85<br>
      <em>30% conversion rate</em>
    </dc-popup>
  </dc-funnel-stage>
  <dc-funnel-stage value="1500" label="Checkout"></dc-funnel-stage>
  <dc-funnel-stage value="1000" label="Purchase">
    <dc-popup trigger="hover">
      <strong>Completed Orders</strong><br>
      Orders: 1,000<br>
      Revenue: $95,000<br>
      <em>10% overall conversion</em>
    </dc-popup>
  </dc-funnel-stage>
</dc-funnel-chart>
E-commerce Funnel Shopping Cart
Items Added: 3,000
Avg. Cart Value: $85
30% conversion rate Completed Orders
Orders: 1,000
Revenue: $95,000
10% overall conversion