The following documentation explains the process of adding new style-sheet styles to the charting API. It will work through one example of this process and some steps may be shortened since some of the classes mentioned will already be created.

NOTE: This process will work for adding style sheet styles to anything that uses the libcss library for style processing.
NOTE: The charting package at the time of this writing is "org.pentaho.experimental.chart..." and this will change in the future.

Identify the Need for a New Style 

If possible, an existing style-sheet style (from w3c) should be used. However, if the name is not intuitive or the list of valid values does not match, it would be time to create a new style.

With line charts, we need to define the line style (solid, dashed, etc.) for the line on the chart. Since nothing similar could be found, we will need to create a new style.

Create a New Style Name

Since a new style is needed, a new style name will need to be created. By convention (and an easy way to avoid conflicting style names), the new style should start with -x- and have the format -x-{company}-{category}-{style-name} and all spaces should be replaced with dashes (-).

For our example, we decided on the style name -x-pentaho-chart-line-style

Create an Initial Style Sheet

An initial style sheet defines all the "additional" styles (beyond the W3c standard) that will be used with a project. It also defines the default values for the new styles.
The format for the file is:

*{
  -x-company-category-style-name: default_value;  
}

For our example, we created the file initial.css in the charting/src/org/pentaho/experimental/chart/css directory.

/** Series Styles */
* {
  -x-pentaho-chart-line-style: solid;
}

Tell libcss About the Initial Style Sheet

libcss will need to know that is needs to load the new Initial Style Sheet that was created. This is accomplished by adding an entry in the libcss.properties file in the root directory of the source tree. The property name must start with org.pentaho.reporting.libraries.css.styles.initial. and the value will be the location of the Initial Style Sheet.

We created the file charting/src/libcss.properties and added the following lines:

#
# Add the charting styles to the list of initial styles
#
org.pentaho.reporting.libraries.css.styles.initial.charting=res://org/pentaho/experimental/chart/css/initial.css

Create Defaults Style Values for XML Tags

While a top-level default has been established in the initial.css file, the default value for the styles can change for different XML tags. These defaults should be defined in another css file where the tag identifier is specified instead of using the asterisk wildcard (*).

We create the file charting/src/org/pentaho/experimental/chart/css/chart.css which defines the default styles for all our XML tags (W3C standard tags and our own tags). We set the default line style to solid for the \<series\> tag with the following:

series {
  -x-pentaho-chart-line-style: solid;
}