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.

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.

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.