Excel Metrics Cards & Charts Configuration

Configuration Files

To display the charts in the dashboard, you must edit the dashboard configuration files (dashboard-primary.json5 and/or dashboard-customer.json5) and with the charts configurations - dashboard-charts.json5. Those can be found in the /private/dashboard folder of your account's WebDAV server.

For more information on how to manage your files through WebDAV, refer to How to upload files via WebDAV

First, edit the dashboard-charts.json5 configuration file to set up the charts you want to be rendered in the dashboard. Each chart must have an id, so it can be referenced by the dashboard configuration files. The charts defined on dashboard-charts.json5 follow this pattern:

{
  "chart id": {
    title: "My Chart",
    type: "line"
    ...,
    metrics: [
      {
        key: "metric_key"
      },
      ...
    ]
  }
  },
  "other chart id": {
    title: "My Other Chart",
    type: "bar"
    ...,
    metrics: [
      {
        key: "metric_key"
      },
      ...
    ]
  }
}

JSON

Below is an example of settings for a line (example chart 1) and a bar chart (example chart 2):

{
	"example chart 1": {
		title: "Example Chart 1",
		tab: "commerce",
		type: "line",
		stroke: true,
		tooltip: true,
		dataLabels: true,
		markers: true,
		colorPalette: "palette8",
		metrics: [
			{
				key: "sample_metric_4",
				stroke: {
					dash: 'medium',
					curve: "smooth"
				}
			},
			{
				key: "sample_metric_5",
				stroke: {
					width: "small",
					curve: "stepline"
				},
				markers: {
					shape: "circle",
					size: "medium"
				}
			}
		]
	},
}

JSON

{
	"example chart 2": {
		title: "Example Chart 2",
		tab: "commerce",
		type: "bar",
		stroke: true,
		dataLabels: true,
		metrics: [
			{
				key: "sample_metric_2",
				labels: {
					enabled: true
				}
			},
			{
				key: "sample_metric_3",
				labels: {
					enabled: true
				}
			}
		]
	}
}

JSON

After you’ve finished configuring the charts, you must list them in the dashboard configuration file in the widgets object. The widgetsobject expects objects with a key equal to the chart’s id and a value equal to an object containing two configuration variables: chart, which must be set to true, and column that can have "left" or "right" as valid values. For example, to display the two charts configured earlier, they could be configured as below :

widgets: {
"example chart 1" :{ chart: true, column: "left"},
"example chart 2" :{ chart: true, column: "left"},
}

JSON

The charts are positioned based on their order within the widgets object ( and the column attribute assigned to them. In the example above, “example chart 1” will be positioned above “example chart 2” in the dashboard’s left column.

Chart Main Settings

Attribute	Required?	Type	Description
`title`	✔	string	The title displayed on the chart
`tab`	✔	string	Dashboard tab where the chart should be displayed Possible values: `accounting`, `commerce`, `banking`
`type`	✔	string	The type of chart that should be plotted Possible values: `line`, `area`, `bar`
`metrics`	✔	array	The metrics that should be plotted in the chart. Each metric listed should in an JSON object format: `metrics: [ { key: "metric-1" }, { key: "metric-2" }, ... { key: "metric-n" } ]` CODE
`yaxisConfig`		object	Sets the text displayed on the left side of the y-axis and its font styling Example: `yaxisConfig: { title: "Percentage (%)", fontSize: '14px', fontWeight: '900' }` CODE
`multiAxis`		array	An array of two strings (metric keys) used as reference to plot 2 y-axis. The first one listed in the array will be plotted on the left side of the chart and the second one on the right side. Example: `multiAxis: ["metric1", "metric2"]` JSON Note: The chart won’t be rendered if `multiAxis` is specified in the configuration files but the metrics listed are invalid or the array doesn’t have two metrics
`multiAxisTitles`		array \| boolean	An array of two strings with the titles that should be displayed beside each of the 2 y-axis declared in the `multiAxis` attribute. It only takes effect if `multiAxis` is also included in the chart configuration. If set to `true` instead of the an array, the text displayed for each y-axis will be the same as the labels' text of the metrics listed in the `multiAxis` array
`tooltip`		boolean	Enables or disables tooltip on chart when hovering over series (enabled by default)
`dataLabels`		boolean	Determines whether to show labels on the metric series or not and enables custom label configurations for a metric series (color)
`dataLabelsFontSize`		string	Set the font size of all values displayed on the metric series labels
`markers`		boolean	Enables markers customization for a metric series (shape and size)
`stroke`		boolean	Enables line stroke configuration on metric series (width, dash and curve)
`xaxisDateFormat`		string	Excel date format to be applied to the x-axis labels (default value is `"mmm-yyyy"`)
`hideReconciledLabel`		boolean	Hides reconciliation date annotation displayed on chart
`reconciledAnnotation`		string	Whether the “Reconciled” label will be displayed on the left or right side of the reconciliation data point Possible values: `left` (default), `right`
`colorPalette`		string	ApexCharts default color palettes assigned to the chart series. The colors are assigned by the order in which the metrics are listed in the configuration file (e.g. first metric will have the the first color from a palette assigned to it and so on)
`apexOptions`		Object	Allows for ApexCharts configuration syntax for further chart customization Note: Using this attribute in the configuration file will override any non-required attribute configurations. Either use this option to customize your charts or the default configuration attributes

yaxisConfig Settings

Attribute

Required?

Type

Description

title

string

The metric name as defined on column A (“Metrics”) of the _METRICS_ tab from the accounting.xslx spreadsheet

type

string

How the series should be plotted in the chart. If not specified, will use the type assigned to the chart as its value.

Possible values:
line, area, bar

stroke

Object

Customize the look of the series’ lines.

Should be used with at least one of the following properties: width, dash or curve

Metrics Settings

Attribute	Required?	Type	Description
`key`	✔	string	The metric name as defined on column A (“Metrics”) of the `_METRICS_` tab from the accounting.xslx spreadsheet
`type`		string	How the series should be plotted in the chart. If not specified, will use the type assigned to the chart as its value. Possible values: `line`, `area`, `bar`
`stroke`		Object	Customize the look of the series’ lines. Should be used with at least one of the following properties: `width`, `dash` or `curve`
`markers`		Object	Configure the markers added to the series' data points in the cart. Should be used with at least one of the following properties: `size` or `shape`
`labels`		Object	Allows label configuration for the metric series. For the labels to be displayed for a given series, the `labels` object must have a key named `enabled` and it’s value set to `true`: `labels: { enabled: true }` JSON If set up as an empty object, the label background color will be the same as the one used to plot the metric series. To specify a color, set the `color` property within the `labels` object.
`color`		string	Hex color code for the chart’s metric’s series. If a color is assigned to a metric series, it will take precedence over the color palette assigned to the chart and to a color previously assigned to that metric series.

Metrics Settings - Stroke

Attribute

Required?

Type

Description

width

string

The width of the metric series (how thick or thin a line is, for example).

Possible values:
none, small, medium or large

dash

string

Add dashes to the metric series' lines. The values determine the amount of space between the dashes in the series.

Possible values:
none, small, medium or large

curve

string

Whether the lines draw in the charts connecting the data points should be smooth or straight lines.

Possible values:

straight - points connected in straight lines (default)

smooth - points connected in a curve fashion

stepline - points connected by horizontal and vertical line segments (looks like a staircase)

Metrics Settings - Markers

Attribute

Required?

Type

Description

size

string

How big the marker point is. The default value is medium

Possible values:
none, small, medium or large

shape

string

The shape of the marker point. The default value is circle

Possible values:
square, circle