skip to main content
Gantt > Programmer's documentation > Developing with the JViews Gantt SDK > Styling > Styling Resource Data chart components
 
Styling Resource Data chart components
Describes the CSS properties and Java methods used to control Resource Data chart rendering.
*Overview
*Describes the Resource Data chart component and its subcomponents.
*Styling the Chart Area component
*Explains how to use the chartArea model object to control the appearance of a portion of a chart.
*Styling the Chart Legend
*Explains how the chartLegend model object type to control the appearance of the Chart Legend.
*Styling the chart renderer
*Describes how to use the chartRenderer CSS model object to control the global appearance of the renderer used by the chart.
*Styling the chart scales
*Explains how to reference a specific scale in a CSS rule.
*Styling the chart grids
*Explains how to reference a specific grid in a CSS rule.
Overview
You can also use style sheets to customize the appearance of the Resource Data chart component and its subcomponents. These chart components are explained in more detail in The Resource Data chart bean. The following table lists the CSS model object types that are defined to reference the different parts of the chart component.
CSS Model Object Type
CSS ID
Description
Target Object Class
chart
Chart
The Resource Data chart component
chartArea
chartArea
The chart area component
chartLegend
chartLegend
The chart legend
chartRenderer
chartRenderer
The chart renderers
chartScale
timeScale
yScale
The chart scales
chartGrid
xGrid
yGrid
The chart grids
NOTE Chart components have no assigned CSS classes or pseudoclasses
The chart model object type identifies the Resource Data chart component and can be used to control the global appearance of the chart. The following table lists the bean properties of the IlvResourceDataChart class that can be set in the declarations of a CSS style rule.
Bean properties
Type
antiAliasing
boolean
antiAliasingText
boolean
background
Color
border
Border
chartAreaBorder
Border
dataRangePolicy
decorations
List
defaultColors
Color[]
footer
JComponent
footerText
String
foreground
Color
header
JComponent
headerText
String
interactors
legend
legendPosition
String
legendVisible
boolean
maxVisibleTime
Date
minVisibleTime
Date
plotAreaBackground
Color
renderer
resourceDisplayMode
int
scalingFont
boolean
timeScale
visibleDuration
visibleTime
Date
xGrid
yAxisReversed
boolean
yGrid
yGridVisible
boolean
yScale
yScaleTitle
String
yScaleTitleRotation
double
yScaleVisible
boolean
For example, the following CSS rules show you how to control the header, the borders, and the colors of the chart:
chart {
  opaque : true;
  foreground : black;
  background : lightyellow;
  plotAreaBackground : slateblue;
  border : @#chartBorder;
  header : @#header;
}
 
