Declarative Chart Library

Create beautiful charts using simple, nested HTML elements!

This library provides a declarative API for building interactive charts with SVG rendering, popup support, and clickable elements.

Basic Chart Types

The library supports five chart types: Bar, Line, Pie, Funnel, and Bubble. Each uses declarative HTML elements to define data.

Bar Chart

<dc-chart width="500" height="350">
  <dc-title>Monthly Sales</dc-title>
  <dc-bar value="10" fill="red" label="Jan"></dc-bar>
  <dc-bar value="25" fill="blue" label="Feb"></dc-bar>
  <dc-bar value="15" fill="green" label="Mar"></dc-bar>
  <dc-bar value="40" fill="orange" label="Apr"></dc-bar>
</dc-chart>
Monthly Sales
More Bar Charts Axes & Labels

Line Chart

<dc-chart width="500" height="350" line-color="#9C27B0">
  <dc-title>Temperature Trend</dc-title>
  <dc-line label="City A">
    <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="25" label="Fri"></dc-point>
  </dc-line>
  <dc-line stroke="#FF5722" label="City B">
    <dc-point value="12" label="Mon"></dc-point>
    <dc-point value="19" label="Wed"></dc-point>
    <dc-point value="21" label="Fri"></dc-point>
  </dc-line>
</dc-chart>
Temperature Trend
More Line Charts Axes & Labels

Pie Chart

<dc-pie-chart width="500" height="350">
  <dc-title>Market Share</dc-title>
  <dc-pie-slice value="35" label="Product A" fill="#4CAF50"></dc-pie-slice>
  <dc-pie-slice value="28" label="Product B" fill="#2196F3"></dc-pie-slice>
  <dc-pie-slice value="22" label="Product C" fill="#FF9800"></dc-pie-slice>
  <dc-pie-slice value="15" label="Other" fill="#9E9E9E"></dc-pie-slice>
</dc-pie-chart>
Market Share
More Pie Charts Axes & Labels

Funnel Chart

<dc-funnel-chart width="500" height="350">
  <dc-title>Sales Funnel</dc-title>
  <dc-funnel-stage value="1000" label="Visitors"></dc-funnel-stage>
  <dc-funnel-stage value="500" label="Leads"></dc-funnel-stage>
  <dc-funnel-stage value="200" label="Opportunities"></dc-funnel-stage>
  <dc-funnel-stage value="75" label="Sales"></dc-funnel-stage>
</dc-funnel-chart>
Sales Funnel
More Funnel Charts Axes & Labels

Bubble Chart

<dc-chart width="500" height="350" palette="default">
  <dc-title>Quarterly Performance</dc-title>
  <dc-bubble label="Q1" value="30" size-value="100"></dc-bubble>
  <dc-bubble label="Q2" value="45" size-value="200"></dc-bubble>
  <dc-bubble label="Q3" value="35" size-value="150"></dc-bubble>
  <dc-bubble label="Q4" value="60" size-value="300"></dc-bubble>
</dc-chart>
Quarterly Performance
Axes & Labels

Use CSS Styling

Customize charts with inline CSS styles for borders, backgrounds, shadows, and more. Use bar-color to set a default fill color for bars:

Styled Bar Chart

<dc-chart width="500" height="350" bar-color="#FF9800"
              style="border: 4px solid #FF9800;
                     background: #FFF3E0;
                     border-radius: 12px;">
  <dc-title>Quarterly Performance</dc-title>
  <dc-bar value="65" label="Q1"></dc-bar>
  <dc-bar value="78" label="Q2"></dc-bar>
  <dc-bar value="82" label="Q3"></dc-bar>
  <dc-bar value="91" label="Q4"></dc-bar>
</dc-chart>
Quarterly Performance

Font Inheritance

Charts automatically inherit font styles from their parent containers. Set font-family on a parent element and all charts within will use that font for titles, labels, and values.

Serif Container

This grid has font-family: Georgia, serif. All charts inside inherit the font:

<div style="font-family: Georgia, 'Times New Roman', serif;">
  <dc-chart width="500" height="300" bar-color="#4CAF50">
    <dc-title>Inherits Georgia Font</dc-title>
    <dc-bar value="30" label="Category A"></dc-bar>
    <dc-bar value="45" label="Category B"></dc-bar>
    <dc-bar value="25" label="Category C"></dc-bar>
  </dc-chart>
</div>
Inherits Georgia Font

Same Container, Different Chart

This pie chart is in the same serif container and also inherits the font:

<!-- Inside the same Georgia container -->
<dc-pie-chart width="500" height="300">
  <dc-title>Also Inherits Georgia</dc-title>
  <dc-pie-slice value="40" label="Alpha" fill="#E91E63"></dc-pie-slice>
  <dc-pie-slice value="35" label="Beta" fill="#9C27B0"></dc-pie-slice>
  <dc-pie-slice value="25" label="Gamma" fill="#673AB7"></dc-pie-slice>
