Line Chart Basics

Display data points connected by lines using <dc-line> and <dc-point> elements

Basic Line Charts

Line charts display data points connected by lines. Use <dc-line> elements containing <dc-point> elements. Multiple lines can be displayed on the same chart, each with its own color.

Multi-Line Chart

<dc-chart width="500" height="350">
  <dc-title>Temperature Trend</dc-title>
  <dc-line stroke="#9C27B0" 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="20" label="Thu"></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="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>
Temperature Trend

Multiple Series

<dc-chart width="500" height="350">
  <dc-title>Growth Trends</dc-title>
  <dc-line stroke="#E91E63" label="Product A">
    <dc-point value="10" label="Q1"></dc-point>
    <dc-point value="15" label="Q2"></dc-point>
    <dc-point value="25" label="Q3"></dc-point>
    <dc-point value="35" label="Q4"></dc-point>
  </dc-line>
  <dc-line stroke="#9C27B0" label="Product B">
    <dc-point value="20" label="Q1"></dc-point>
    <dc-point value="22" label="Q2"></dc-point>
    <dc-point value="30" label="Q3"></dc-point>
    <dc-point value="28" label="Q4"></dc-point>
  </dc-line>
  <dc-line stroke="#3F51B5" label="Product C">
    <dc-point value="5" label="Q1"></dc-point>
    <dc-point value="12" label="Q2"></dc-point>
    <dc-point value="18" label="Q3"></dc-point>
    <dc-point value="24" label="Q4"></dc-point>
  </dc-line>
</dc-chart>
Growth Trends

Point Customization

Customize point appearance at the chart, line, or individual point level. Use point-shape to change shapes and fill to change point colors.

Per-Point Colors

<dc-chart width="500" height="350" label-position="below">
  <dc-title>Temperature with Alerts</dc-title>
  <dc-line stroke="#4CAF50" label="Temperature">
    <dc-point value="18" label="Mon"></dc-point>
    <dc-point value="22" label="Tue"></dc-point>
    <dc-point value="35" label="Wed" fill="#FF5722"></dc-point>
    <dc-point value="20" label="Thu"></dc-point>
    <dc-point value="19" label="Fri"></dc-point>
    <dc-point value="38" label="Sat" fill="#FF5722"></dc-point>
    <dc-point value="21" label="Sun"></dc-point>
  </dc-line>
</dc-chart>
Temperature with Alerts

Custom Point Shapes

<dc-chart width="500" height="350">
  <dc-title>Product Performance</dc-title>
  <dc-line stroke="#E91E63" label="Squares" point-shape="square">
    <dc-point value="10" label="Q1"></dc-point>
    <dc-point value="15" label="Q2"></dc-point>
    <dc-point value="25" label="Q3"></dc-point>
    <dc-point value="35" label="Q4"></dc-point>
  </dc-line>
  <dc-line stroke="#9C27B0" label="Mixed">
    <dc-point value="20" label="Q1" shape="circle"></dc-point>
    <dc-point value="22" label="Q2" shape="triangle"></dc-point>
    <dc-point value="30" label="Q3" shape="diamond"></dc-point>
    <dc-point value="28" label="Q4" shape="star"></dc-point>
  </dc-line>
  <dc-line stroke="#3F51B5" label="Unicode" point-shape="★">
    <dc-point value="5" label="Q1"></dc-point>
    <dc-point value="12" label="Q2" shape="♦"></dc-point>
    <dc-point value="18" label="Q3"></dc-point>
    <dc-point value="24" label="Q4" shape="●"></dc-point>
  </dc-line>
</dc-chart>
Product Performance

No Markers

<dc-chart width="500" height="350">
  <dc-title>Daily Readings</dc-title>
  <dc-line stroke="#0891b2" label="Sensor" point-shape="none">
    <dc-point value="12" label="Mon"></dc-point>
    <!-- 20 more points, all unmarked -->
  </dc-line>
</dc-chart>
Daily Readings

point-shape="none" draws the line and nothing else. At any density the markers stop describing the data and start hiding it — and with none drawn, there is nothing per point to hover or click, so the popup and href move to the line.

Invisible Markers, Live Popups

