Legends

Control the positioning and content of legends in your charts

Position (Automatic Padding)

Control legend positioning using the position attribute:

Right (Default)

<dc-chart width="600" 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-legend position="right"></dc-legend>
</dc-chart>
Monthly Sales

Left

<dc-chart width="600" 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-legend position="left"></dc-legend>
</dc-chart>
Monthly Sales

Top Legends

Top-Left

<dc-legend position="top-left"></dc-legend>
Monthly Sales

Top

<dc-legend position="top"></dc-legend>
Monthly Sales

Top-Right

<dc-legend position="top-right"></dc-legend>
Monthly Sales

Bottom Legends

Bottom-Left

<dc-legend position="bottom-left"></dc-legend>
Monthly Sales

Bottom

<dc-legend position="bottom"></dc-legend>
Monthly Sales

Bottom-Right

<dc-legend position="bottom-right"></dc-legend>
Monthly Sales

Combined Example - Pie Chart

Using custom title and legend positions together:

Title + Legend

<dc-pie-chart width="700" height="500">
  <dc-title position="top-left">Product Distribution</dc-title>
  <dc-pie-slice value="30" label="Electronics" fill="#2196F3"></dc-pie-slice>
  <dc-pie-slice value="25" label="Clothing" fill="#4CAF50"></dc-pie-slice>
  <dc-pie-slice value="20" label="Food" fill="#FF9800"></dc-pie-slice>
  <dc-pie-slice value="15" label="Books" fill="#9C27B0"></dc-pie-slice>
  <dc-pie-slice value="10" label="Toys" fill="#FF5722"></dc-pie-slice>
  <dc-legend position="bottom">
  <dc-title>Categories</dc-title>
  </dc-legend>
</dc-pie-chart>
Product Distribution Categories

Tabular Legends

Control the number of columns in tabular legends using the columns attribute:

Single Column (Default)

<dc-pie-chart width="500" height="350">
  <dc-title>Sales by Region</dc-title>
  <dc-pie-slice value="35" label="North" fill="#2196F3"></dc-pie-slice>
  <dc-pie-slice value="28" label="South" fill="#4CAF50"></dc-pie-slice>
  <dc-pie-slice value="22" label="East" fill="#FF9800"></dc-pie-slice>
  <dc-pie-slice value="15" label="West" fill="#9C27B0"></dc-pie-slice>
  <dc-legend columns="1"></dc-legend>
</dc-pie-chart>
Sales by Region

Two Columns

<dc-pie-chart width="500" height="350">
  <dc-title>Sales by Region</dc-title>
  <dc-pie-slice value="35" label="North" fill="#2196F3"></dc-pie-slice>
  <dc-pie-slice value="28" label="South" fill="#4CAF50"></dc-pie-slice>
  <dc-pie-slice value="22" label="East" fill="#FF9800"></dc-pie-slice>
  <dc-pie-slice value="15" label="West" fill="#9C27B0"></dc-pie-slice>
  <dc-legend columns="2" position="bottom"></dc-legend>
</dc-pie-chart>
Sales by Region

Three Columns

<dc-chart width="500" height="350">
  <dc-title>Monthly Performance</dc-title>
  <dc-bar value="45" label="Jan" fill="#E91E63"></dc-bar>
  <dc-bar value="52" label="Feb" fill="#9C27B0"></dc-bar>
  <dc-bar value="38" label="Mar" fill="#3F51B5"></dc-bar>
  <dc-bar value="61" label="Apr" fill="#2196F3"></dc-bar>
  <dc-bar value="55" label="May" fill="#00BCD4"></dc-bar>
  <dc-bar value="48" label="Jun" fill="#4CAF50"></dc-bar>
  <dc-legend columns="3" position="bottom"></dc-legend>
</dc-chart>
Monthly Performance

Wrapped Legends

Use columns="*" for a wrapped/inline layout that flows items horizontally:

Wrapped Legend at Bottom

<dc-pie-chart width="500" height="400">
  <dc-title>Product Categories</dc-title>
  <dc-pie-slice value="30" label="Electronics" fill="#2196F3"></dc-pie-slice>
  <dc-pie-slice value="25" label="Clothing" fill="#4CAF50"></dc-pie-slice>
  <dc-pie-slice value="20" label="Food" fill="#FF9800"></dc-pie-slice>
  <dc-pie-slice value="15" label="Books" fill="#9C27B0"></dc-pie-slice>
  <dc-pie-slice value="10" label="Toys" fill="#FF5722"></dc-pie-slice>
  <dc-legend columns="*" position="bottom"></dc-legend>
