Components Properties

The Railz 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:

  1. Your filter does not contain reportFrequency - difference between startDate and endDate should be 12 months.
  2. Your filter contains reportFrequency of month - difference between startDate and endDate should be 12 months.
  3. Your filter contains reportFrequency of quarter` - difference between startDate and endDate should be 12 quarters.
  4. Your filter contains reportFrequency of year - difference between startDate and endDate should be 12 years.

Railz 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 Railz 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
sandbox, quickBooks, quickBooksDesktop, freshBooks, xero, oracleNetsuite, sageBusinessCloud, sageIntacct, dynamicsBusinessCentral, wave

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

Railz 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 Railz 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
cashflowStatements, balanceSheets, incomeStatements

Type of financial statement.

true

filter.businessName

string

Unique business name identifier.

true if connectionId is not passed

filter.serviceName

enum
sandbox, quickBooks, quickBooksDesktop, freshBooks, xero, oracleNetsuite, sageBusinessCloud, sageIntacct, dynamicsBusinessCentral, wave

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

Railz 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 Railz 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
sandbox, quickBooks, quickBooksDesktop, freshBooks, xero, oracleNetsuite, sageBusinessCloud, sageIntacct, dynamicsBusinessCentral, wave

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

Railz 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 Railz 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
sandbox, quickBooks, quickBooksDesktop, freshBooks, xero, oracleNetsuite, sageBusinessCloud, sageIntacct, dynamicsBusinessCentral, wave

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

Railz 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 Railz 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
sandbox, quickBooks, quickBooksDesktop, freshBooks, xero, oracleNetsuite, sageBusinessCloud, sageIntacct, dynamicsBusinessCentral, wave

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

Railz 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 Railz 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
sandbox, quickBooks, quickBooksDesktop, freshBooks, xero, oracleNetsuite, sageBusinessCloud, sageIntacct, dynamicsBusinessCentral, wave

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

Railz 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;

Railz 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

Railz 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.

NameTypeDescriptionReport Type
containerobjectAn object for styling the bounding box of the chart. See object details.all
titleobjectAn object to customize the title section of the container. See object details.all
subTitleobjectAn object to customize the sub title section of the container. See object details.creditScore
chartobjectAn object to customize the charts. See object details.cashflowStatements, balanceSheets, incomeStatements, creditScore, expenses, revenue
barobjectObject to cover the styling options of the progress bar. See object details.invoices, bills
ratioobjectObject to cover the styling options for the financial ratio component. See object details.financialRatios
tableobjectObject to cover the styling options for table component. See object details.bankAccounts
loadingIndicatorobjectObject for styling the loading indicator. See object details.all
errorIndicatorobjectObject for styling the error indicator svg and text. See object details.all
tooltipIndicatorobjectObject for styling the tooltip indicator svg and text. See object details.all
contentobjectObject for replacing text content present in components. See object details.all

Component Options Container Object

Name

Type

Default

Description

style

CSSObject

Railz Statements Charts
height: 360px;

Railz Transactions Control
height: 202px;

Railz Income Statements
height: 300px;

Railz Railz Score
height: 300px;

Railz Bank Accounts
height: 202px;

Railz 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

NameTypeDefaultDescription
positiveCSSObjectcolor: #003032;Object for styling the positive value.
negativeCSSObjectcolor: #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 Railz 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


Did this page help you?