#

# Example: Create a Chart with a Time Axis

This example shows how to create a `Chart` with a Time Axis.

### This example shows how to create a Chart with a Time Axis.

When plotting data across a range of dates, it's sometimes preferred to use `TimeAxis` instead of a `CategoryAxis`. While a `CategoryAxis` plots ticks on an axis for each data point on a graph, a `TimeAxis` plots ticks evenly across a time range. A `TimeAxis` can be applied to a Chart by setting its `categoryType` attribute to "time".

#### CSS

    #mychart {
        margin:10px 10px 10px 10px;
        width:90%;
        max-width: 800px;
        height:400px;
    }

#### HTML

    <div id="mychart"></div>

#### JavaScript

    var myDataValues = [
        {date:"1/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},
        {date:"2/1/2010", miscellaneous:50, expenses:9100, revenue:100},
        {date:"3/1/2010", miscellaneous:400, expenses:1100, revenue:1500},
        {date:"4/1/2010", miscellaneous:200, expenses:1900, revenue:2800},
        {date:"5/1/2010", miscellaneous:500, expenses:7000, revenue:2650},
        {date:"6/1/2010", miscellaneous:3000, expenses:4700, revenue:1200},
        {date:"7/1/2010", miscellaneous:6550, expenses:6500, revenue:1100},
        {date:"8/1/2010", miscellaneous:4005, expenses:2600, revenue:3500},
        {date:"9/1/2010", miscellaneous:1200, expenses:8900, revenue:3800},
        {date:"10/1/2010", miscellaneous:2000, expenses:1000, revenue:3650},
        {date:"11/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},
        {date:"12/1/2010", miscellaneous:5000, expenses:3100, revenue:4100}
    ];

    var mychart = new Y.Chart({
    			dataProvider:myDataValues,
    			render:"#mychart",
    			styles: {
    				axes: {
    					date: {
    						label: {
    							rotation: -45
    						}
    					}
    				}
    			},
    			categoryKey:"date",
    			categoryType:"time"
    		});