Hitachi Vantara Pentaho Community Wiki
Child pages
  • Adding New Chart Styles
Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

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.

Charting Example

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 (-).

Charting Example

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;  

Charting Example

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 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.

Charting Example

We created the file charting/src/ and added the following lines:
# Add the charting styles to the list of initial styles

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 (*).

Charting Example

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;
  • No labels