Subobject#chartBorder {
  class : 'javax.swing.border.LineBorder(lineColor)';
  lineColor : black;
}
Subobject#header {
  class : 'javax.swing.JLabel';
  text : "My Resource Chart";
}
The CSS ID of the Chart Component is the same as its CSS model object type. Therefore, the following CSS rule is equivalent to the first rule above. Here, the ID of the chart component, instead of its type, is specified as the selector for the rule:
#chart {
  opaque : true;
  foreground : black;
  background : lightyellow;
  plotAreaBackground : slateblue;
  border : @#chartBorder;
  header : @#header;
}
Styling the Chart Area component
The chartArea model object type identifies the Chart Area component and can be used to control the appearance of the portion of the chart.
The following table lists the bean properties of the IlvChart.Area class that can be set in the declarations of a CSS style rule.
Bean properties
Type
background
Color
backgroundPaint
Paint
border
Border
bottomMargin
int
filledPlottingArea
boolean
foreground
Color
font
Font
leftMargin
int
opaque
boolean
plotBackground
Paint
plotStyle
rightMargin
int
topMargin
int
For example, the following CSS rules show you how to control the borders of the chart area:
chartArea {
  border : @#emptyBorder;
}
Subobject#emptyBorder {
  class : 'javax.swing.border.EmptyBorder(borderInsets)';
  borderInsets : 6,6,6,6;
}
The CSS ID of the Chart Area component is the same as its CSS model object type. Therefore, the following CSS rule is equivalent to the first rule above. Here, the ID of the chart area component, instead of its type, is specified as the selector for the rule:
#chartArea {
  border : @#emptyBorder;
}
Styling the Chart Legend
The chartLegend model object type identifies the Chart Legend and can be used to control its appearance. The following table lists the bean properties of the IlvLegend class that can be set in the declarations of a CSS style rule.
Bean properties
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
symbolTextSpacing
int
title
String
transparency
int
For example, the following CSS rules show you how to control the text and symbol rendering, and the interactive docking capability of the chart legend:
chartLegend {
  antiAliasing : true;
  antiAliasingText : true;
  font : 'Arial,plain,10';
  symbolSize : "12,12";
  movable: true;
}
The CSS ID of the Chart Legend is the same as its CSS model object type. Therefore, the following CSS rule is equivalent to the rule above. Here, the ID of the chart legend, instead of its type, is specified as the selector for the rule:
#chartLegend {
  antiAliasing : true;
  antiAliasingText : true;
  font : 'Arial,plain,10';
  symbolSize : "12,12";
  movable: true;
}
Styling the chart renderer
The chartRenderer CSS model object type can be used to control the global appearance of the renderer used by the chart. The Resource Data chart supports a single renderer at index 0. The chartRenderer model object type defines an index attribute with value 0 that allows you to select the renderer for styling. The default renderer of the chart is an instance of IlvStairChartRenderer. For example, the following rule changes the mode of the renderer:
chartRenderer[index=0] {
  autoTransparency : true;
  mode : SUPERIMPOSED;
}
Styling the chart scales
There are two ways to reference a specific scale in a CSS rule. You can use:
*the axisIndex attribute of the chartScale CSS model object type. This index equals -1 for the x-axis, 0 for the y-axis.
*the timeScale CSS ID for the x-axis and the yScale CSS ID for the y-axis.
X-axis scale
The default x-axis scale is an instance of the class IlvGanttTimeScale. It can be selected using the chartScale[axisIndex="-1"] model object type selector or the #timeScale ID selector. The bean properties of the class IlvTimeScale that can be set in the declarations of a CSS style rule are discussed in Styling Gantt and Schedule chart components.
NOTE If you replace IlvGanttTimeScale with your own IlvTimeScale subclass, the CSS will return the properties of your own subclass.
Y-axis scale
The y-axis scale is an instance of the class IlvScale. It can be selected using the chartScale[index="0"] model object type selector or the #yScale ID selector. The following table lists the bean properties of the IlvScale class that can be set in the declarations of a CSS style rule.
Property
Type
Allowed values
annotations
 
autoCrossing
boolean
 
autoWrapping
boolean
 
axisStroke
Stroke
 
axisVisible
boolean
 
category
boolean
 
crossingValue
double
 
drawOrder
int
 
foreground
Color
 
labelAlignment
int
LEFT, CENTER, RIGHT
labelColor
Color
 
labelFont
Font
 
labelOffset
int
 
labelRotation
float
 
labelVisible
boolean
 
majorTickSize
int
 
majorTickVisible
boolean
 
minorTickSize
int
 
minorTickVisible
boolean
 
skipLabelMode
int
CONSTANT_SKIP,ADAPTIVE_SKIP
skippingLabel
boolean
 
stepsDefinition
 
tickLayout
int
TICK_INSIDE, TICK_OUTSIDE,TICK_CROSS
title
String
 
titleOffset
int
 
titlePlacement
int
 
titleRotation
float
 
visible
boolean
 
Styling the chart grids
There are two ways to reference a specific grid in a CSS rule. You can use:
*the axisIndex attribute of the chartGrid CSS model object type. This index equals -1 for the x-axis, 0 for the y-axis.
*the xGrid and yGrid CSS IDs.
X-axis grid
The default x-axis grid is an instance of IlvWeekendGrid. It can be selected using the chartGrid[axisIndex="-1"] model object type selector or the #xGrid ID selector. The bean properties of the IlvWeekendGrid class that can be set in the declarations of a CSS style rule are discussed in Styling Gantt and Schedule chart components.
NOTE If you replace IlvWeekendGrid with your own IlvGanttGridRenderer implementation, the CSS will return the properties of your own subclass.
Y-axis grid
The y-axis grid is an instance of IlvGrid. It can be selected using the chartGrid[index="0"] model object type selector or the #yGrid ID selector.
The following table lists the bean properties of the IlvGrid class that can be set in the declarations of a CSS style rule:
Property
Type
drawOrder
int
majorLineVisible
boolean
visible
boolean
minorLineVisible
boolean
majorStroke
Stroke
majorPaint
Paint
minorStroke
minorPaint

Copyright © 2018, Rogue Wave Software, Inc. All Rights Reserved.