DirectionalBarConfig

A directional bar config allows separate bar styling for upward, downward, and flat movements.

Example

{
  up: {
    backgroundColor: '#10b981',
    borderColor: '#10b981',
    width: 0.6,
    borderWidth: 0
  },
  down: {
    backgroundColor: '#ef4444',
    borderColor: '#ef4444',
    width: 0.6,
    borderWidth: 0
  },
  flat: {
    backgroundColor: '#10b981',
    borderColor: '#10b981',
    width: 0.6,
    borderWidth: 0
  }
}

Properties

up

• Type: BarConfig
• Default: { backgroundColor: '#10b981', borderColor: '#10b981', width: 0.6, borderWidth: 0 }

Bar configuration applied when the value is moving upward.

down

• Type: BarConfig
• Default: { backgroundColor: '#ef4444', borderColor: '#ef4444', width: 0.6, borderWidth: 0 }

Bar configuration applied when the value is moving downward.

flat

• Type: BarConfig
• Default: { backgroundColor: '#10b981', borderColor: '#10b981', width: 0.6, borderWidth: 0 }

Bar configuration applied when the value is unchanged (flat).

TypeScript

interface DirectionalBarConfig {
  up?: BarConfig;
  down?: BarConfig;
  flat?: BarConfig;
}