Customizing a Chart with the styles attribute.

Many properties of the chart and its components can be customized through the Chart's styles attribute. The styles attribute is an object literal containing references to different components of a chart. These references each containing object literals specifying different properties for each component. The styles attribute breaks up as follows.

• graph: a key based object referencing the customizable properties of the Chart instance's Graph.
• axes: a key based object containing references to the customizable properties of each axis in the Chart. By default, the primary category axis key is "category" and the primary value axis key is "values".
• series: a key based object container references to the customizable properties of each series in the Chart.

In this example, we'll style the axis labels and the series colors. For both axes, we will change the colors and rotation. For two of the series, we will change their line and marker colors. For all of the series, we will change over properties of the markers to create a mouseover effect.

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) 
{ 
    var styleDef = {
        axes:{
            values:{
                label:{
                    rotation:-45,
                    color:"#ff0000"
                }
            },
            date:{
                label:{
                    rotation:-45,
                    color: "#ff0000"
                }
            }
        },
        series:{
            international:{
                marker:{
                    fill:{
                        color:"#ff8888"
                    },
                    border:{
                        color:"#ff0000"
                    },
                    over:{
                        fill:{
                            color:"#ffffff"
                        },
                        border:{
                            color:"#fe0000"
                        },
                        width: 12,
                        height: 12
                    }
                },
                line:{
                    color:"#ff0000"
                }
            },
            expenses:{
                line:{
                    color:"#999"
                },
                marker:
                {
                    fill:{
                        color:"#ddd"
                    },
                    border:{
                        color:"#999"
                    },
                    over: {
                        fill: {
                            color: "#eee"
                        },
                        border: {
                            color: "#000"
                        },
                        width: 12,
                        height: 12
                    }
                }
            },
            domestic: {
                marker: {
                    over: {
                        fill: {
                            color: "#eee"
                        },
                        width: 12,
                        height: 12
                    }
                }
            }
        }
    };
    var mychart = new Y.Chart({
                                dataProvider:myDataValues, 
                                interactionType:"planar", 
                                categoryKey:"date", 
                                styles:styleDef, 
                                horizontalGridlines:true, 
                                verticalGridlines:true, 
                                render:"#mychart"
                            });
});