Titles

Control the positioning of titles in your charts

Title Positions - Top Alignment

Titles can be positioned at top, top-left, and top-right:

Top (Default)

<dc-chart width="450" height="300">
  <dc-title position="top">Top Title</dc-title>
  <dc-bar value="10" fill="#FF6B6B" label="A"></dc-bar>
  <dc-bar value="25" fill="#4ECDC4" label="B"></dc-bar>
  <dc-bar value="15" fill="#45B7D1" label="C"></dc-bar>
</dc-chart>
Top Title

Top-Left

<dc-chart width="450" height="300">
  <dc-title position="top-left">Top-Left Title</dc-title>
  <dc-bar value="10" fill="#FF6B6B" label="A"></dc-bar>
  <dc-bar value="25" fill="#4ECDC4" label="B"></dc-bar>
  <dc-bar value="15" fill="#45B7D1" label="C"></dc-bar>
</dc-chart>
Top-Left Title

Top-Right

<dc-chart width="450" height="300">
  <dc-title position="top-right">Top-Right Title</dc-title>
  <dc-bar value="10" fill="#FF6B6B" label="A"></dc-bar>
  <dc-bar value="25" fill="#4ECDC4" label="B"></dc-bar>
  <dc-bar value="15" fill="#45B7D1" label="C"></dc-bar>
</dc-chart>
Top-Right Title

Title Positions - Bottom Alignment

Titles can also be positioned at the bottom:

Bottom

<dc-chart width="450" height="300">
  <dc-title position="bottom">Bottom Title</dc-title>
  <dc-bar value="10" fill="#FF6B6B" label="A"></dc-bar>
  <dc-bar value="25" fill="#4ECDC4" label="B"></dc-bar>
  <dc-bar value="15" fill="#45B7D1" label="C"></dc-bar>
</dc-chart>
Bottom Title

Bottom-Left

<dc-chart width="450" height="300">
  <dc-title position="bottom-left">Bottom-Left Title</dc-title>
  <dc-bar value="10" fill="#FF6B6B" label="A"></dc-bar>
  <dc-bar value="25" fill="#4ECDC4" label="B"></dc-bar>
  <dc-bar value="15" fill="#45B7D1" label="C"></dc-bar>
</dc-chart>
Bottom-Left Title

Bottom-Right

<dc-chart width="450" height="300">
  <dc-title position="bottom-right">Bottom-Right Title</dc-title>
  <dc-bar value="10" fill="#FF6B6B" label="A"></dc-bar>
  <dc-bar value="25" fill="#4ECDC4" label="B"></dc-bar>
  <dc-bar value="15" fill="#45B7D1" label="C"></dc-bar>
</dc-chart>
Bottom-Right Title

Title Positions - Side (Rotated)

Titles on the left and right are rotated vertically:

Left

<dc-chart width="450" height="350">
  <dc-title position="left">Left Title</dc-title>
  <dc-bar value="10" fill="#FF6B6B" label="A"></dc-bar>
  <dc-bar value="25" fill="#4ECDC4" label="B"></dc-bar>
  <dc-bar value="15" fill="#45B7D1" label="C"></dc-bar>
</dc-chart>
Left Title

Right

<dc-chart width="450" height="350">
  <dc-title position="right">Right Title</dc-title>
  <dc-bar value="10" fill="#FF6B6B" label="A"></dc-bar>
  <dc-bar value="25" fill="#4ECDC4" label="B"></dc-bar>
  <dc-bar value="15" fill="#45B7D1" label="C"></dc-bar>
</dc-chart>
Right Title