Components Properties
The Visualizations SDK comes packed with a set of component properties that allow you to build a custom-looking dashboard that meets your product needs. Learn more about each component's properties below.
Component Filter Parameters
connectionId
Can't be used to filter at the moment but will be available in a future release when the APIs are updated.startDate and endDate
Note that the difference between your start date and end date should be a maximum of 12 periods
For example:
- Your filter does not contain
reportFrequency- difference between startDate and endDate should be 12 months.- Your filter contains
reportFrequencyofmonth- difference between startDate and endDate should be 12 months.- Your filter contains
reportFrequency ofquarter` - difference between startDate and endDate should be 12 quarters.- Your filter contains
reportFrequencyofyear- difference between startDate and endDate should be 12 years.
Accounting Data as a Serviceā¢ Visualizations
| Property | Type | Description | Required |
|---|---|---|---|
| configuration | object | Object containing important information for authentication. If changed, the component is re-rendered. | true |
| configuration.token | string | To authenticate your application, specify an access token. The Authentication API endpoint can be used to get this access token. | true |
| configuration.debug | boolean | Serves as an indication to log warnings and errors if true. | false |
| filter | object | Filters needed to display a chart, they are specific to a report type. The filter object should only be changed if you are ready to re-render the component. | true |
| filter.reportType | enum [ invoices, bills, cashflowStatements, balanceSheets, incomeStatements] | Type of chart to render. | true |
| filter.businessName | string | Unique business name identifier. | true if connectionId is not passed |
| filter.serviceName | enum See supported integrations enum values | Name of the accounting service platform. | true if connectionId is not passed |
| filter.connectionId (not available) | string | Unique connection identifier. | true if businessName and serviceName are not passed |
| filter.reportFrequency | enum [ month, quarter, year] | The snapshot of reporting periods. | true only for cashflowStatements, balanceSheets, incomeStatements |
| filter.startDate | string YYYY-MM-DD | Date from which the data begins. | true |
| filter.endDate | string YYYY-MM-DD | Date from which the data ends. Difference between the start and end date should be a maximum of 12 months. | true |
| options | object | A component options object for styling components. | false |
Statements Chart
| Property | Type | Description | Required |
|---|---|---|---|
| configuration | object | Object containing important information for authentication. If changed, component is re-rendered. | true |
| configuration.token | string | To authenticate your application, specify an access token. The Authentication API endpoint can be used to get this access token. | true |
| filter | object | Filters needed to display a chart, they are specific to a report type. The filter object should only be changed if you are ready to re-render the component. | true |
| filter.reportType | enum [ invoices, bills, cashflowStatements, balanceSheets, incomeStatements] | Type of financial statement. | true |
| filter.businessName | string | Unique business name identifier. | true if connectionId is not passed |
| filter.serviceName | enum See supported integrations enum values | Name of accounting service platform. | true if connectionId is not passed |
| filter.connectionId (not available) | string | Unique Connection identifier. | true if businessName and serviceName are not passed |
| filter.reportFrequency | enum [ month, quarter, year] | The snapshot of reporting periods. | true |
| filter.startDate | string YYYY-MM-DD | Date from which the report data begins. | true |
| filter.endDate | string YYYY-MM-DD | Date from which the report data ends. Difference between the start and end date should be a maximum of 12 months. | true |
| options | object | A component options object for styling components. | false |
Transactions Control
| Property | Type | Description | Required |
|---|---|---|---|
| configuration | object | Object containing important information for authentication. | true |
| configuration.token | string | To authenticate your application, specify an access token. The Authentication API endpoint can be used to get this access token. | true |
| filter | object | Filters needed to display a chart, they are specific to a report type, The filter object should only be changed if you are ready to re-render the component. | true |
| filter.reportType | enum [ invoices, bills] | Type of transaction. | true |
| filter.businessName | string | Unique business name identifier. | true if connectionId is not passed |
| filter.serviceName | enum See supported integrations enum values | Name of accounting service platform. | true if connectionId is not passed |
| filter.connectionId (not available) | string | Unique connection identifier. | true if businessName and serviceName are not passed |
| filter.startDate | string YYYY-MM-DD | Date from which the transactions begins. | true |
| filter.endDate | string YYYY-MM-DD | Date from which the transactions ends. Difference between the start and end date should be a maximum of 12 months. | true |
| options | object | A component options object for styling components. | false |
Income Statements Chart
| Property | Type | Description | Required |
|---|---|---|---|
| configuration | object | Object containing important information for authentication. If changed, component is re-rendered. | true |
| configuration.token | string | To authenticate your application, specify an access token. The Authentication API endpoint can be used to get this access token. | true |
| filter | object | Filters needed to display a chart, they are specific to a report type. The filter object should only be changed if you are ready to re-render the component. | true |
| filter.reportType | enum [ expenses, revenue] | Type of financial statement. | true |
| filter.businessName | string | Unique business name identifier. | true if connectionId is not passed |
| filter.serviceName | enum See supported integrations enum values | Name of accounting service platform. | true if connectionId is not passed |
| filter.connectionId (not available) | string | Unique Connection identifier. | true if businessName and serviceName are not passed |
| filter.reportFrequency | enum [ month, quarter, year] | The snapshot of reporting periods. | true |
| filter.startDate | string YYYY-MM-DD | Date from which the report data begins. | true |
| filter.endDate | string YYYY-MM-DD | Date from which the report data ends. Difference between the start and end date should be a maximum of 12 months. | true |
| options | object | A component options object for styling components. | false |
Credit Score
| Property | Type | Description | Required |
|---|---|---|---|
| configuration | object | Object containing important information for authentication. | true |
| configuration.token | string | To authenticate your application, specify an access token. The Authentication API endpoint can be used to get this access token. | true |
| filter | object | Filters needed to display a chart, they are specific to a report type, The filter object should only be changed if you are ready to re-render the component. | true |
| filter.reportType | enum [ railzScore] | Type of transaction. | true |
| filter.businessName | string | Unique business name identifier. | true if connectionId is not passed |
| filter.serviceName | enum See supported integrations enum values | Name of accounting service platform. | true if connectionId is not passed |
| filter.connectionId (not available) | string | Unique connection identifier. | true if businessName and serviceName are not passed |
| filter.startDate | string YYYY-MM-DD | Date from which the transactions begins. | true |
| filter.endDate | string YYYY-MM-DD | Date from which the transactions ends. Difference between the start and end date should be a maximum of 12 months. | true |
| options | object | A component options object for styling components. | false |
Bank Accounts
| Property | Type | Description | Required |
|---|---|---|---|
| configuration | object | Object containing important information for authentication. | true |
| configuration.token | string | To authenticate your application, specify an access token. The Authentication API endpoint can be used to get this access token. | true |
| filter | object | Filters needed to display a chart, they are specific to a report type, The filter object should only be changed if you are ready to re-render the component. | true |
| filter.reportType | enum [ bankAccounts] | Type of transaction. | true |
| filter.businessName | string | Unique business name identifier. | true if connectionId is not passed |
| filter.serviceName | enum See supported integrations enum values | Name of accounting service platform. | true if connectionId is not passed |
| filter.connectionId (not available) | string | Unique connection identifier. | true if businessName and serviceName are not passed |
| options | object | A component options object for styling components. | false |
Progress Bar
| Property | Type | Description | Required | Default |
|---|---|---|---|---|
| reportType | enum [ invoices, bills] | Type of transaction. | false | empty |
| unpaidAmount | number | For unpaid amount of an invoice or bill. | true | |
| paidAmount | number | For paid amount of an invoice or bill. | true | |
| overdueAmount | number | For overdue amount of an invoice or bill. | false | 0 |
| options | object | For whitelabeling styling the progress bar. | false | |
| options.titleStyle | CSSObject | Object based on HTML stylings for the bar title ( Total unpaid value). | false | color: #424242; fontSize: 14px; fontWeight: 500; |
| options.titleValueStyle | CSSObject | Object based on HTML stylings for the bar title amount. | false | color: #424242; fontSize: 14px; fontWeight: 600; |
| options.subTitle1Style | CSSObject | Object based on HTML stylings for the bar first subtitle(Paid value). | false | color: #424242; fontSize: 12px; fontWeight: 500; |
| options.subTitleValue1Style | CSSObject | Object based on HTML stylings for the bar first subtitle amount. | false | color: #1e313b; font-weight: 600; font-size: 14px; |
| options.subTitle2Style | CSSObject | Object based on HTML stylings for the bar first subtitle (Overdue value). | false | color: #424242; fontSize: 12px; fontWeight: 500; |
| options.subTitleValue2Style | CSSObject | Object based on HTML stylings for the bar second subtitle amount. | false | color: #1e313b; font-weight: 600; font-size: 14px; |
| options.barStyle | CSSObject | Object based on HTML stylings for the bar. | false | height: 16px; background: #f5f5f5; borderRadius: 3px; |
| options.progressStyle | CSSObject | Object based on HTML stylings for the barās progress indicator. | false | display: block; height: 100%; background: #ffd738; borderRadius: 3px 0 0 3px; |
Loading Indicator
| Property | Type | Description | Required | Default |
|---|---|---|---|---|
| loadingText | string | Text to display at the bottom of the loading indicator. | false | |
| fillColor | string | Fill color of the loading indicator. | false | 00884f |
| textStyle | CSSObject | Object based on HTML stylings for the text displayed with the loading indicator. | false | color: #000000 font-size: 12px; |
| width | string | width of the loading indicator. | false | 48px |
| height | string | height of the loading indicator. | false | 48px |
Error Image
| Property | Type | Description | Required | Default |
|---|---|---|---|---|
| statusCode | number | Status code based on HTTP Response codes. | false | |
| text | string | Text to display at the bottom of the svg image. | false | 202 - Data currently unavailable 204 - No data available 404 - No data available 500 - Oops, something went wrong No Code - Oops, something went wrong |
| fillColor | string | Fill color of the svg image representing a status code. | false | 949494 |
| textStyle | CSSObject | Object based on HTML stylings for the text displayed with the error indicator. | false | color: #424242 font-size: 14px; |
| width | string | Width of the error indicator. | false | 202, 204, 404 - 48px 500 - 88px |
| height | string | Height of the error indicator. | false | 202, 204, 404 - 56px 500 - 64px |
Component Options Object
All fields in the Options parameter are optional.
| Name | Type | Description | Report Type |
|---|---|---|---|
| container | object | An object for styling the bounding box of the chart. See object details. | all |
| title | object | An object to customize the title section of the container. See object details. | all |
| subTitle | object | An object to customize the sub title section of the container. See object details. | creditScore |
| chart | object | An object to customize the charts. See object details. | cashflowStatements, balanceSheets, incomeStatements, creditScore, expenses, revenue |
| bar | object | Object to cover the styling options of the progress bar. See object details. | invoices, bills |
| ratio | object | Object to cover the styling options for the financial ratio component. See object details. | financialRatios |
| table | object | Object to cover the styling options for table component. See object details. | bankAccounts |
| loadingIndicator | object | Object for styling the loading indicator. See object details. | all |
| errorIndicator | object | Object for styling the error indicator svg and text. See object details. | all |
| tooltipIndicator | object | Object for styling the tooltip indicator svg and text. See object details. | all |
| content | object | Object for replacing text content present in components. See object details. | all |
Component Options Container Object
| Name | Type | Default | Description |
|---|---|---|---|
| style | CSSObject | Statements Charts height: 360px; Transactions Control height: 202px; Income Statements height: 300px; Credit Score height: 300px; Bank Accounts height: 202px; Financial Ratios height: 360px; | CSS Object styles for the container. |
Component Options Title Object
| Name | Type | Default | Description |
|---|---|---|---|
| style | CSSObject | color: #003032; font-size: 18px; font-weight: 600; text-align: left; justify-content: left; | CSS Object styles for the title. |
| visible | boolean | true | Determines if you want to make the title visible, also hides the tooltip |
Component Options SubTitle Object
| Name | Type | Default | Description |
|---|---|---|---|
| style | CSSObject | align-self: center; text-align: center; font-size: 12px; font-weight: 500; line-height: 28px; width: 100%; | CSS Object styles for the sub title. |
| visible | boolean | true | Determines if you want to make the sub title visible, also hides the tooltip |
| dateVisible | boolean | true | Determines if you want to make the date in the sub title visible |
| position | enum [ top, bottom] | top | Determines the location of the subtitle |
Component Options Chart Object
| Name | Type | Default | Description |
|---|---|---|---|
| colors | array | See default table below | List of color strings for the chart, length is dependant on chart type. |
| fontFamily | string | See default here | Font family of the chart. |
| backgroundColor | string | #FFFFFF | Background color of the chart Schema. |
| label | Highcharts.CSSObject | Default | Object for styling the chart labels. |
| legend | Highcharts.CSSObject | Default | Object for styling the chart legends. |
| width | null, number, string | null | Details. |
| height | null, number, string | null | Details. |
| style | Highcharts.CSSObject | Default | Object for styling the chart |
| yAxisStyle | Highcharts.CSSObject | Default | Object for styling the chart yAxis. |
| xAxisStyle | Highcharts.CSSObject | Default | Object for styling the chart xAxis. |
| pie | object | See details here | Object to cover the styling of additional pie chart properties. Used by expenses and revenue. |
| gauge | object | See details here | Object to cover the styling of additional gauge chart properties. Used by creditScore |
Component Options Chart Pie Object
| Name | Type | Default | Description |
|---|---|---|---|
| total | CSSObject | color: #000000; line-height: 1.5; font-size: 20px; font-weight: 700; | Object for styling the total value. |
| legendValue | CSSObject | font-size: 14px; color: #070a0e; | Object for styling the chart legend values. |
| legendName | CSSObject | font-size: 12px; color: #424242; | Object for styling the chart legend titles. |
| positive | CSSObject | color: #003032; | Object for styling the positive value. |
| negative | CSSObject | color: #7d0000; | Object for styling the negative value. |
Component Options Chart Gauge Object
| Name | Type | Default | Description |
|---|---|---|---|
| score | Highcharts.CSSObject | font-size:36px; color: #000000; font-weight:600; | Object for styling the score value. |
| rating | Highcharts.CSSObject | font-size:16px; font-weight: 400; | Object for styling the rating value. |
| colorRanges | object | See default table below for Credit Score | Object for styling the guage color ranges |
Component Options Bar Object
| Name | Type | Default | Description |
|---|---|---|---|
| titleStyle | CSSObject | color: #424242; font-size: 14px; font-weight: 500; | Object based on HTML stylings for the bar title ( Total unpaid value). |
| titleValueStyle | CSSObject | color: #424242; font-size: 14px; font-weight: 600; | Object based on HTML stylings for the bar title amount. |
| subTitle1Style | CSSObject | color: #424242; font-size: 12px; font-weight: 500; | Object based on HTML stylings for the bar first subtitle (Paid value). |
| subTitleValue1Style | CSSObject | font-weight: 600; font-size: 14px; color: #1e313b; | Object based on HTML stylings for the bar first subtitle amount. |
| subTitle2Style | CSSObject | color: #424242; font-size: 12px; font-weight: 500; text-align: right; | Object based on HTML stylings for the bar first subtitle(Overdue value). |
| subTitleValue2Style | CSSObject | font-weight: 600; font-size: 14px; color: #1e313b; | Object based on HTML stylings for the bar second subtitle amount. |
| barStyle | CSSObject | height: 16px; background: #f5f5f5; border-radius: 3px; | Object based on HTML stylings for the bar. |
| progressStyle | CSSObject | display: block; height: 100%; background: #FFD738; border-radius: 3px 0 0 3px; | Object based on HTML stylings for the barās progress indicator. |
Component Options Ratio Object
| Name | Type | Default | Description |
|---|---|---|---|
| header | CSSObject | display: flex; | Object based on HTML stylings for the text displayed with the loading indicator. |
| select | object | See details here | Object based on styling for the select |
| itemContainer | CSSObject | color: #000000 font-size: 12px | Object based on HTML stylings for the text displayed with the loading indicator. |
| itemInfo | CSSObject | color: #000000 font-size: 12px | Object based on HTML stylings for the text displayed with the loading indicator. |
| itemName | CSSObject | color: #000000 font-size: 12px | Object based on HTML stylings for the text displayed with the loading indicator. |
| itemNameText | CSSObject | Object based on HTML stylings for a ratio type title | |
| itemValue | CSSObject | Object based on HTML stylings for the ratio type value | |
| itemSummary | CSSObject | Object based on HTML stylings for the ratio type values container | |
| sparkLine | object | See details here | Object for the chart stylings |
| itemToolTip | ToolTip Object | See details here | Object based on styling for tooltip |
| itemPercentage | object | See details here | Object based on HTML stylings for the ratio percentage change |
Component Options Ratio Select Object
| Name | Type | Default | Description |
|---|---|---|---|
| position | enum [ center, left, right] | right | position of the dropdown item |
| item | CSSObject | color: #000000DD; | Object for styling each of the items in the dropdown |
| selectedItem | CSSObject | background: #00000014; | Object for styling the selected item in the dropdown |
| style | CSSObject | background: #fffff; | Object for styling the select object |
| container | CSSObject | background: #fffff; | Object for styling the dropdown container when expanded |
| arrow | Options Title Object | See details here | Object for styling the select arrow |
Component Options Ratio Item Percentage Object
| Name | Type | Default | Description |
|---|---|---|---|
| positive | CSSObject | color: #003032; | Object for styling the positive value. |
| negative | CSSObject | color: #7d0000; | Object for styling the negative value. |
Component Options Sparkline Object
| Name | Type | Default | Description |
|---|---|---|---|
| container | CSSObject | width: 132px; height: 60px; | Object for styling each of the items in the dropdown |
| chart | object | See details here | Object for styling the chart component |
Component Options Table Object
| Name | Type | Default | Description |
|---|---|---|---|
| style | CSSObject | list-style-type: none; font-weight: 400; | Object based on HTML stylings for the table component |
| title | CSSObject | color: #000000; line-height: 28px; font-size: 14px; font-weight: 500; | Object based on HTML stylings for the title component. |
| itemContainer | CSSObject | display: flex; justify-content: space-between; | Object based on HTML stylings for the container of each item in the table. |
| itemName | CSSObject | color: #424242; font-size: 14px; font-weight: 500; | Object based on HTML stylings for the account name |
| itemSeperator | CSSObject | margin: 0 16px 8px; display: flex; flex-grow: 1; border-bottom: 1px dashed #9e9e9e; | Object based on HTML stylings for the seperator between the account name and balance |
| itemValue | CSSObject | text-align: end; color: #212121; font-size: 14px; font-weight: 700; | Object based on HTML stylings for the title component. |
Component Options Loading Indicator Object
| Name | Type | Default | Description |
|---|---|---|---|
| fillColor | string | 00884f | Color for the loading indicator. |
| textStyle | CSSObject | color: #000000 font-size: 12px | Object based on HTML stylings for the text displayed with the loading indicator. |
| width | string | 48px | Width of the loading indicator. |
| height | string | 48px | Height of the loading indicator. |
Component Options Error Indicator Object
| Name | Type | Default | Description |
|---|---|---|---|
| fillColor | string | 949494 | Color for the error indicator svg. |
| textStyle | string | color: #424242 font-size: 14px | Object based on HTML stylings for the text displayed in the error indicator. |
| width | string | 202, 204, 404 - 48px 500 - 88px | Width of the error indicator. |
| height | string | 202, 204, 404 - 56px 500 - 64px | Height of the error indicator. |
Component Options Tooltip Indicator Object
| Name | Type | Default | Description |
|---|---|---|---|
| fillColor | string | FEFEFE | Color for the tooltip indicator svg. |
| width | string | 13px | Width of the tooltip indicator. |
| height | string | 13px | Height of the tooltip indicator. |
| position | enum [ bottom-center, bottom-left, bottom-right , center-left , center-right] | bottom-center | Position where the tooltip text will appear |
| style | CSSObject | Object based on HTML stylings for the tooltip container | |
| textStyle | CSSObject | Object based on HTML stylings for the tooltip if a text parameter is passed | |
| tooltipTextStyle | CSSObject | Object based on HTML stylings for the text displayed on hover |
Component Options Content Object
| Name | Type | Default | Description |
|---|---|---|---|
| title | string | Based on the report type | content for report type title |
| subTitle | string | As of endDate | content for report type sub title. Used by creditScore. |
| date | object | See details here | content for formatting date shown on charts. See datefns |
| label | object | See details here | object containing title changes for each financial ratio types, does not change the content of the fields. |
| tooltip | object | See details here | object containing tooltip content |
Component Options Content Date Format Object
| Name | Type | Default | Description |
|---|---|---|---|
| format | string | monthly - 'MMM yy' quarterly - 'yyyy' yearly - 'yyyy' | Object for setting the date format, default is based on report frequency |
| locale | string | 'us' | Object for date locale |
| prefix | string | 'Q' | Object for setting the prefix for quarterly frequency |
Component Options Content Tooltip Object
| Name | Type | Description |
|---|---|---|
| description | string | object containing tooltip content changes for each component tooltip. |
| n - [financial ratios] | string See details here | object containing tooltip content changes for each financial ratio types, does not change the content of the fields. |
Chart Colors
Trendline Color
Current version of Visualizations does not allow you to modify the trendline color.
| Report Type | Colors |
|---|---|
| balanceSheets | Current assets: #1D7043 Current liabilities: #F06C3A Non-current assets: #30A665 Non-current liabilities: #B30000 |
| incomeStatements | Income: #006037 Expenses: #F06C3A Cost of Goods Sold: #B30000 Other Income: #003032 Other Expenses: #38C076 |
| cashflowStatements | Operating activities: #009BBD Financing Activities: #F06C3A Investing Activities: #003032 |
| expenses, revenue | First Color: #00883D Second Color: #009BBD Third Color: #38C076 Fourth Color: #B5F4FD Fifth Color: #FFD738 |
| creditScore | default: #FFD839 525: #E0E345 575: #A2DF61 625: #6DE18D 675: #15D283 750: #00884F |
| financialRatios | #009BBD |
Updated 9 months ago