DirectionalValueMarkerConfig

A directional value marker works like ValueMarkerConfig but allows separate line and label styling depending on whether the tracked value is moving upward, downward, or is flat.

Example

{
  mode: 'last-visible',
  showLine: false,
  showLabel: true,
  up: {
    line: { color: '#10b981' },
    label: { backgroundColor: '#10b981', borderColor: '#10b981', color: 'white' }
  },
  down: {
    line: { color: '#ef4444' },
    label: { backgroundColor: '#ef4444', borderColor: '#ef4444', color: 'white' }
  },
  flat: {
    line: { color: '#1a1a1a' },
    label: { backgroundColor: '#1a1a1a', borderColor: '#1a1a1a', color: 'white' }
  }
}

Properties

mode

• Type: ValueMarkerMode
• Default: 'last-visible'

Determines which data point the marker tracks.

showLine

• Type: boolean
• Default: false

Whether to show the horizontal line for all directional variants. Can be overridden per direction via the line property on each directional config.

showLabel

• Type: boolean
• Default: true

Whether to show the value label for all directional variants. Can be overridden per direction via the label property on each directional config.

up

• Type: Omit<ValueMarkerConfig, 'mode'>

Line and label configuration applied when the value is moving upward.

down

• Type: Omit<ValueMarkerConfig, 'mode'>

Line and label configuration applied when the value is moving downward.

flat

• Type: Omit<ValueMarkerConfig, 'mode'>

Line and label configuration applied when the value is unchanged (flat).

TypeScript

interface DirectionalValueMarkerConfig {
  mode?: ValueMarkerMode;
  showLine?: boolean;
  showLabel?: boolean;
  up?: Omit<ValueMarkerConfig, 'mode'>;
  down?: Omit<ValueMarkerConfig, 'mode'>;
  flat?: Omit<ValueMarkerConfig, 'mode'>;
}