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.

Survey: What is your favorite season?
Unable to load Flash content.
  • 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 © 2007 Yahoo! Inc. All rights reserved.

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