tremorlabs / tremor

React components to build charts and dashboards

Home Page:https://tremor.so

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Feature]: Custom `CategoryBar` labels

choutianxius opened this issue · comments

What problem does this feature solve?

Enable the usage of custom category bar label texts, instead of just percentage values.

For example, the following component

<CategoryBar
  className='mt-4'
  values={[25, 25, 25, 25]}
  colors={['sky', 'lime', 'orange', 'rose']}
  markerValue={36}
  labels={[12.5, 15, 17.5, 20, 22.5]} // suppose this new property is added
/>

may display
image

What does the proposed API look like?

Usage:

<CategoryBar
  className='mt-4'
  values={[25, 25, 25, 25]}
  colors={['sky', 'lime', 'orange', 'rose']}
  markerValue={36}
  labels={[12.5, 15, 17.5, 20, 22.5]} // suppose this new property is added
/>

Where the type of labels could be specified with

type LabelType = null | string | number; // null indicates the label should always be omitted from displaying
type LabelsType = LabelType[];

Also, the condition values.length === labels.length - 1 might be forced