Bar chart visualization

Bar chart settings

Mapping

Setting	Description
X-Axis	Choose which data to show on the x-axis. Auto <column> shows the column which was selected automatically for you, usually a time field for the x-axis.
Y-Axis	Choose which data to show on the y-axis. Auto <column> shows the column which was selected automatically for you, usually a numerical field for the y-axis.
Series	Select the column used to split the x-axis values into series.

Type

Setting	Description
Show as groups	Toggle whether to display the Series as grouped bars. This option is only enabled when a Series is selected.
Mode	Percentage mode displays a series as a percentage of the overall bar, only available when a Series is selected.
Layout	Vertical or horizontal.

X-Axis

Setting	Description
Label	Allows you to override the default and enter a label, for example `Date` or `Time`.

Y-Axis

Setting	Description
Label	Allows you to override the default and enter a label, for example `Tickets` or `ms`.
Range	Auto - graph is fitted to the data automatically Percentage - shows 0-100 Fit to data from zero - shows from 0 to the data maximum Custom - allows you to specify the min and max

Legend

Setting	Description
Show legend	Toggle whether to display a colored legend for each series of data in the graph. Enabling the toggle displays the Legend position field below.
Position	Select where the legend is displayed in relation to the graph. This field is only visible when the Show legend toggle is enabled.

Annotations

Setting	Description
Show values	Displays an annotation of the value for each bar / series in the chart. This annotation may be hidden depending on the space available.
Series total	Displays an annotation of the total value for each series in the chart. This annotation may be hidden depending on the space available.

Options

Setting	Description
Grid lines	Select whether to include grid lines.
Annotation	Display an annotation showing the value for each series.

Custom palette

It is possible to use custom colors for this visualization by creating a custom palette. Custom palettes can be declared as either an array or an object as follows:

Array: Select the colors based on the order of the data (for example, the first series is the first color).
"palette": ["red", "#abcdef", "green"]
Object: Select colors based on the series label.
"palette": { "EC2": "red", "Lambda": "#abcdef", "CloudWatch": "blue" }

To apply a custom palette, do the following:

Click the More Options ellipsis button then select Edit JSON.

Enter the JSON for the palette you want to apply under visualisation/config/data-stream-bar-chart. For example:

"visualisation": {
    "type": "data-stream-bar-chart",
    "config": {
      "data-stream-bar-chart": {
        "horizontalLayout": "vertical",
        "grouping": false,
        "showValue": false,
        "displayMode": "actual",
        "xAxisLabel": "",
        "yAxisLabel": "",
        "range": {
          "type": "auto"
        },
        "showGrid": true,
        "showLegend": false,
        "legendPosition": "bottom",
        "palette": {
          "EC2": "red",
          "Lambda": "#abcdef",
          "CloudWatch": "blue"
        }
      }
    }
  },

Click Save to apply the changes.

Was this article helpful?

Have more questions or facing an issue?

Submit a ticket