YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Charts Control: Skinning a Chart Example

# Charts Control: Skinning a Chart Example

This example demonstrates how to modify the YUI Charts Control's styles to give it a custom appearance.

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.

Wilson's Supermarket - Product Comparison
Unable to load Flash content. The YUI Charts Control requires Flash Player 9.0.45 or higher. You can download the latest version of Flash Player from the Adobe Flash Player Download Center.

## Styling the Chart

To change the visual appearance of a Charts Control instance, one uses the `style` initialization attribute. Each part of the chart, including the background and border, xAxis and yAxis, and the dataTip may be customized.

style: { border: {color: 0x96acb4, size: 12}, font: {name: "Arial Black", size: 14, color: 0x586b71}, dataTip: { border: {color: 0x2e434d, size: 2}, font: {name: "Arial Black", size: 13, color: 0x586b71} }, xAxis: { color: 0x2e434d }, yAxis: { color: 0x2e434d, majorTicks: {color: 0x2e434d, length: 4}, minorTicks: {color: 0x2e434d, length: 2}, majorGridLines: {size: 0} } }

Notice that the main `font` style applies to both of the axes on the chart. The dataTip includes a custom `border` and `font`. The yAxis includes custom ticks and we hide the majorGridLines by setting the `size` value to `0`.

## Setting Series Skins

The series definition includes `style` values for both series with declarations the for background image and color. These particular skins are transparent PNG images, and they allow the base color of the marker to show through. The marker size matches the image width.

var seriesDef = [ { yField: "pork", displayName: "Sales of Pork", style: { image: "assets/tube.png", mode: "no-repeat", color: 0x2e434d, size: 40 } }, { yField: "beef", displayName: "Sales of Beef", style: { image: "assets/tube.png", mode: "no-repeat", color: 0xc2d81e, size: 40 } } ];

The `mode` value specifies how the image will be displayed. In this case `"no-repeat"` ensures that the image will be displayed only once. Other possible values include `"repeat"`, `"repeat-x"`, `"repeat-y"`, and `"stretch"`.

## 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: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

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