YUI Library Examples: Charts Control (experimental): Chart with Legend Example

Build and HTML Legend

The Charts Control doesn't have a legend by default. However, one can build a simple legend using a standard HTML unordered list.


1	<ul id="legend">
2	<li class="summer"><span class="categoryName">Summer</span></li>
3	<li class="fall"><span class="categoryName">Fall</span></li>
4	<li class="spring"><span class="categoryName">Spring</span></li>
5	<li class="winter"><span class="categoryName">Winter</span></li>
6	<li class="undecided"><span class="categoryName">Undecided</span></li>
7	</ul>
	view plain \| print \| ?

Each list item has its own class to allow CSS to give it the correct background color. A span element surrounds the text in the list item to allow styling, and a descriptive CSS class may be provided for extra semantic meaning.

Adding Styles

The legend itself is given a list-style value of none to hide the bullets. Each list item is given left padding to allow a background-color to be displayed.


1	#legend
2	{
3	float: left;
4	list-style: none;
5	padding: 5px;
6	margin-left: 10px;
7	margin-top: 90px;
8	background-color: #ffffff;
9	}
10
11	#legend li
12	{
13	height: 1.2em;
14	padding-left: 15px;
15	margin-bottom: 4px;
16	}
	view plain \| print \| ?

Each of the PieChart's categories has its own class that is used to set the background-color of the list item.


1	.summer
2	{
3	background-color: #00b8bf;
4	}
5	.fall
6	{
7	background-color: #8dd5e7;
8	}
9	.spring
10	{
11	background-color: #c0fff6;
12	}
13	.winter
14	{
15	background-color: #ffa928;
16	}
17	.undecided
18	{
19	background-color: #edff9f;
20	}
	view plain \| print \| ?

The span element inside the list items is given a background-color to match the legend's main background and to hide the category color under the text. Setting display:block conceals the colored background on the right side.


1	.categoryName
2	{
3	display: block;
4	padding-left: 4px;
5	background-color: #ffffff;
6	}
	view plain \| print \| ?

YUI Library Examples: Charts Control (experimental): Chart with Legend Example

Build and HTML Legend

Adding Styles

YUI Logger Output:

Charts Control (experimental) Examples:

More Charts Control (experimental) Resources: