Data

We will start by adding our data for the charts.

Series and Styles

Next we'll add a series to our chart, and give it a style.

In the styles for our x-axis and y-axis, we'll set the corresponding labelRotation and titleRotation to -90. This will make the title on the y-axis and the labels on the x-axis to be rotated -90 degrees (counterclockwise). While both styles accept values between -90 and 90, it is generally recomended to only use the values -90, 90 or 0 (default), as text fields will display more clearly at these settings.

Chart

Add our axes and label formatting methods.

Finally, we'll add the chart and call it good.

There are even more styles available for the axes than we've covered in this tutorial. For full details about the axes 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.