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.

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.

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.

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

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.

YUI Logger Output:

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

Reload with logging
and debugging enabled.

More Charts Control (experimental) Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

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