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.
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.
Notice that the main
font style applies to both of the axes on the chart. The dataTip includes a custom
font. The yAxis includes custom ticks and we hide the majorGridLines by setting the
size value to
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.
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
Note: Logging and debugging is currently turned off for this example.
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.