--- schema_version: "1" id: ab9031debce66d507a89ae425d5af46e70af370e1b68b918d82b82a90d5c75db title: Chart 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_chart_lightning_web_component_readme.md canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_chart_lightning_web_component_readme.htm&release=264.0.0&type=5 source_site: help.salesforce.com content_type: documentation content_hash: abe262217cb9504c6d3c36335742a158cdd95c7b770dd868f21f9eba0380de6f description: For the managed package runtime, this page contains a Chart LWC ReadMe for each Vlocity release. products: - Omnistudio release: "264" --- # Chart Lightning Web Component ReadMe (Managed Package) For the managed package runtime, this page contains a Chart 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 Summer '20 The _Chart Lightning Web Component_ displays data as a chart and enables users to perform actions from the chart. ## Available c-chart Attributes For more chart configuration options, see [Chart.js](https://www.chartjs.org/docs/latest/).

Attribute

Value

Type

Required

Description

values

  

array

yes

Contains the data for the chart.

labels

  

array

yes

Contains the labels for the chart.

type

line, bar, radar, doughnut, pie, polarArea, bubble, scatter

string

yes

Sets the type of the chart to display. See also ChartDonut Lightning Web Component, which extends the Chart component for a dougnut chart.

background-color

RGB value or color name (Default: rgba(0, 0, 0, 0.1))

array

yes

Sets background color for each data segment on the chart.

background

RGB value or color name (Default: white)

string

  

Sets the color for the background of the chart.

channel

query, dataraptor

string

  

Sets the data source type.

aspectRatio

(Default: 2)

number

  

Provides the canvas aspect ratio. (For example, width : height, a value of 1 representing a square canvas.)

cutoutPercentage

(Default : 50 for doughnut chart. Default: 0 for all other chart types)

number

  

If type is "doughnut", sets the percentage of the doughnut chart that is cut out of the middle.

displayLegend

true, false (Default: true)

boolean

  

To hide chart legend, set to false.

disableAnimateRotate

true, false (Default: true)

boolean

  

To enable chart rotation animation, set to false.

disableAnimateScale

true, false (Default: false)

boolean

  

To disable chart scaling animation from the center outwards, set to true.

icon-class

  

string

  

Adds an extra class to the icon element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.

icon-name

(Format: utility:add)

string

  

Sets the icon for the chart. See SLDS icons.

icon-size

xx-small, x-small, small, medium, large

string

  

Sets the icon size for the button element.

icon-url

URL

string

  

Sets the icon URL, overriding the defined url for the svg resource. Used with Newport Design System (NDS) theme only.

title

  

string

  

Adds a title to the chart.

minSizeResizeable

  

boolean

  

Adds a minimum canvas width for the chart. This attribute is required if you are using the chart inside a responsive parent where resizing is required.
## Example c-chart Component ``` ``` ## Example Using Query as a Data Source Set the _channel_ attribute to a value of "query". ``` // import the dataHandler method import { getDataHandler } from "c/utility"; // declare the query recordSource = { type: "query", { query: "SELECT FirstName,Id FROM Contact" } }; // declare a variable with track @track testLabel1 = []; let request = JSON.stringify(this.recordSource); // call the getDataHandler and format the response from the query getDataHandler( request ).then(data => { console.log('request from query : ',data); this.formatResponse(data); }).catch(error => { console.log('error from query : ',error); }); ``` ``` ``` ## Example Using an Omnistudio Data Mapper as a Data Source To use a Data Mapper as a data source: - Create a Data Mapper to use with the _Chart_ component. - Set the _channel_ attribute to a value of `dataraptor`. - Add and configure a DatasourceDataraptor component. See _DatasourceDataraptor Lightning Web Component_. ``` @track testLabel2 = []; ``` ``` ``` ## Example Values for Arrays ``` // Labels needs to be an array. labels = ['Red', 'Orange', 'Yellow', 'Green', 'Blue']; // Incase you provide a string it will get converted into character array labels = 'hello' /* This Becomes */ labels = ['h','e','l','l','o'] // Values needs to be an array. values = [10,5,45,25,15] //or values = [,,,4,2] //or values = [3.5,6,7,0,8.5] /****** CANNOT BE NULL *****/ // BackgroundColor needs to be an array. // can be RGB colors backgroundColor1 = [ 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)' ]; // can be string color names backgroundColor1 = ['Red','Green','Yellow'] ``` ## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20 The _Chart Lightning Web Component_ displays data as a chart and enables users to perform actions from the chart. ## Available c-chart Attributes For more chart configuration options, see [Chart.js](https://www.chartjs.org/docs/latest/).

Attribute

Value

Type

Required

Description

values

  

array

yes

Contains the data for the chart.

labels

  

array

yes

Contains the labels for the chart.

type

line, bar, radar, doughnut, pie, polarArea, bubble, scatter

string

yes

Sets the type of the chart to display. See also ChartDonut Lightning Web Component, which extends the Chart component for a dougnut chart.

background-color

RGB value or color name (Default: rgba(0, 0, 0, 0.1))

array

yes

Sets background color for each data segment on the chart.

background

RGB value or color name (Default: white)

string

  

Sets the color for the background of the chart.

channel

query, dataraptor

string

  

Sets the data source type.

aspectRatio

(Default: 2)

number

  

Provides the canvas aspect ratio. (For example, width : height, a value of 1 representing a square canvas.)

cutoutPercentage

(Default : 50 for doughnut chart. Default: 0 for all other chart types)

number

  

If type is "doughnut", sets the percentage of the doughnut chart that is cut out of the middle.

displayLegend

true, false (Default: true)

boolean

  

To hide chart legend, set to false.

disableAnimateRotate

true, false (Default: true)

boolean

  

To enable chart rotation animation, set to false.