</dc-pie-chart>
Product Categories

Wrapped Legend at Top

<dc-chart width="500" height="400">
  <dc-title position="bottom">Team Scores</dc-title>
  <dc-bar value="85" label="Alpha" fill="#E91E63"></dc-bar>
  <dc-bar value="92" label="Beta" fill="#9C27B0"></dc-bar>
  <dc-bar value="78" label="Gamma" fill="#3F51B5"></dc-bar>
  <dc-bar value="88" label="Delta" fill="#2196F3"></dc-bar>
  <dc-legend columns="*" position="top"></dc-legend>
</dc-chart>
Team Scores

Legend Contents

Control what information is displayed in the legend using show-label, show-value, and show-percent attributes:

Label Only

<dc-chart width="500" height="350">
  <dc-title>Label Only</dc-title>
  <dc-bar value="45" label="Product A" fill="#2196F3"></dc-bar>
  <dc-bar value="30" label="Product B" fill="#4CAF50"></dc-bar>
  <dc-bar value="25" label="Product C" fill="#FF9800"></dc-bar>
  <dc-legend show-value="false" show-percent="false"></dc-legend>
</dc-chart>
Label Only

Label + Value

<dc-chart width="500" height="350">
  <dc-title>Label + Value</dc-title>
  <dc-bar value="45" label="Product A" fill="#2196F3"></dc-bar>
  <dc-bar value="30" label="Product B" fill="#4CAF50"></dc-bar>
  <dc-bar value="25" label="Product C" fill="#FF9800"></dc-bar>
  <dc-legend show-value="true" show-percent="false"></dc-legend>
</dc-chart>
Label + Value

Label + Percent

<dc-chart width="500" height="350">
  <dc-title>Label + Percent</dc-title>
  <dc-bar value="45" label="Product A" fill="#2196F3"></dc-bar>
  <dc-bar value="30" label="Product B" fill="#4CAF50"></dc-bar>
  <dc-bar value="25" label="Product C" fill="#FF9800"></dc-bar>
  <dc-legend show-value="false" show-percent="true"></dc-legend>
</dc-chart>
Label + Percent

Label + Value + Percent

<dc-chart width="500" height="350">
  <dc-title>Label + Value + Percent</dc-title>
  <dc-bar value="45" label="Product A" fill="#2196F3"></dc-bar>
  <dc-bar value="30" label="Product B" fill="#4CAF50"></dc-bar>
  <dc-bar value="25" label="Product C" fill="#FF9800"></dc-bar>
  <dc-legend show-value="true" show-percent="true"></dc-legend>
</dc-chart>
Label + Value + Percent

Custom Legends

Use <dc-legend-item> elements to define legend entries manually. This is useful for semantic coloring where multiple data elements share the same color but represent different concepts.

Semantic Coloring

<dc-chart width="500" height="350">
  <dc-title>Department Performance</dc-title>
  <dc-bar value="85" fill="#4CAF50" label="Engineering"></dc-bar>
  <dc-bar value="78" fill="#FF9800" label="Marketing"></dc-bar>
  <dc-bar value="92" fill="#4CAF50" label="Sales"></dc-bar>
  <dc-bar value="65" fill="#F44336" label="Operations"></dc-bar>
  <dc-legend>
  <dc-legend-item fill="#4CAF50" label="Above Target"></dc-legend-item>
  <dc-legend-item fill="#FF9800" label="Near Target"></dc-legend-item>
  <dc-legend-item fill="#F44336" label="Below Target"></dc-legend-item>
  </dc-legend>
</dc-chart>
Department Performance

Aggregated Values

<dc-chart width="500" height="350">
  <dc-title>Department Performance</dc-title>
  <dc-bar value="85" fill="#4CAF50" label="Engineering"></dc-bar>
  <dc-bar value="78" fill="#FF9800" label="Marketing"></dc-bar>
  <dc-bar value="92" fill="#4CAF50" label="Sales"></dc-bar>
  <dc-bar value="65" fill="#F44336" label="Operations"></dc-bar>
  <dc-legend show-value show-percent>
  <dc-legend-item fill="#4CAF50" label="Above Target" value="177"></dc-legend-item>
  <dc-legend-item fill="#FF9800" label="Near Target" value="78"></dc-legend-item>
  <dc-legend-item fill="#F44336" label="Below Target" value="65"></dc-legend-item>
  </dc-legend>
</dc-chart>
Department Performance

Line Legend

