YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Charts Control: Chart with Legend Example

# Charts Control: Chart with Legend Example

A legend may be displayed with the YUI Charts Control by setting a few simple styles. 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.

## Add the Legend

The Charts Control may display a legend by specifying the legend display style. Accepted values include `"top"`, `"right"`, `"bottom"`, `"left"`, and the default value `"none"`.

style: { legend: { display: "right" } }

Legends that are displayed on the left or right sides will arrange their series or category items vertically. When you specify that the legend should be displayed on the top or bottom, it will arrange its items horizontally.

## Other Legend Styles

Several substyles are available to allow you to customize the legend to fit your needs. In this example, we customize the font used by the text in the legend, the padding between the legend's items and the edge of the legend, and the spacing between the legend's items.

legend: { display: "right", padding: 10, spacing: 5, font: { family: "Arial", size: 13 } }

There are more styles available for legends, including border and background options. For full details about the legend styles, read the Charts Control User's Guide.

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### YUI Logger Output:

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

Reload with logging
and debugging enabled.

### Charts Control Examples:

- Charts Quickstart Example
- Chart with Legend Example
- Skinning a Chart Example
- Chart and DataTable Example
- Chart with DataSource Polling
- Stacked Bar Chart
- Charts in a TabView
- Column Chart with Rotated Title and Labels
- Styling Lines, Borders and Fills
- Chart with 2 Numeric Axes
- Hide series in a chart.
- Customize series items
- Apply scope to label functions

### More Charts Control Resources:

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

Copyright © 2010 Yahoo! Inc. All rights reserved.

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