Styling the Chart Component

Selector	Description	Target Class
chart	The chart component	IlvChart
chartArea	The chart area component	IlvChart.Area
chartLegend	The chart legend	IlvLegend
chart3Dview	The chart 3-D view	IlvChart3DView
chartRenderer	The chart renderers	IlvChartRenderer
chartScale	The chart scales	IlvScale
chartGrid	The chart grids	IlvGrid

These selectors can be used to modify the bean properties of the corresponding target class. For example, the following style rules show you how to control the borders and the colors of the chart and the chart area:

chart {

foreground : black;

background : lightyellow;

opaque : true;

border : @#chartBorder;

}

Subobject#chartBorder {

class : 'javax.swing.border.LineBorder(lineColor)';

lineColor : black;

}

chartArea {

plotBackground : oldlace;

}

Styling the chart

The chart selector identifies the Chart component and can be used to control its appearance. Bean Properties for Chart lists the bean properties of the IlvChart class that can be set in the declarations of a CSS style rule.

Bean Properties for Chart
Property	Type	Allowed Values
scalingFont	Boolean
antiAliasing	Boolean
antiAliasingText	Boolean
baseTextDirection	int	LEFT_TO_RIGHT, RIGHT_TO_LEFT, CONTEXTUAL_DIRECTION, COMPONENT_DIRECTION, INHERITED_DIRECTION
shiftScroll	Boolean
scrollRatio	Double
type	int	CARTESIAN,POLAR,RADAR,PIE
projectorReversed	Boolean
defaultColors	Color[]
decorations	Function ”decorations”
renderingType	int	BAR, STACKED_BAR, STACKED100_BAR, SUPERIMPOSED_BAR, AREA, STACKED_AREA, STACKED100_AREA, POLYLINE, STACKED_POLYLINE, STACKED100_POLYLINE, SCATTER, STAIR, STACKED_STAIR, STACKED100_STAIR, SUMMED_STAIR, HILO, HILO_ARROW, HILO_STICK, CANDLE, HLOC, PIE,COMBO
dataSource	IlvDataSource
optimizedRepaint	Boolean
dynamicStyling	Boolean
3d	Boolean
interactors	IlvChartInteractor[] Or Function “interactors”
plotAreaBackground	Color
backgroundPaint	Paint
header	JComponent
headerText	String
footer	JComponent
footerText	String
legendVisible	Boolean
legendPosition	String	NORTH_BOTTOM, NORTH_WEST, WEST, SOUTH_WEST, SOUTH_TOP, SOUTH_EAST, EAST, NORTH_EAST, ABSOLUTE
foreground	Color
border	Border

Styling the chart area

The chartArea selector identifies the Chart Area component and can be used to control the appearance of the portion of the chart.

Chart Area Bean Properties lists the bean properties of the IlvChart.Area class that can be set in the declarations of a CSS style rule.

Chart Area Bean Properties
Property	Type
background	Color
backgroundPaint	Paint
border	Border
bottomMargin	int
filledPlottingArea	Boolean
foreground	Color
font	Font
leftMargin	int
opaque	Boolean
plotBackground	Paint
plotStyle	IlvStyle
rightMargin	int
margins	Insets
topMargin	int

Styling the chart legend

The chartLegend selector identifies the Chart Legend component and can be used to control its appearance. Bean Properties for Chart Legend lists the bean properties of the IlvLegend class that can be set in the declarations of a CSS style rule.

Bean Properties for Chart Legend
Property	Type
antiAliasing	Boolean
antiAliasingText	Boolean
border	Border
background	Color
floating	Boolean
floatingLayoutDirection	int
followChartResize	Boolean
font	Font
foreground	Color
interactive	Boolean
location	Point
movable	Boolean
paintingBackground	Boolean
symbolSize	Dimension
fsymbolTextSpacing	int
title	String
transparency	int

Styling chart 3-D view

The chart3DView selector identifies the Chart 3-D view and can be used to control its appearance. Bean Properties for Chart 3-D View lists the bean properties of the IlvChart3DView class that can be set in the declarations of a CSS style rule.

Bean Properties for Chart 3-D View
Property	Type	Allowed Values
ZAnnotationRenderer	IlvLabelRenderer
ZAnnotationVisible	Boolean
ZGridVisible	Boolean
ZGridStroke	Stroke
ZGridPaint	Paint
lightLatitude	double
lightLongitude	double
ambientLight	float
projectionType	int	OBLIQUE, ORTHOGRAPHIC
elevation	double
rotation	double
depth	int
depthGap	int
zoom	double
autoScaling	Boolean

Styling the chart grids

