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>

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>

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:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #legend-example-1 { display: flex; flex-direction: row; gap: 40px; width: 100%; max-width: 600px; margin: 0 auto; } #legend-example-1 .legend { flex-shrink: 3; }

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>

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:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #legend-example-2 { width: 100%; max-width: 500px; margin: 0 auto; } #legend-example-2 .legend { margin-block-start: 20px; justify-content: space-between; }

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>

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:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #legend-example-3 { display: flex; flex-direction: row; gap: 40px; width: 100%; max-width: 600px; margin: 0 auto; } #legend-example-3 .legend { flex-shrink: 3; }

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>

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:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #legend-example-4 { display: flex; flex-direction: row; gap: 40px; width: 100%; max-width: 600px; margin: 0 auto; } #legend-example-4 .legend { flex-shrink: 3; }

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>

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:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #legend-example-5 { display: flex; flex-direction: row; gap: 40px; width: 100%; max-width: 600px; margin: 0 auto; } #legend-example-5 .legend { flex-shrink: 3; }

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>

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:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #legend-example-6 { display: flex; flex-direction: row; gap: 40px; width: 100%; max-width: 600px; margin: 0 auto; } #legend-example-6 .legend { flex-shrink: 3; }

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>

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:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #legend-example-7 { display: flex; flex-direction: row; gap: 40px; width: 100%; max-width: 600px; margin: 0 auto; } #legend-example-7 .legend { flex-shrink: 3; }

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>

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:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #legend-example-8 { display: flex; flex-direction: row; gap: 40px; width: 100%; max-width: 600px; margin: 0 auto; } #legend-example-8 .legend { flex-shrink: 3; }

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

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:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #legend-example-9 { display: flex; flex-direction: row; gap: 40px; width: 100%; max-width: 600px; margin: 0 auto; } #legend-example-9 .legend { flex-shrink: 3; color: #ccc; background-color: #333; box-shadow: 0 0 15px #000; }

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

.legend > li:nth-of-type(3) {
  color: red;
}

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:

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } #legend-example-10 { display: flex; flex-direction: row; gap: 40px; width: 100%; max-width: 600px; margin: 0 auto; } #legend-example-10 .legend { flex-shrink: 3; color: #ccc; background-color: #333; box-shadow: 0 0 15px #000; } #legend-example-10 .legend > li:nth-of-type(3) { color: red; }