<dc-chart width="500" height="350">
  <dc-title>Actual vs Target</dc-title>
  <dc-line stroke="#2196F3" label="Actual">
  <dc-point value="10" label="Jan"></dc-point>
  <dc-point value="25" label="Feb"></dc-point>
  <dc-point value="15" label="Mar"></dc-point>
  <dc-point value="30" label="Apr"></dc-point>
  </dc-line>
  <dc-line stroke="#F44336" stroke-dasharray="dashed" label="Target">
  <dc-point value="20" label="Jan"></dc-point>
  <dc-point value="20" label="Feb"></dc-point>
  <dc-point value="20" label="Mar"></dc-point>
  <dc-point value="20" label="Apr"></dc-point>
  </dc-line>
  <dc-legend>
  <dc-legend-item stroke="#2196F3" label="Actual" shape="line"></dc-legend-item>
  <dc-legend-item stroke="#F44336" label="Target" shape="line"></dc-legend-item>
  </dc-legend>
</dc-chart>
Actual vs Target

Mixed Shapes

<dc-chart width="500" height="350">
  <dc-title>Sales Analysis</dc-title>
  <dc-bar value="45" fill="#2196F3" label="Q1"></dc-bar>
  <dc-bar value="52" fill="#2196F3" label="Q2"></dc-bar>
  <dc-bar value="38" fill="#2196F3" label="Q3"></dc-bar>
  <dc-bar value="61" fill="#2196F3" label="Q4"></dc-bar>
  <dc-line stroke="#F44336" label="Trend">
  <dc-point value="40" label="Q1"></dc-point>
  <dc-point value="45" label="Q2"></dc-point>
  <dc-point value="50" label="Q3"></dc-point>
  <dc-point value="55" label="Q4"></dc-point>
  </dc-line>
  <dc-legend>
  <dc-legend-item fill="#2196F3" label="Quarterly Sales" shape="square"></dc-legend-item>
  <dc-legend-item stroke="#F44336" label="Trend Line" shape="line"></dc-legend-item>
  </dc-legend>
</dc-chart>
Sales Analysis

Legend Entries as Links

An entry can be a link. Which attribute you use depends on where the entry comes from — and the difference matters, because <dc-legend-item> children replace the legend the chart derives from your data.

Derived Legend: legend-href

<dc-chart width="500" height="350">
  <dc-legend></dc-legend>
  <dc-bar value="95" label="Q1" legend-href="#q1"></dc-bar>
  <dc-bar value="80" label="Q2" legend-href="#q2"></dc-bar>
  <dc-bar value="120" label="Q3" legend-href="#q3"></dc-bar>
  <dc-bar value="105" label="Q4"></dc-bar>
</dc-chart>

Put it on the element the entry describes. The chart keeps deriving the legend; Q4 has no legend-href and is simply not a link.

Hand-Written Legend: href

<dc-chart width="500" height="350">
  <dc-legend>
    <dc-legend-item fill="#16a34a" label="Above Target"
                    href="#above"></dc-legend-item>
    <dc-legend-item fill="#f59e0b" label="Near Target"
                    href="#near"></dc-legend-item>
  </dc-legend>
  <dc-bar value="95" label="Q1" fill="#16a34a"></dc-bar>
  <!-- three more bars -->
</dc-chart>

Use href when you are writing the entries anyway — here a threshold key, which has no single element to hang off.

legend-href is separate from href on purpose. A chart whose bars link somewhere did not thereby ask its legend to navigate too, and the two often want different destinations — the bar to a record, the legend to a definition. Nothing is inherited in either direction.

The entry becomes a real SVG <a>, so middle-click and open-in-new-tab work, and the whole entry is the target rather than just the words. Style it with ::part(legend-link), and use legend-target for a link target.

Constraining Legend Width

max-width caps how wide the legend may grow, in viewBox units. Useful when labels are long and would otherwise take space from the plot.

Unconstrained

<dc-chart width="500" height="350">
  <dc-legend></dc-legend>
  <dc-bar value="30" label="Western Region"></dc-bar>
  <dc-bar value="45" label="Eastern Region"></dc-bar>
  <dc-bar value="38" label="Northern Territories"></dc-bar>
</dc-chart>

max-width="120"

<dc-chart width="500" height="350">
  <dc-legend max-width="120"></dc-legend>
  <dc-bar value="30" label="Western Region"></dc-bar>
  <dc-bar value="45" label="Eastern Region"></dc-bar>
  <dc-bar value="38" label="Northern Territories"></dc-bar>
</dc-chart>