# Legend

Chart legends display the labels of the datasets as they appear in the chart.

# Legend Structure

The legend is a separate component with a separate HTML tag. You have the freedom to position the legend wherever you want. Just like any other HTML tag.

Note that currently legends require the use of <ul> with <li> or <ol> with <li> tags. In future versions, you will have the freedom to use any HTML tag.

# Legend Position

If you choose to display a chart legend, position it wherever you want. Use float (float: right;), flexbox (flex-direction: row;), grid (grid-template-columns: 100px 1fr;), or any other method for this.

<div id="my-chart">

  <ul class="charts-css legend">
  </ul>

  <table class="charts-css bar|column|area|line multiple ...">
  </table>

</div>
1
2
3
4
5
6
7
8
9

# Legend Class

Use the .legend class to style your chart legend.

<ul class="charts-css legend">
  <li> Label 1 </li>
  <li> Label 2 </li>
  <li> Label 3 </li>
</ul>
1
2
3
4
5
Front End Developer Salary
Continent 2000 2005 2010 2015 2020
Asia $20K $30K $40K $50K $60K
Australia $10K $30K $50K $70K $90K
Europe $40K $60K $75K $90K $100K
  • 2000
  • 2005
  • 2010
  • 2015
  • 2020
Open in:

# Legend Orientation

By default, legend dataset labels are vertically aligned and positioned beside the chart. To align legend dataset labels horizontally, use the .legend-inline class. This is usually used to position the legend above or below the chart.

<ul class="charts-css legend legend-inline">
  <li> Label 1 </li>
  <li> Label 2 </li>
  <li> Label 3 </li>
</ul>
1
2
3
4
5
Front End Developer Salary
Continent 2000 2005 2010 2015 2020
Asia $20K $30K $40K $50K $60K
Australia $10K $30K $50K $70K $90K
Europe $40K $60K $75K $90K $100K
  • 2000
  • 2005
  • 2010
  • 2015
  • 2020
Open in:

# Legend Shape

# Circle

Use the .legend-circle class to display a circular shaped label.

<ul class="charts-css legend legend-circle">
  <li> Label 1 </li>
  <li> Label 2 </li>
  <li> Label 3 </li>
</ul>
1
2
3
4
5
Front End Developer Salary
Continent 2000 2005 2010 2015 2020
Asia $20K $30K $40K $50K $60K
Australia $10K $30K $50K $70K $90K
Europe $40K $60K $75K $90K $100K
  • 2000
  • 2005
  • 2010
  • 2015
  • 2020
Open in:

# Ellipse

Use the .legend-ellipse class to display an ellipse shaped label.

<ul class="charts-css legend legend-ellipse">
  <li> Label 1 </li>
  <li> Label 2 </li>
  <li> Label 3 </li>
</ul>
1
2
3
4
5
Front End Developer Salary
Continent 2000 2005 2010 2015 2020
Asia $20K $30K $40K $50K $60K
Australia $10K $30K $50K $70K $90K
Europe $40K $60K $75K $90K $100K
  • 2000
  • 2005
  • 2010
  • 2015
  • 2020
Open in:

# Square

Use the .legend-square class to display a square shaped label.

<ul class="charts-css legend legend-square">
  <li> Label 1 </li>
  <li> Label 2 </li>
  <li> Label 3 </li>
</ul>
1
2
3
4
5
Front End Developer Salary
Continent 2000 2005 2010 2015 2020
Asia $20K $30K $40K $50K $60K
Australia $10K $30K $50K $70K $90K
Europe $40K $60K $75K $90K $100K
  • 2000
  • 2005
  • 2010
  • 2015
  • 2020
Open in:

# Rectangle

Use the .legend-rectangle class to display a rectangular shaped label.

<ul class="charts-css legend legend-rectangle">
  <li> Label 1 </li>
  <li> Label 2 </li>
  <li> Label 3 </li>
</ul>
1
2
3
4
5
Front End Developer Salary
Continent 2000 2005 2010 2015 2020
Asia $20K $30K $40K $50K $60K
Australia $10K $30K $50K $70K $90K
Europe $40K $60K $75K $90K $100K
  • 2000
  • 2005
  • 2010
  • 2015
  • 2020
Open in:

# Rhombus

Use the .legend-rhombus class to display a rhombus shaped label.

<ul class="charts-css legend legend-rhombus">
  <li> Label 1 </li>
  <li> Label 2 </li>
  <li> Label 3 </li>
</ul>
1
2
3
4
5
Front End Developer Salary
Continent 2000 2005 2010 2015 2020
Asia $20K $30K $40K $50K $60K
Australia $10K $30K $50K $70K $90K
Europe $40K $60K $75K $90K $100K
  • 2000
  • 2005
  • 2010
  • 2015
  • 2020
Open in:

# Line

Use the .legend-line class to display a line shaped label.

<ul class="charts-css legend legend-line">
  <li> Label 1 </li>
  <li> Label 2 </li>
  <li> Label 3 </li>
</ul>
1
2
3
4
5
Front End Developer Salary
Continent 2000 2005 2010 2015 2020
Asia $20K $30K $40K $50K $60K
Australia $10K $30K $50K $70K $90K
Europe $40K $60K $75K $90K $100K
  • 2000
  • 2005
  • 2010
  • 2015
  • 2020
Open in:

# Custom Styles

Change any aspect of the legend element using CSS. Simply target the CSS selector and apply your own style.

For example, let's change the text color, the background color and add a box-shadow:

.legend {
  color: #ccc;
  background-color: #333;
  box-shadow: 0 0 15px #000;
}
1
2
3
4
5
Front End Developer Salary
Continent 2000 2005 2010 2015 2020
Asia $20K $30K $40K $50K $60K
Australia $10K $30K $50K $70K $90K
Europe $40K $60K $75K $90K $100K
  • 2000
  • 2005
  • 2010
  • 2015
  • 2020
Open in:

To target an individual legend element, we can do something like this:

.legend > li:nth-of-type(3) {
  color: red;
}
1
2
3
Front End Developer Salary
Continent 2000 2005 2010 2015 2020
Asia $20K $30K $40K $50K $60K
Australia $10K $30K $50K $70K $90K
Europe $40K $60K $75K $90K $100K
  • 2000
  • 2005
  • 2010
  • 2015
  • 2020
Open in: