Create a DataSource

In this example, we're going to use custom series properties to format and display series information differently. We'll start with a data source representing household income and expenses. Expenses are represented negative values while income is represented with positive values. We'll use these values to calculate net income/losses, and add the calculated information as an additional property in the data source.

Define our Text formatting functions

We will create methods to format the labels for our axis, dataTip and legend.

Some series, such as pay and rent, will always be either positive or negative. Others, such as gambling and net, can either be positive or negative. As a result, we will need to specify different dataTip functions for different series. This is best accomplished by setting one method on the chart level, and then overriding these on the series level. In the code above, we have created a default dataTipFunction for income and expense series and an additional function for series that can render a gain or a loss.

Define a Series Definition

We'll set a series definition to style each series. Additionally, we will use this series definition to specify which series will use the custom label functions created above.

In the above series definition, we have styled the properties gamblinglosses and gamblingprofits identically. We have also given them the same display name. In our chart, they will both be displayed as "gambling". We will use our custom dataTip function to differentiate between the series based on a positive or negative value. Since they both represent gambling, we only want one reference in the legend. We can use the showInLegend property to filter out one from the legend list. We'll also put in a custom legendLabelFunction for the gambling series displayed in the legend. Finally, we will attach the custom dataTip function to our net series.

Add axes and styles

Next, we'll add our styles and axes.

Create the Chart

Finally, we'll create a chart, setting our default dataTip and legendLabel methods.

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.