Chart Lightning Web Component ReadMe (Managed Package)

You are here:

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

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.

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

<c-chart
  values="{val2}"
  labels="{labels2}"
  type="{type2}"
  background-color="{backgroundColor2}"
></c-chart>

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

<c-chart
  channel="query"
  values="{testVal1}"
  labels="{testLabel1}"
  type="{testType1}"
  background-color="{testBackgroundColor1}"
></c-chart>

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 = [];

<c-chart
  values="{testVal2}"
  labels="{testLabel2}"
  type="{testType2}"
  background-color="{testBackgroundColor2}"
  channel="dataraptor"
>
</c-chart>

<c-datasource-dataraptor
  bundlename="GetContactDetails"
  inputmap="{inputMap}"
  channel="dataraptor"
  debug="true"
>
</c-datasource-dataraptor>

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.

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

<c-chart
  values="{val2}"
  labels="{labels2}"
  type="{type2}"
  background-color="{backgroundColor2}"
></c-chart>

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

<c-chart
  channel="query"
  values="{testVal1}"
  labels="{testLabel1}"
  type="{testType1}"
  background-color="{testBackgroundColor1}"
></c-chart>

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 = [];

<c-chart
  values="{testVal2}"
  labels="{testLabel2}"
  type="{testType2}"
  background-color="{testBackgroundColor2}"
  channel="dataraptor"
>
</c-chart>

<c-datasource-dataraptor
  bundlename="GetContactDetails"
  inputmap="{inputMap}"
  channel="dataraptor"
  debug="true"
>
</c-datasource-dataraptor>

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.

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

<c-chart
  values="{val2}"
  labels="{labels2}"
  type="{type2}"
  background-color="{backgroundColor2}"
></c-chart>

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

<c-chart
  channel="query"
  values="{testVal1}"
  labels="{testLabel1}"
  type="{testType1}"
  background-color="{testBackgroundColor1}"
></c-chart>

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. SeeDatasourceData Mapper Lightning Web Component.

     @track
     testLabel2 == [];

<c-chart
  values="{testVal2}"
  labels="{testLabel2}"
  type="{testType2}"
  background-color="{testBackgroundColor2}"
  channel="dataraptor"
>
</c-chart>

<c-datasource-dataraptor
  bundlename="GetContactDetails"
  inputmap="{inputMap}"
  channel="dataraptor"
  debug="true"
>
</c-datasource-dataraptor>

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

Did this article solve your issue?

Let us know so we can improve!

Chart Lightning Web Component ReadMe (Managed Package)

Vlocity Insurance and Health Summer '20

Available c-chart Attributes

Example c-chart Component

Example Using Query as a Data Source

Example Using an Omnistudio Data Mapper as a Data Source

Example Values for Arrays

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

Available c-chart Attributes

Example c-chart Component

Example Using Query as a Data Source

Example Using DatarRaptor as a Data Source

Example Values for Arrays

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

Available c-chart Attributes

Example c-chart Component

Example Using Query as a Data Source

Example Using DatarRaptor as a Data Source

Example Values for Arrays

General Information

Required Cookies

Functional Cookies

Advertising Cookies

General Information

Required Cookies

Functional Cookies

Advertising Cookies

Cookie List

Product Area

Feature Impact

Edition

Experience

Chart Lightning Web Component ReadMe (Managed Package)

Vlocity Insurance and Health Summer '20

Available c-chart Attributes

Example c-chart Component

Example Using Query as a Data Source

Example Using an Omnistudio Data Mapper as a Data Source

Example Values for Arrays

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

Available c-chart Attributes

Example c-chart Component

Example Using Query as a Data Source

Example Using DatarRaptor as a Data Source

Example Values for Arrays

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

Available c-chart Attributes

Example c-chart Component

Example Using Query as a Data Source

Example Using DatarRaptor as a Data Source

Example Values for Arrays