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"
},
...
]
}
}
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"
}
}
]
},
}

{
"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
}
}
]
}
}

After you’ve finished configuring the charts, you must list them in the dashboard configuration file in the widgets
object. The widgets
object 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"},
}
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 |
---|---|---|---|
| âś” | string | The title displayed on the chart |
| âś” | string | Dashboard tab where the chart should be displayed Possible values: |
| âś” | string | The type of chart that should be plotted Possible values: |
| âś” | array | The metrics that should be plotted in the chart. Each metric listed should in an JSON object format:
CODE
|
| object | Sets the text displayed on the left side of the y-axis and its font styling Example:
CODE
| |
| 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:
JSON
Note: The chart won’t be rendered if | |
| array | boolean | An array of two strings with the titles that should be displayed beside each of the 2 y-axis declared in the If set to | |
| boolean | Enables or disables tooltip on chart when hovering over series (enabled by default) | |
| boolean | Determines whether to show labels on the metric series or not and enables custom label configurations for a metric series (color) | |
| string | Set the font size of all values displayed on the metric series labels | |
| boolean | Enables markers customization for a metric series (shape and size) | |
| boolean | Enables line stroke configuration on metric series (width, dash and curve) | |
| string | Excel date format to be applied to the x-axis labels (default value is | |
| boolean | Hides reconciliation date annotation displayed on chart | |
| string | Whether the “Reconciled” label will be displayed on the left or right side of the reconciliation data point Possible values:
| |
| 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) ![]() | |
| 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 |
---|---|---|---|
| string | The metric name as defined on column A (“Metrics”) of the | |
|
| 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: |
| Object | Customize the look of the series’ lines. Should be used with at least one of the following properties: |
Metrics Settings
Attribute | Required? | Type | Description |
---|---|---|---|
| ✔ | string | The metric name as defined on column A (“Metrics”) of the |
|
| 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: |
| Object | Customize the look of the series’ lines. Should be used with at least one of the following properties: | |
| Object | Configure the markers added to the series' data points in the cart. Should be used with at least one of the following properties: | |
| Object | Allows label configuration for the metric series. For the labels to be displayed for a given series, the
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 | |
| 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 |
---|---|---|---|
| string | The width of the metric series (how thick or thin a line is, for example). Possible values: | |
|
| string | Add dashes to the metric series' lines. The values determine the amount of space between the dashes in the series. Possible values: |
| string | Whether the lines draw in the charts connecting the data points should be smooth or straight lines. Possible values:
|
Metrics Settings - Markers
Attribute | Required? | Type | Description |
---|---|---|---|
| string | How big the marker point is. The default value is Possible values: | |
|
| string | The shape of the marker point. The default value is Possible values: |