#

# Example: Update Chart Axis

This example shows how to access `Chart` instance's value axis after the `Chart` has rendered.

axis:

color:

rotation:

### Access and Update a `Chart` Instance's Axis.

Often times, you will need to update a chart after it has been rendered. This example demonstrates how to access and update an axis. Specifically, we'll update the rotation and color of the axis labels.

A `Chart` instance's axes can be accessed through the `getAxisByKey` method. This method takes the axis' key identifier as an argument. If you have explicitly set your axis through the `axes` attribute, you will know the key identifier. If not, the default key identifier for the value axis is "values" and the default key identifier for the category axis is `category`. Once you have a reference for the axis, you can update all of its public attributes.

#### CSS

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

#### HTML

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

#### JavaScript

    YUI().use('charts', function (Y)
    {
        //dataProvider source
        var myDataValues = [
            {date:"1/1/2010", miscellaneous:2000, expenses:3700, revenue:2200},
            {date:"2/1/2010", miscellaneous:5000, expenses:9100, revenue:100},
            {date:"3/1/2010", miscellaneous:4000, expenses:1900, revenue:1500},
            {date:"4/1/2010", miscellaneous:3000, expenses:3900, revenue:2800},
            {date:"5/1/2010", miscellaneous:500, expenses:7000, revenue:2650},
            {date:"6/1/2010", miscellaneous:3000, expenses:4700, revenue:1200}
        ];

        //Define our axes for the chart.
        var myAxes = {
            financials:{
                keys:["miscellaneous", "revenue", "expenses"],
                position:"right",
                type:"numeric",
                styles:{
                    majorTicks:{
                        display: "none"
                    }
                }
            },
            dateRange:{
                keys:["date"],
                position:"bottom",
                type:"category",
                styles:{
                    majorTicks:{
                        display: "none"
                    },
                    label: {
                        rotation:-45,
                        margin:{top:5}
                    }
                }
            }
        };

        //instantiate the chart
        var myChart = new Y.Chart({
                            type:"column",
                            categoryKey:"date",
                            dataProvider:myDataValues,
                            axes:myAxes,
                            horizontalGridlines: true,
                            verticalGridlines: true,
                            render:"#mychart"
                        });

        //Click handler
        Y.on("click", function(e) {
            var axisName = Y.one("#axisSelector").get("value"),
                rotation = parseFloat(Y.one("#rotation").get("value")),
                color = Y.Escape.html(Y.one("#color").get("value")),
                label = null,
                axis;
            if(axisName)
            {
                axis = myChart.getAxisByKey(axisName);
                if(!isNaN(rotation))
                {
                    label = {rotation:rotation};
                }
                if(color)
                {
                    if(!label)
                    {
                        label = {};
                    }
                    label.color = color;
                }
                if(label)
                {
                    axis.set("styles", {label:label});
                }
            }
       }, "#updateAxis");
    });