Vertical data
Vertical bar charts can be used to track and compare data with multiple variables. Charts can use the content colour palette for treating data.
You can either define the data elements in the markup and use the data-init="auto" attribute. Or update the data values using the provided JavaScript component. The data list is expected to be in the following format:
Next, the component has to be initialized.
Categories
The mandatory category list that defines the category title and the display colour.
- Title: The category title
- Color: The SDX interaction colour CSS class name or a valid hex colour (eg `#ffffff`)
Items
The list of individual items and their data definitions.
- Title: The data item title (x-axis label)
- Values: The comma separated list of data values. Must be less or equal to the number of categories.
- Class: The css class to append to the item, can be used to show/hide items on different breakpoints.
In addition make sure to set the data-unit attribute to the desired value.
Split data
Vertical data can also be split to show categories or groupings within a data set. When splitting data, a key should be used.
Next, the component has to be initialized.