Interactive bar/chart

The interactive bar chart component displays breakdown percentage and details of a value specified by the user. It allows the user to manipulate the input and retrieve detailed information pertinent to their individual situations. The visualizations of the chart breaks down complex and abstract concept and translates it into easily digestible and comprehensible story.

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Text and data

Demo

Table caption
Category	Percentage (%)	Amount
Service A	50%	0.00 dollars
Service B	10%	0.00 dollars
Service B - 1	5%	0.00 dollars
Service B - 2	5%	0.00 dollars
Service C	10%	0.00 dollars
Service C - 1	5%	0.00 dollars
Service C - 2	5%	0.00 dollars
Service D	10%	0.00 dollars
Service E	20%	0.00 dollars

Bar chart legend

Lorem ipsum dolor sit amet

Code

Responsive preview

Consider using interactive bar/chart when:

it's needed to show users the breakdown and the details of a total value
when the total value is not easy to know or is highly dependable on user's individual situation

Usage examples:

property tax dollar value breakdown

Related components:

table

Do

Keep the chart item label short and concise.

Don't

Do not add more than 2 levels of breakdowns.