# Legend

Chart legend displays the labels of the datasets appear on a chart. The chart visualize the raw data, the legend visualize the datasets.

# 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: Currently legend required to use <ul> + <li> or <ol> + <li> tags. In the next versions you will have the freedom to use any HTML tag.

# Legend Position

So if you choose to display the chart legend. You can position it wherever you want. Use float (float: right;), flexbox (flex-direction: row;), grid (grid-template-columns: 100px 1fr;), or any other method.

<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 vertically are aligned vertically. Usually used to position the legend beside the chart.

To aligning legend dataset labels horizontally, use the .legend-inline class. 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 shape 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 a circular shape 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 shape 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 shape 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 circular shape 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 shape 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

You can change every aspect of the legend element using CSS. Simply target the CSS selector and apply your own style.

For example, lets 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:

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