## Feature Examples ### Items - description: Pass the data as an array of `items`. The only required field is `value`. It sets the width of each bar and is displayed on the bar when there is no label. Bars are sorted from the highest value to the lowest and colored in a fixed sequence. - example: ```jsx ; ``` ### Description - description: Explain what each bar stands for with `description`, shown under the bar, and `descriptionInfo`, shown in a tooltip on hover. - example: ```jsx ; ``` ### Label - description: Format the value shown on a bar with `label`, for example as a currency or a percentage. The bar width is still calculated from `value`. - example: ```jsx ; ``` ### Total - description: By default the chart takes the full width and sizes the bars against the sum of all values. Set `total` to a higher number when the items are only a part of a larger whole. The bars then take a proportional share of the width and the rest stays as an empty track. - example: ```jsx ; ``` ### Single item - description: A chart with one item shows how that item relates to the `total`, for example unique visitors out of all visits. - example: ```jsx ; ``` ### Short label - description: Add `labelShort` as a compact version of the label. It replaces `label` when the bar is too narrow to display the full text. - example: ```jsx ; ``` ### Overflow - description: When a bar is too narrow for its label, the text is truncated with an ellipsis. Add `descriptionInfo` to hide the truncated label instead and reveal the full value in a tooltip on hover. Bars too narrow for any text stay empty. The tooltip keeps their data reachable. - example: ```jsx ; ``` ## Common Use Case Examples ### Statistics card - description: Place the chart in a card with a title and a time range to compare sources of income, traffic or orders on a dashboard. - example: ```jsx ; ```