disableAnimateScale

true, false (Default: false)

boolean

  

To disable chart scaling animation from the center outwards, set to true.

icon-class

  

string

  

Adds an extra class to the icon element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'.

icon-name

(Format: utility:add)

string

  

Sets the icon for the chart. See SLDS icons.
         

icon-size

xx-small, x-small, small, medium, large

string

  

Sets the icon size for the button element.

icon-url

URL

string

  

Sets the icon URL, overriding the defined url for the svg resource. Used with Newport Design System (NDS) theme only.

title

  

string

  

Adds a title to the chart.
## Example c-chart Component ``` ``` ## Example Using Query as a Data Source Set the _channel_ attribute to a value of "query". ``` // import the dataHandler method import { getDataHandler } from "c/utility"; // declare the query recordSource = { type: "query", { query: "SELECT FirstName,Id FROM Contact" } }; // declare a variable with track @track testLabel1 = []; let request = JSON.stringify(this.recordSource); // call the getDataHandler and format the response from the query getDataHandler( request ).then(data => { console.log('request from query : ',data); this.formatResponse(data); }).catch(error => { console.log('error from query : ',error); }); ``` ``` ``` ## Example Using DatarRaptor as a Data Source To use a Data Mapper as a data source: - Create a Data Mapper to use with the _Chart_ component. - Set the _channel_ attribute to a value of "dataraptor". - Add and configure a DatasourceData Mapper component. See _DatasourceData Mapper Lightning Web Component_. ``` @track testLabel2 = []; ``` ``` ``` ## Example Values for Arrays ``` // Labels needs to be an array. labels = ['Red', 'Orange', 'Yellow', 'Green', 'Blue']; // Incase you provide a string it will get converted into character array labels = 'hello' /* This Becomes */ labels = ['h','e','l','l','o'] // Values needs to be an array. values = [10,5,45,25,15] //or values = [,,,4,2] //or values = [3.5,6,7,0,8.5] /****** CANNOT BE NULL *****/ // BackgroundColor needs to be an array. // can be RGB colors backgroundColor1 = [ 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)' ]; // can be string color names backgroundColor1 = ['Red','Green','Yellow'] ``` ## Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19 The _Chart Lightning Web Component_ displays data as a chart and enables users to perform actions from the chart. ## Available c-chart Attributes For more chart configuration options, see [Chart.js](https://www.chartjs.org/docs/latest/).

Attribute

Value

Type

Required

Description

values

  

array

yes

Contains the data for the chart.

labels

  

array

yes

Contains the labels for the chart.

type

line, bar, radar, doughnut, pie, polarArea, bubble, scatter

string

yes

Sets the type of the chart to display. See alsoChartDonut Lightning Web Component, which extends the Chart component for a dougnut chart.

background-color

RGB value or color name (Default: rgba(0, 0, 0, 0.1))

array

yes

Sets background color for each data segment on the chart.

background

RGB value or color name (Default: white)

string

  

Sets the color for the background of the chart.

channel

query, dataraptor

string

  

Sets the data source type.

aspectRatio

(Default: 2)

number

  

Provides the canvas aspect ratio. (For example, width : height, a value of 1 representing a square canvas.)

cutoutPercentage

(Default : 50 for doughnut chart. Default: 0 for all other chart types)

number

  

If type is ``doughnut'', sets the percentage of the doughnut chart that is cut out of the middle.

displayLegend

true, false (Default: true)

boolean

  

To hide chart legend, set to false.

disableAnimateRotate

true, false (Default: true)

boolean

  

To enable chart rotation animation, set to false.

disableAnimateScale

true, false (Default: false)

boolean

  

To disable chart scaling animation from the center outwards, set to true.

icon-class

  

string

  

Adds an extra class to the icon element. To add multiple classes, use a space to separate each class, such as `classone classtwo'.

icon-name

(Format: utility:add)

string

  

Sets the icon for the chart. See SLDS icons.
         

icon-size

xx-small, x-small, small, medium, large

string

  

Sets the icon size for the button element.

icon-url

URL

string

  

Sets the icon URL, overriding the defined url for the svg resource. Used with Newport Design System (NDS) theme only.

title

  

string

  

Adds a title to the chart.
## Example c-chart Component ``` ``` ## Example Using Query as a Data Source Set the _channel_ attribute to a value of \`\`query''. ``` // import the dataHandler method import { getDataHandler } from "c/utility"; // declare the query recordSource == { type: "query", { query: "SELECT FirstName,Id FROM Contact" } }; // declare a variable with track @track testLabel1 == []; let request == JSON.stringify(this.recordSource); // call the getDataHandler and format the response from the query getDataHandler( request ).then(data => { console.log('request from query : ',data); this.formatResponse(data); }).catch(error => { console.log('error from query : ',error); }); ``` ``` ``` ## Example Using DatarRaptor as a Data Source To use a Data Mapper as a data source: - Create a Data Mapper to use with the _Chart_ component. - Set the _channel_ attribute to a value of \`\`dataraptor''. - Add and configure a DatasourceData Mapper component. See_DatasourceData Mapper Lightning Web Component_. ``` @track testLabel2 == []; ``` ``` ``` ## Example Values for Arrays ``` // Labels needs to be an array. labels == ['Red', 'Orange', 'Yellow', 'Green', 'Blue']; // Incase you provide a string it will get converted into character array labels == 'hello' /* This Becomes */ labels == ['h','e','l','l','o'] // Values needs to be an array. values == [10,5,45,25,15] //or values == [,,,4,2] //or values == [3.5,6,7,0,8.5] /****** CANNOT BE NULL *****/ // BackgroundColor needs to be an array. // can be RGB colors backgroundColor1 == [ 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)' ]; // can be string color names backgroundColor1 == ['Red','Green','Yellow'] ```