The chartGrid selector identifies the Chart Grid component and can be used to control its appearance. Bean Properties for Chart Grids lists the bean properties of the IlvGrid class that can be set in the declarations of a CSS style rule.

Bean Properties for Chart Grids
Property	Type	Allowed Values
drawOrder	int
majorLineVisible	Boolean
visible	Boolean
minorLineVisible	Boolean
majorStroke	Stroke
majorPaint	Paint
minorStroke	minorPaint

Styling the chart scale

The chartScale selector identifies the Chart Scale component and can be used to control its appearance. Bean Properties for Chart Scale lists the bean properties of the IlvScale class that can be set in the declarations of a CSS style rule.

Bean Properties for Chart Scale
Property	Type	Allowed Values
axisStroke	Stroke
labelFont	Font
labelColor	Color
foreground	Color
drawOrder	int
majorTickSize	int
minorTickSize	int
tickLayout	int	TICK_INSIDE, TICK_OUTSIDE, TICK_CROSS
labelOffset	int
titleOffset	int
autoWrapping	Boolean
labelAlignment	int	L EFT, CENTER, RIGHT
titleRotation	float
title	string
titlePlacement	int
labelRotation	float
skippingLabel	Boolean
skipLabelMode	int	CONSTANT_SKIP,ADAPTIVE_SKIP
visible	Boolean
axisVisible	Boolean
majorTickVisible	Boolean
minorTickVisible	Boolean
labelVisible	Boolean
autoCrossing	Boolean
crossingValue	double
stepsDefinition	IlvStepsDefinition
category	Boolean
annotations	IlvScaleAnnotation[]

Styling the Chart Component

You can find the files and the source code of this example in the <installdir>/jviews-charts/samples/style/index.html directory.

This sample displays a chart that loads data from the following an XML file:

<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet type="text/jviews+css" href="simple.css"?>

<!DOCTYPE chartData PUBLIC '-//ILOG//JVIEWS/Chart 1.0' 'chartxml.dtd'>

<data>

<labels>Server 1, Server 2, Server 3, Server 4</labels>

#ff9d9d-#924242

</property>

</series>

#78ff78-#249224

</property>

</series>

#98bdff-#476aa9

</property>

</series>

</data>

</chartData>

This data corresponds to a simple log of CPU usage for several servers. The XML file contains a processing instruction that references a style sheet URL. When the XML data source is connected to the chart, the style sheet is automatically applied. Each series in the XML file defines a color property. Next we will see how this property can be used by a CSS declaration.

To describe the contents of a simple style sheet:

Specify that a bar chart is used and that the legend is visible:

chart {

legendVisible: true;

renderingType: BAR;

}
Tell the chart to use a category x-scale, add a title to the y-scale, and explicitly specify the data limits for the y-axis:

#xScale { category: true; }

#yScale { title: “Usage(%)”; titleRotation: 270;}

#yScale axis { dataMin: 0; dataMax: 100; }
Specify that the color used to render a series is equal to its color property, which has been defined in the XML file:

series { color1: @color; }

Style Sheet: First Example shows what the chart looks like with this style sheet:

Style Sheet: First Example

The chart renderers

The chartRenderer selector can be used to control the global appearance of renderers used by the chart. This selector supports an index attribute to select the appropriate chart renderer. For example, the following rule hides the first renderer:

chartRenderer[index=0] { visible : false; }

The purpose of the chartRenderer rule is to specify global settings to the top-level renderers that are accessible through the IlvChart.getRenderer method. For example, you can use it to set the mode of a stacked chart:

chartRenderer { stacked100Percent: true; }

Note

The chartRenderer rule cannot be used to customize the child renderers independently. The section Styling the data series explains how renderers can be customized for a specific series or a specific set of points.

Scales and grids

There are two ways to reference a specific scale, or a grid, in a style rule:

You can use the axisIndex attribute of the chartScale and chartGrid selectors. This index equals –1 for the x-axis, or corresponds to the index of an y-axis.

You can use the xScale, yScale, xGrid and yGrid CSS ID.

Here are a few examples of selector patterns:

// Match the x-scale.

chartScale[axisIndex=”-1”] { ... }

#xScale { ... }

// Match the main y-scale.

chartScale[axisIndex=”0”] { ... }

#yScale { ... }

// Match the x-grid.

chartGrid[axisIndex=”-1”] { ... }

#xGrid { ... }

// Match the main y-grid.

chartGrid[axisIndex=”0”] { ... }

#yGrid { ... }

Each scale object supports an axis child selector, which can be used to customize the associated IlvAxis instance. For example, here is how you can reverse the x-axis:

#xScale axis { reversed: true; }