Styling Resource Data chart components
Describes the CSS properties and Java methods used to control Resource Data chart rendering.
Describes the Resource Data chart component and its subcomponents.
Explains how to use the chartArea model object to control the appearance of a portion of a chart.
Explains how the chartLegend model object type to control the appearance of the Chart Legend.
Describes how to use the chartRenderer CSS model object to control the global appearance of the renderer used by the chart.
Explains how to reference a specific scale in a CSS rule.
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.