Yahoo! Developer Network Home - Help

YDN Site Search

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

# Charts Control (experimental): Chart with Legend Example

Though the YUI Charts Control doesn't support legends out of the box, you can easily create a legend using a simple unordered list. This example shows you how.

Please note: The YUI Charts Control requires Flash Player 9.0.45 or higher. The latest version of Flash Player is available at the Adobe Flash Player Download Center.

View example in new window.

Survey: What is your favorite season?
Unable to load Flash content. The YUI Charts Control requires Flash Player 9.0.45 or higher. You can install the latest version at the Adobe Flash Player Download Center.

- Summer
- Fall
- Spring
- Winter
- Undecided

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

<ul id="legend"> <li class="summer"><span class="categoryName">Summer</span></li> <li class="fall"><span class="categoryName">Fall</span></li> <li class="spring"><span class="categoryName">Spring</span></li> <li class="winter"><span class="categoryName">Winter</span></li> <li class="undecided"><span class="categoryName">Undecided</span></li> </ul>

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.

#legend { float: left; list-style: none; padding: 5px; margin-left: 10px; margin-top: 90px; background-color: #ffffff; } #legend li { height: 1.2em; padding-left: 15px; margin-bottom: 4px; }

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

.summer { background-color: #00b8bf; } .fall { background-color: #8dd5e7; } .spring { background-color: #c0fff6; } .winter { background-color: #ffa928; } .undecided { background-color: #edff9f; }

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.

.categoryName { display: block; padding-left: 4px; background-color: #ffffff; }

### YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

### Charts Control (experimental) Examples:

- Charts Quickstart Example
- Chart with Legend Example
- Skinning a Chart Example
- Chart and DataTable Example
- Chart with DataSource Polling

### More Charts Control (experimental) Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings