Bar Chart Basics

Orientation

Use the orientation attribute to control bar direction:

• vertical (default) - Bars grow upward from the bottom
• horizontal - Bars grow rightward from the left
• vertical-reverse - Bars grow downward from the top
• horizontal-reverse - Bars grow leftward from the right

<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>

<dc-chart width="500" height="350" orientation="horizontal"
          label-position="inside-center">
  <dc-title>Top Products</dc-title>
  <dc-bar value="85" fill="#FF6B6B" label="Product A"></dc-bar>
  <dc-bar value="120" fill="#4ECDC4" label="Product B"></dc-bar>
  <dc-bar value="95" fill="#45B7D1" label="Product C"></dc-bar>
  <dc-bar value="150" fill="#96CEB4" label="Product D"></dc-bar>
</dc-chart>

<dc-chart width="500" height="350" orientation="vertical-reverse">
  <dc-title>Download Speed by Server (Mbps)</dc-title>
  <dc-bar value="120" label="Server 1" fill="#00BCD4"></dc-bar>
  <dc-bar value="95" label="Server 2" fill="#00BCD4"></dc-bar>
  <dc-bar value="150" label="Server 3" fill="#00BCD4"></dc-bar>
  <dc-bar value="110" label="Server 4" fill="#00BCD4"></dc-bar>
</dc-chart>

<dc-chart width="500" height="350" orientation="horizontal-reverse">
  <dc-title>Code Complexity Score</dc-title>
  <dc-bar value="85" label="Module A" fill="#673AB7"></dc-bar>
  <dc-bar value="120" label="Module B" fill="#673AB7"></dc-bar>
  <dc-bar value="95" label="Module C" fill="#673AB7"></dc-bar>
  <dc-bar value="140" label="Module D" fill="#673AB7"></dc-bar>
</dc-chart>

Default Colors

Use bar-color on the chart to set a default fill color for all bars, or use palette for automatic color assignment:

<dc-chart width="500" height="350" bar-color="#9C27B0">
  <dc-title>Single Color Theme</dc-title>
  <dc-bar value="30" label="Q1"></dc-bar>
  <dc-bar value="50" label="Q2"></dc-bar>
  <dc-bar value="40" label="Q3"></dc-bar>
  <dc-bar value="60" label="Q4"></dc-bar>
</dc-chart>

<dc-chart width="500" height="350" palette="category10">
  <dc-title>Auto Colors from Palette</dc-title>
  <dc-bar value="30" label="Alpha"></dc-bar>
  <dc-bar value="50" label="Beta"></dc-bar>
  <dc-bar value="40" label="Gamma"></dc-bar>
  <dc-bar value="60" label="Delta"></dc-bar>
</dc-chart>