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 reportFrequency of month - difference between startDate and endDate should be 12 months.

Your filter contains reportFrequency of quarter` - difference between startDate and endDate should be 12 quarters.

Your filter contains reportFrequency of year - 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.

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