</dc-pie-chart>
Also Inherits Georgia

Monospace Container

Wrap charts in a container with font-family: monospace for a technical look:

<div style="font-family: 'Courier New', Consolas, monospace;">
  <dc-chart width="500" height="300" line-color="#00BCD4">
    <dc-title>Monospace Labels</dc-title>
    <dc-line>
      <dc-point value="20" label="2024-01"></dc-point>
      <dc-point value="35" label="2024-02"></dc-point>
      <dc-point value="28" label="2024-03"></dc-point>
      <dc-point value="45" label="2024-04"></dc-point>
    </dc-line>
  </dc-chart>
</div>
Monospace Labels 
<!-- Inside the same monospace container -->
<dc-funnel-chart width="500" height="300">
  <dc-title>Technical Funnel</dc-title>
  <dc-funnel-stage value="1000" label="requests"></dc-funnel-stage>
  <dc-funnel-stage value="750" label="processed"></dc-funnel-stage>
  <dc-funnel-stage value="500" label="completed"></dc-funnel-stage>
</dc-funnel-chart>
Technical Funnel

Responsive Charts

Charts automatically scale to fit their container while maintaining aspect ratio. The width and height attributes define the aspect ratio and internal coordinate system, not fixed pixel dimensions.

Constrained Container (300px wide)

This chart is placed in a 300px wide container. It scales down to fit while maintaining the 500:350 aspect ratio:

<div style="width: 300px; border: 2px dashed #999;">
  <dc-chart width="500" height="350" bar-color="#2196F3">
    <dc-bar value="30" label="A"></dc-bar>
    <dc-bar value="50" label="B"></dc-bar>
    <dc-bar value="40" label="C"></dc-bar>
  </dc-chart>
</div>

Side-by-Side in Flexbox

Multiple charts in a flex container automatically share the available space:

<div style="display: flex; gap: 20px;">
  <dc-pie-chart width="400" height="300">
    <dc-pie-slice value="40" label="Desktop" fill="#4CAF50"></dc-pie-slice>
    <dc-pie-slice value="35" label="Mobile" fill="#2196F3"></dc-pie-slice>
    <dc-pie-slice value="25" label="Tablet" fill="#FF9800"></dc-pie-slice>
  </dc-pie-chart>
  <dc-chart width="400" height="300" bar-color="#9C27B0">
    <dc-bar value="25" label="Q1"></dc-bar>
    <dc-bar value="40" label="Q2"></dc-bar>
    <dc-bar value="35" label="Q3"></dc-bar>
    <dc-bar value="50" label="Q4"></dc-bar>
  </dc-chart>
</div>

Full Width (Unconstrained)

Without a constrained container, charts expand to fill the available width:

<dc-funnel-chart width="800" height="300">
  <dc-title>Full Width Funnel</dc-title>
  <dc-funnel-stage value="1000" label="Awareness"></dc-funnel-stage>
  <dc-funnel-stage value="600" label="Interest"></dc-funnel-stage>
  <dc-funnel-stage value="300" label="Decision"></dc-funnel-stage>
  <dc-funnel-stage value="100" label="Action"></dc-funnel-stage>
</dc-funnel-chart>
Full Width Funnel

Download as SVG

Charts can be downloaded as standalone SVG files using the downloadSvg() method. The downloaded file preserves the chart's appearance including inherited fonts.

Basic Download

<dc-pie-chart id="download-demo" width="500" height="350">
  <dc-title>Revenue by Region</dc-title>
  <dc-pie-slice value="45" label="North America" fill="#4CAF50"></dc-pie-slice>
  <dc-pie-slice value="30" label="Europe" fill="#2196F3"></dc-pie-slice>
  <dc-pie-slice value="15" label="Asia" fill="#FF9800"></dc-pie-slice>
  <dc-pie-slice value="10" label="Other" fill="#9E9E9E"></dc-pie-slice>
</dc-pie-chart>

<button onclick="document.getElementById('download-demo').downloadSvg('revenue-chart')">
  Download SVG
</button>
Revenue by Region

With Custom Font

The downloaded SVG includes the inherited font-family, so it renders correctly in image editors:

<div style="font-family: Georgia, serif;">
  <dc-chart id="font-demo" width="500" height="350" bar-color="#9C27B0">
    <dc-title>Quarterly Results</dc-title>
    <dc-bar value="85" label="Q1"></dc-bar>
    <dc-bar value="92" label="Q2"></dc-bar>
    <dc-bar value="78" label="Q3"></dc-bar>
    <dc-bar value="105" label="Q4"></dc-bar>
  </dc-chart>
</div>

<button onclick="document.getElementById('font-demo').downloadSvg('quarterly-results')">
  Download SVG
</button>
Quarterly Results