Skip navigation
ANNOUNCEMENT: is currently Read only due to planned upgrade until 28-Sep-2020 9:30 AM Pacific Time. Any changes made during Read only mode will be lost and will need to be re-entered when the application is back read/write.

In JET 2.0.1 we have introduced the ability for developers to easily customize the center content of donut charts and status meter gauges.


Using the new API, developers can now provide either a callback function or a Knockout template that specifies a center HTML DOM element.

When constructing center content for a donut chart, specify a template name using the pieCenter.template or pass a callback function which returns a DOM element to pieCenter.renderer. For a status meter gauge, these attributes are center.template and center.renderer respectively.


The center HTML content is passed into a div layer that is placed on top of the chart or gauge. By default, this div will intercept any mouse or touch events allowing for interactive content in the center. In order to disable this behavior and retain the chart or gauge default interactivity in the center area, set the CSS pointer-events property to 'none' on the center HTML.


Here is an example of how the center content can be configured using a Knockout template:

  <div id="gauge" data-bind="ojComponent: {
       component: 'ojStatusMeterGauge',
       min: 0,
       max: 100,
       value: 20,
       orientation: 'circular',
       plotArea: {rendered: 'on'},
       center: {template: 'template'}
  <script type="text/html" id="template">
    <div data-bind="style: {
            backgroundImage: 'url(\'person4.png\')',
            backgroundSize: 'cover',
            width: innerBounds.width + 'px',
            height: innerBounds.width+ 'px',
            top: innerBounds.y + 'px',
            left: innerBounds.x + 'px',
            pointerEvents: 'none'}">


Two important context variables that are available to the center function or template are outerBounds and innerBounds. Each bounds object contains x, y, width, height parameters.


The outerBounds is represented by the blue box in the image above while the innerBounds is represented by the green box. The x and y coordinates of the bounds are relative to the top left corner of the container.


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

Donut chart demo:

Status meter gauge demo:…