---
schema_version: "1"
id: 16ccad6fb4965ba7949385879775bc71d7f7d6ec5cccbfa97b04a60075ecbbef
title: ChartDonut Lightning Web Component ReadMe (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_chartdonut_lightning_web_component_readme.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_chartdonut_lightning_web_component_readme.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 158a83a96e350004da5f26db812a976af937fcfb4238873561bb216f09bea98a
description: For the managed package runtime, this page contains a ChartDonut LWC ReadMe for each Vlocity release.
products:
  - Omnistudio
release: "264"
---
# ChartDonut Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains a ChartDonut LWC ReadMe for each Vlocity release.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20

The _ChartDonut Lightning Web Component_ extends the _Chart Lightning Web Component_ and adds additional features. This component adds the ability to display and resize text at the center of the donut.

## Available c-chart-donut Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d95475e68">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d95475e74">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d95475e80">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d95475e86">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d95475e92">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d95475e68 ">
              <p style="margin-bottom:0;">center-text</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d95475e74 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d95475e80 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d95475e86 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d95475e92 ">
              <p style="margin-bottom:0;">If set, displays text inside the center of the donut.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d95475e68 ">
              <p style="margin-bottom:0;">text-color</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d95475e74 ">
              <p style="margin-bottom:0;">(Default: #000000)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d95475e80 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d95475e86 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d95475e92 ">
              <p style="margin-bottom:0;">Defines the color of the text.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d95475e68 ">
              <p style="margin-bottom:0;">font-style</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d95475e74 ">
              <p style="margin-bottom:0;">(Default: Arial)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d95475e80 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d95475e86 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d95475e92 ">
              <p style="margin-bottom:0;">Sets the font style of the display text.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d95475e68 ">
              <p style="margin-bottom:0;">side-padding</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d95475e74 ">
              <p style="margin-bottom:0;">(Default: 20px)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d95475e80 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d95475e86 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d95475e92 ">
              <p style="margin-bottom:0;">Sets the side padding for the text inside. Value must be 20px or greater.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Example c-chart-donut

```
  <c-chart-donut
    values={val1}
    labels={labels1}
    icon-class="classOne"
    type={type1}
    title="Doughnut Chart"
    background-color={backgroundColor1}
    cutout-percentage="30"
    center-text={centerText}
    text-color={textColor}
    font-style={fontStyle}
    side-padding={sidePadding}
  >
  </c-chart-donut>
```

## Example JavaScript for Center Text Feature

To implement the center text feature:

- Pass a string value to the _center-text_ attribute.
- Pass a plugin to the plugin sevice. See [Chart.js plugins](https://www.chartjs.org/docs/latest/developers/plugins.html) for more information.

```
let plugin = function(chart) {
  if (chart.config.options.elements.center) {
    // Your plugin code
  }
};
this.renderChart(this.config, this.template, this.templateName, plugin);
```

## Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19

The _ChartDonut Lightning Web Component_ extends the _Chart Lightning Web Component_ and adds additional features. This component adds the ability to display and resize text at the center of the donut.

## Available c-chart-donut Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d95475e295">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d95475e301">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d95475e307">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d95475e313">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" id="d95475e319">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d95475e295 ">
              <p style="margin-bottom:0;">center-text</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d95475e301 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d95475e307 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d95475e313 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d95475e319 ">
              <p style="margin-bottom:0;">If set, displays text inside the center of the donut.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d95475e295 ">
              <p style="margin-bottom:0;">text-color</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d95475e301 ">
              <p style="margin-bottom:0;">(Default: #000000)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d95475e307 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d95475e313 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d95475e319 ">
              <p style="margin-bottom:0;">Defines the color of the text.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d95475e295 ">
              <p style="margin-bottom:0;">font-style</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d95475e301 ">
              <p style="margin-bottom:0;">(Default: Arial)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d95475e307 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d95475e313 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d95475e319 ">
              <p style="margin-bottom:0;">Sets the font style of the display text.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d95475e295 ">
              <p style="margin-bottom:0;">side-padding</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d95475e301 ">
              <p style="margin-bottom:0;">(Default: 20px)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d95475e307 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d95475e313 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="text-align:left;vertical-align:top;" headers="d95475e319 ">
              <p style="margin-bottom:0;">Sets the side padding for the text inside. Value must be 20px or greater.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Example c-chart-donut

```
  <c-chart-donut
    values={val1}
    labels={labels1}
    icon-class="classOne"
    type={type1}
    title="Doughnut Chart"
    background-color={backgroundColor1}
    cutout-percentage="30"
    center-text={centerText}
    text-color={textColor}
    font-style={fontStyle}
    side-padding={sidePadding}
  >
  </c-chart-donut>
```

## Example JavaScript for Center Text Feature

To implement the center text feature:

- Pass a string value to the _center-text_ attribute.
- Pass a plugin to the plugin sevice. See [Chart.js plugins](https://www.chartjs.org/docs/latest/developers/plugins.html) for more information.

```
let plugin == function(chart) {
  if (chart.config.options.elements.center) {
    // Your plugin code
  }
};
this.renderChart(this.config, this.template, this.templateName, plugin);
```