Interactive Examples

Hover Popups

Hover over bars to see detailed information:

<dc-chart width="700" height="400">
  <dc-title>Quarterly Revenue (in thousands)</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>

Clickable Lines with Links

Two ways to make lines clickable:

• New York: Uses a popup with a link inside (click to show popup)
• San Francisco: Direct navigation using href attribute (click to navigate)

<dc-chart width="700" height="400">
  <dc-title>City Temperature Comparison</dc-title>
  <dc-line stroke="#2196F3" label="New York">
    <dc-popup trigger="click">
      <strong>New York City</strong><br>
      <a href="https://en.wikipedia.org/wiki/New_York_City" target="_blank">
        View on Wikipedia
      </a>
    </dc-popup>
    <dc-point value="15" label="Mon"></dc-point>
    <dc-point value="18" label="Tue"></dc-point>
    <dc-point value="22" label="Wed"></dc-point>
    <dc-point value="20" label="Thu"></dc-point>
    <dc-point value="25" label="Fri"></dc-point>
  </dc-line>
  <dc-line stroke="#FF5722" label="San Francisco"
           href="https://en.wikipedia.org/wiki/San_Francisco"
           target="_blank">
    <dc-point value="12" label="Mon"></dc-point>
    <dc-point value="16" label="Tue"></dc-point>
    <dc-point value="19" label="Wed"></dc-point>
    <dc-point value="23" label="Thu"></dc-point>
    <dc-point value="21" label="Fri"></dc-point>
  </dc-line>
</dc-chart>

Clickable Bars with href Attribute

Any chart element (bars, lines, points) can be made clickable using the href and target attributes:

<dc-chart width="600" height="350">
  <dc-title>Top Programming Languages - Click to Learn More</dc-title>
  <dc-bar value="45" fill="#f1e05a" label="JavaScript"
          href="https://en.wikipedia.org/wiki/JavaScript"
          target="_blank"></dc-bar>
  <dc-bar value="38" fill="#3572A5" label="Python"
          href="https://en.wikipedia.org/wiki/Python_(programming_language)"
          target="_blank"></dc-bar>
  <dc-bar value="28" fill="#b07219" label="Java"
          href="https://en.wikipedia.org/wiki/Java_(programming_language)"
          target="_blank"></dc-bar>
  <dc-bar value="22" fill="#e34c26" label="TypeScript"
          href="https://en.wikipedia.org/wiki/TypeScript"
          target="_blank"></dc-bar>
</dc-chart>

Pie Chart Popups

Hover over slices to see detailed information:

<dc-pie-chart width="500" height="400">
  <dc-title>Traffic Sources</dc-title>
  <dc-pie-slice value="30" fill="#FF6B6B" label="Desktop">
    <dc-popup trigger="hover">
      <strong>Desktop Traffic</strong><br>
      Sessions: 3,240<br>
      Avg. Duration: 4m 32s
    </dc-popup>
  </dc-pie-slice>
  <dc-pie-slice value="45" fill="#4ECDC4" label="Mobile">
    <dc-popup trigger="hover">
      <strong>Mobile Traffic</strong><br>
      Sessions: 4,860<br>
      Avg. Duration: 2m 15s
    </dc-popup>
  </dc-pie-slice>
  <dc-pie-slice value="15" fill="#45B7D1" label="Tablet">
    <dc-popup trigger="hover">
      <strong>Tablet Traffic</strong><br>
      Sessions: 1,620<br>
      Avg. Duration: 3m 45s
    </dc-popup>
  </dc-pie-slice>
  <dc-pie-slice value="10" fill="#96CEB4" label="Other">
    <dc-popup trigger="hover">
      <strong>Other Devices</strong><br>
      Sessions: 1,080<br>
      Avg. Duration: 1m 20s
    </dc-popup>
  </dc-pie-slice>
</dc-pie-chart>

Funnel Chart Popups

Click on stages to see conversion details:

<dc-funnel-chart width="500" height="400" 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>

Dynamic Updates

Charts update automatically when you modify the DOM:

Interaction Events

Charts emit dc-click, dc-mouseenter, dc-mouseleave and dc-render. Events are dispatched from the element in your markup (the <dc-bar>) and bubble up, so you can listen on the element, the chart, or the document. Click and hover the bars below.

<dc-chart id="events-demo">
  <dc-bar value="120" label="Jan"></dc-bar>
</dc-chart>

<script>
  document.querySelector('#events-demo')
    .addEventListener('dc-click', (event) => {
      const { label, value, percent } = event.detail;
      // percent is a decimal: 0.25 means 25%
      showDetail(label, value, percent);
    });
</script>

Selected: nothing yet - click a bar

Event log (most recent first):

waiting for events...