Single Chart
- Shows charts with different types.
Example Link
Features/Functionality
- Shows chart with given variant.
- Chart with multiple datasets is shown
- On click of chart callback is called.
- Component is responsive.
- It is cross browser compatible. (Edge, Firefox, chrome).
Basic Usage
Dependencies
- jquery
- font-awesome
- shared styles
Definition
<cst-s-single-chart schema.bind="${schema}"></cst-s-single-chart>
Schema Description
| Attribute | Value | Description |
|---|---|---|
| id | string type | Identifier for component. |
| variant | string type | Chart type to be shown. |
| array of objects type | Data to be shown in chart. | |
| object type | Data to call API. | |
| object type | Options for the component. | |
| onClick | string type | Callback method to be called on item click. |
| dataFormatCallback | string type | Callback method to be called to format data. |
| elmInstance | object type | Variable holding instance of component. |
| object type | Specifies theme to be used for component. | |
| object type | Specifies fonts to be used for component. | |
| object type | Specifies style to be applied to component. | |
| object | Specifies what features to enable/disable. | |
| object | Specifies what access is given. | |
| object | Specifies raw attributes. | |
| other | any type | Any other info. |
| customParentContext | any | Parent Context. |
Sub element attributes
data
| Property | Value | Description |
|---|---|---|
| label | string type | Value to be shown in x axis. |
| value | number type | value to be shown. |
| items | array type | Array of Objects with label and value to create datasets. |
dataAPI
| Property | Value | Description |
|---|---|---|
| method | string type | API Request Method |
| url | string type | URL to be called. |
| body | object type | Body to be sent in request. |
options
| Property | Value | Description |
|---|---|---|
| object type | Labels to be shown. | |
| title | string type | Chart Title. |
| object type | yAxis options. | |
| yAxisTrimLabelLength | number type | Length of labels. |
| outsideSameColor | boolean type | To show the same or different colors of data points. |
| datasetSameColor | boolean type | To show the same or different colors of dataset. |
| shadeArr | array type | Array of shades to be shown. |
labels
| Property | Value | Description |
|---|---|---|
| yAxis | string type | Label to be shown in yAxis. |
| xAxis | string type | Label to be shown in xAxis. |
| items | array type | Label values to be shown on hover of chart. |
yAxis
| Property | Value | Description |
|---|---|---|
| startValue | number type | Start value of yAxis scale. |
| endValue | number type | End value of yAxis scale. |
| stepValue | number type | Step size. |
sub-theme
| Property | Value | Description |
|---|---|---|
| name | primary(default)/secondary/custom theme | Name of the theme. |
sub-font
| Property | Value | Description |
|---|---|---|
| name | primary (default roboto)/secondary/ custom font | Name of the font |
sub-style
| Property | Value | Description |
|---|---|---|
| name | primary (material default)/ secondary skeuomorphic(standard/filled/shaped-filled/outlined/shaped-outlined)/ custom | Name of design to be used. |
| width | percentage/pixels/string(small,medium,large) | Gives width/any other prop value |
sub-feature-flag
| Property | Value | Description |
|---|---|---|
| show-chart-types | ??? | Specifies which chart type to be shown. |
sub-access-ctrl
| Property | Value | Description |
|---|---|---|
| can-view | boolean type | Specifies if user has access to view component. |
| can-click | boolean type | Specifies if user has access to click on component. |
| can-change-type | boolean type | Specifies if user has access to change default type of chart. |
sub-raw-attributes
| Property | Value | Description |
|---|---|---|
| class | string | Specifies class name to be applied on component. |
Schema Examples
{
id :'', //auto generates by defaults
type: 'bar/line',//default bar (external
data: [{ //default [] (external)
label: 'JAN',
items: [
{
label: 'Day1',
value: 70
},
{
label: 'Day7',
value: 80
}
]
},
{
label: 'FEB',
items: [
{
label: 'Day1',
value: 90
},
{
label: 'Day7',
value: 50
}
]
}, {
label: 'MAR',
items: [
{
label: 'Day1',
value: 40
},
{
label: 'Day7',
value: 30
}
]
}
],
dataAPI:{ //loader till chart shown, onDataFormatSingleChart called before using data
method:'GET',//default
url:'',
body:{}
},
options: {
labels:{
xAxis:'Months', //custom color UI
yAxis:'Count', //custom color UI
values:['Day1','Day7'] //data set & on hover labels
},
title:'',
yAxis: {
startValue: 0,
endValue: 100,
stepValue: 10
},
},
onClick: 'onClickSingleChart',
dataFormatCallback: 'onDataFormatSingleChart',
elmInstance:'',
subFeatureFlag:{
},
subAccessCtrl:{
},
subTheme:{
},
subFont:{
},
subStyle:{
},
subRawAttributes:{
class: ''
}
}