In JET 2.0.2, we have given developers the ability to apply custom fills and strokes to both chart data and reference objects. This allows for a highly customized look and feel for chart data through custom gradients, patterns, filters, and images. In order to make these customizations, className and style atttributes have been added for series, items, and reference objects.

 

The style attribute accepts an object defining the inline style and will override any other styling specified through the other options. The component directly passes the style attribute to the respective SVG DOM style attribute and it is thus up to the developer to assure that values passed in are valid and applicable to the data and browser.

 

The className attribute accepts a string which references a CSS style class. The component will directly pass the string to the respective SVG DOM class attribute, so once again, it is up to the developer to insure the compatibility and validity of any style defined within the class.

 

For tooltips and hover interactivity, it's strongly recommended to also pass a representative color to the color attribute.

 

In JET 2.1.0, the style and className attributes will be supported in ojSparkChart, ojPictoChart, ojTreemap, ojSunburst, ojStatusMeterGauge, ojRatingGauge, and ojLedGauge, greatly enhancing the configurability of those components while at the same time allowing for homogeneity for cross component styling.

 

Example:

customF&S.png

In this example, we have used a custom gradient and pattern to differentiate two different series. To use custom fills or strokes, create a separate SVG image on the page and define the fills or strokes in the defs element of that SVG image, referring to them in the style class or inline style. If this SVG is only used for fills and stroke make sure to set the width and height to 0 so that the SVG does not take up any space on the page.

 

HTML:

<div id='chart-container'>
    <svg height="0" width="0">
      <defs>
        <linearGradient id="gradient" x1="0%"  y1="100%">
          <stop offset="0%" style="stop-color: #66ccff"></stop>
          <stop offset="80%" style="stop-color: #0000FF"></stop>
          </linearGradient>
        <pattern id="pattern" 
          width="6" height="6" 
          patternUnits="userSpaceOnUse"
          patternTransform="rotate(45)">
          <rect width="6" height="6" transform="translate(0,0)" fill="#336791"></rect>
          <rect x="3" width="6" height="6" transform="translate(0,0)" fill="#C53333" ></rect>
        </pattern>
      </defs>
    </svg>
    <div id="barChart" data-bind="ojComponent: {
            component: 'ojChart', 
            type: 'bar', 
            series: barSeries
        }"
         style="max-width:500px;width:100%;height:350px;">
    </div>
</div>

 

JS:

self.barSeries = [{name: "Gradient", color: "#366DFF", style:{fill: "url(#gradient)"}, items: [40, 50]}, 
                  {name: "Pattern", color: "purple", style:{fill: "url(#pattern)"}, items: [30, 60]}];

 

For further information and complete demos click on one of the links below:

Attribute Documentation:  http://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ojChart.html

Demo: http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=chart&demo=styleClass