Understanding Chart Cascading Style Sheet Classes

When you create a new chart, Oracle Application Express renders it based on cascading style sheet (CSS) classes associated with the current theme. You can change the appearance of a chart by referencing another CSS or by overriding individual classes in the CSS section of the Edit Attributes page

The following sample contains the CSS classes for the dial chart in Sample Application. This example contains all the available CSS classes. Class names appear in boldface.

text{font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;fill:#000000;}
tspan{font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;fill:#000000;}
text.title{font-weight:bold;font-size:14;fill:#000000;}
text.moredatafound{font-size:12;}
rect.legend{fill:#EEEEEE;stroke:#000000;stroke-width:1;}
text.legend{font-size:10;}
#background{fill:#FFFFFF;stroke:none;}
rect.chartholderbackground{fill:#ffffff;stroke:#000000;stroke-width:1;}
#timestamp{text-anchor:start;font-size:9;}
text.tic{stroke:none;fill:#000000;font-size:12}
line.tic{stroke:#000000;stroke-width:1px;fill:none;}
#dial{stroke:#336699;stroke-width:2px;fill:#336699;fill-opacity:.5;}
#dial.alert{fill:#FF0000;fill-opacity:.5;}
#dialbackground{stroke:#000000;stroke-width:none;fill:none;filter:url(#MyFilter);}
#dialcenter{stroke:none;fill:#111111;filter:url(#MyFilter);}
#dialbackground-border{stroke:#DDDDDD;stroke-width:2px;fill:none;filter:url
(#MyFilter);}#low{stroke-width:3;stroke:#336699;}
#high{stroke-width:3;stroke:#FF0000;}
#XAxisTitle{letter-spacing:2;kerning:auto;font-size:14;fill:#000000;text-anchor:middle;}
#YAxisTitle{letter-spacing:2;kerning:auto;font-size:14;fill:#000000;text-anchor:middle;writing-mode:tb;}
.XAxisValue{font-size:8;fill:#000000;}
.YAxisValue{font-size:8;fill:#000000;text-anchor:end;}
.nodatafound{stroke:#000000;stroke-width:1;font-size:12;}
.AxisLine{stroke:#000000;stroke-width:2;fill:#FFFFFF;}
.GridLine{stroke:#000000;stroke-width:0.3;stroke-dasharray:2,4;fill:none;}
g.dataholder rect{stroke:#000000;stroke-width:0.5;}
.legenditem rect{stroke:#000000;stroke-width:0.5;}

Table: Available Chart CSS Classes describes all supported CSS classes. Note that certain classes only apply to specific chart types.

Available Chart CSS Classes

Class	Description
`text`	Defines the appearance of text that displays in a chart.
`tspan`	Defines the appearance of text that displays in a chart. `tspan` should match the definition of `text`.
`text.title`	Overrides the default chart text. Use this class for title text.
`text.moredatafound`	Defines the appearance of more datafound text.
`rect.legend`	Creates the rectangular box that holds the chart legend. To a remove the legend border, change `rect.legend` to the following: rect.legend{fill:#CCCC99;stroke:none;}
`text.legend`	Defines the text that appears in the chart legend.
`#background`	Creates the entire background for the SVG plug-in. For a solid white background with no border, change `#background` to the following: #background{fill:#FFFFFF;stroke:#FFFFFF;stroke-width:2;}
`rect.chartholderbackground`	Not applicable to pie and dial charts. Creates the background of the rectangle that holds the chart data. For a clear background, change `rect.chartholderbackground` to the following: rect.chartholderbackground(display:none;)
`#timestamp`	Only applicable if the Asynchronous Update chart attribute is set to Yes. Controls the appearance of the update timestamp test. To disable the display of the timestamp, use defines `#timestamp` as follows in the Custom CSS, Inline attribute. "#timestamp{display:none;}" See Also: "Enabling Asynchronous Updates"
`text.tic`	Dial charts only. Defines the numbers on a dial chart.
`line.tic`	Dial charts only. Defines the graduation mark that displays directly beneath the number on a dial chart.
`#dial`	Dial charts only. Defines the value that displays on the dial chart.
`#dial.alert`	Dial charts only. Defines a value (called an alert value) that renders on in a dial chart using a different display.
`#dialbackground`	Dial charts only. Creates the background of a dial chart.
`#dialcenter`	Dial charts only. Creates the center of the dial on a dial chart.
`#dialbackground-border`	Dial charts only. Works in conjunction with `#dialbackground` to create specific graphic effect.
`#low`	Dial charts only. Defines a historical low watermark of the data being displayed on a chart.
`#high`	Dial charts only. Defines historical high watermark of the data being displayed on a chart.
`#XAxisTitle`	Defines the title that appears on the x-axis
`#YAxisTitle`	Defines the title that appears on the y-axis.
`.XAxisValue`	Defines the value that appears on the x-axis.
`.YAxisValue`	Defines the value that appears on the y-axis.
`.AxisLabel`	Similar to the axis value.
`.nodatafound`	Defines the text element that displays if no information is available.
`.AxisLine`	Indicates zero on charts that have negative values.
.`GridLine`	Creates the horizontal and vertical lines on the chart.
`g.dataholder rect`	Applies a blanket style to all data that displays in the chart.
`.legenditem rect`	Applies a blanket style to all rectangular items in the legend.