<dc-chart width="500" height="350" auto-popup>
  <dc-title>Hover Any Point</dc-title>
  <dc-line stroke="#7c3aed" label="Revenue" point-shape="circle">
    <dc-point value="18" label="Jan" fill="transparent"></dc-point>
    <!-- 9 more, all fill="transparent" -->
  </dc-line>
</dc-chart>
Hover Any Point

When you want the markers invisible but still live, keep the shape and make the fill transparent. It must be fill="transparent" and not fill="none": SVG hit-testing counts painted area only, so none lets the hover fall through to the line and you get the line's popup instead of the point's. The two look identical on screen, which is what makes it worth knowing.

Styling

Use the standard style attribute to customize the chart border and other CSS properties:

Custom Border

<dc-chart width="500" height="350"
          style="border: 4px solid #FF5722; border-radius: 15px">
  <dc-title>Styled Line Chart</dc-title>
  <dc-line stroke="#FF5722" label="Revenue">
    <dc-point value="10" label="Jan"></dc-point>
    <dc-point value="15" label="Feb"></dc-point>
    <dc-point value="25" label="Mar"></dc-point>
    <dc-point value="35" label="Apr"></dc-point>
    <dc-point value="30" label="May"></dc-point>
  </dc-line>
</dc-chart>
Styled Line Chart

Hidden Values

<dc-chart width="500" height="350" show-value="false">
  <dc-title>Clean Line Chart</dc-title>
  <dc-line stroke="#2196F3" label="Series A">
    <dc-point value="15" label="Mon"></dc-point>
    <dc-point value="22" label="Tue"></dc-point>
    <dc-point value="18" label="Wed"></dc-point>
    <dc-point value="28" label="Thu"></dc-point>
    <dc-point value="25" label="Fri"></dc-point>
  </dc-line>
  <dc-line stroke="#4CAF50" label="Series B">
    <dc-point value="10" label="Mon"></dc-point>
    <dc-point value="18" label="Tue"></dc-point>
    <dc-point value="24" label="Wed"></dc-point>
    <dc-point value="20" label="Thu"></dc-point>
    <dc-point value="30" label="Fri"></dc-point>
  </dc-line>
</dc-chart>
Clean Line Chart

Negative Values

Line charts automatically adjust their y-axis to accommodate negative values. A zero line appears when the range spans both positive and negative values.

Line Crossing Zero

<dc-chart width="500" height="350">
  <dc-title>Temperature Variation</dc-title>
  <dc-line stroke="#2196F3" label="Temperature">
    <dc-point value="5" label="6am"></dc-point>
    <dc-point value="-2" label="Midnight"></dc-point>
    <dc-point value="-8" label="3am"></dc-point>
    <dc-point value="-3" label="6am"></dc-point>
    <dc-point value="8" label="9am"></dc-point>
    <dc-point value="15" label="Noon"></dc-point>
    <dc-point value="12" label="3pm"></dc-point>
  </dc-line>
</dc-chart>
Temperature Variation

Multiple Lines with Negatives

<dc-chart width="500" height="350" show-value="false">
  <dc-title>Profit/Loss by Division</dc-title>
  <dc-legend position="right"></dc-legend>
  <dc-line stroke="#4CAF50" label="Division A">
    <dc-point value="20" label="Q1"></dc-point>
    <dc-point value="35" label="Q2"></dc-point>
    <dc-point value="15" label="Q3"></dc-point>
    <dc-point value="45" label="Q4"></dc-point>
  </dc-line>
  <dc-line stroke="#F44336" label="Division B">
    <dc-point value="-10" label="Q1"></dc-point>
    <dc-point value="5" label="Q2"></dc-point>
    <dc-point value="-25" label="Q3"></dc-point>
    <dc-point value="10" label="Q4"></dc-point>
  </dc-line>
  <dc-line stroke="#FF9800" label="Division C">
    <dc-point value="5" label="Q1"></dc-point>
    <dc-point value="-15" label="Q2"></dc-point>
    <dc-point value="25" label="Q3"></dc-point>
    <dc-point value="30" label="Q4"></dc-point>
  </dc-line>
</dc-chart>
Profit/Loss by Division