Theme:
SCSS TypeScript TypeScript

Performance Bar

This component shows the change of a course value in different ways. Each chart variant uses a different display method for this. To do this, certain data attributes must be set for each chart. See the respective chart variants.

Each chart can has the following modifier:

  • .performance-bar--small The chart becomes smaller.

Default

This chart describes the positive or negative changes of an instrument in percentage values (0%-100%).

The following data attributes must be set for this chart variant:

  • [data-sg-performance-bar-value] - The value must be specified as a percentage between 0 n and 100. It can be negative.

In addition, this chart has a special modifier:

  • .performance-bar--show-values With this modifier the value of the data attribute can be displayed.
Theme basic Screen size XL
html

Time

This chart describes a course of an instrument over a period of time. The axis starts at the low of the period (min-value) and ends at the high of the period (max-value). The marking corresponds to the current market value (curr-value). The red or green line shows the distance between the current price and the opening price (start-value).

The following data attributes must be set for this chart variant:

  • data-sg-performance-bar-min-value="10" This value should be fixed
  • data-sg-performance-bar-max-value="20" This value should be fixed
  • data-sg-performance-bar-curr-value="13" This value can be variable and can also change at runtime (e.g. through a push method)
  • data-sg-performance-bar-start-value="14" This value should be fixed
Theme basic Screen size XL
html

Average

This chart describes a price over a period of time and its performance over that period of an instrument. The axis starts at the low of the period (min-value) and ends at the high of the period (max-value). The marking corresponds to the current performance value of the instrument (perf-value).

The following data attributes must be set for this chart variant:

  • data-sg-performance-bar-min-value="10" This value should be fixed
  • data-sg-performance-bar-max-value="20" This value should be fixed
  • data-sg-performance-bar-perf-value="13" This value can be variable and can also change at runtime (e.g. through a push method)
Theme basic Screen size XL
html