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 This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.

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

Attribute	Value	Type	Description
center-text		string	If set, displays text inside the center of the donut.
text-color	(Default: #000000)	string	Defines the color of the text.
font-style	(Default: Arial)	string	Sets the font style of the display text.
side-padding	(Default: 20px)	string	Sets the side padding for the text inside. Value must be 20px or greater.

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

Available c-chart-donut Attributes

Attribute	Value	Type	Description
center-text		string	If set, displays text inside the center of the donut.
text-color	(Default: #000000)	string	Defines the color of the text.
font-style	(Default: Arial)	string	Sets the font style of the display text.
side-padding	(Default: 20px)	string	Sets the side padding for the text inside. Value must be 20px or greater.

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 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);