Stat Change

Displays the increase, decrease, or neutral change in data. Use when you want the user to see changes in statistical data. User understanding is increased when paired with label or textual context (i.e. Dashboard Value).

Default

28.4%

6.1%

102%

Code Example

<%= pb_rails("stat_change", props: {
  change: "increase",
  value: 28.4,
}) %>

<br>

<%= pb_rails("stat_change", props: {
  change: "decrease",
  value: 6.1
}) %>

<br>

<%= pb_rails("stat_change", props: {
  change: "neutral",
  value: 102
}) %>

Icon

28.4%

6.1%

102%

Code Example

<%= pb_rails("stat_change", props: {
  value: 28.4,
  icon: "chart-line",
}) %>

<br>

<%= pb_rails("stat_change", props: {
  value: 6.1,
  icon: "chart-line-down",
}) %>

<br>

<%= pb_rails("stat_change", props: {
  value: 102,
}) %>

Colors

28.4%

6.1%

102%

Increase colors your icon GREEN & Decrease colors your icon RED.

Code Example

<%= pb_rails("stat_change", props: {
  change: "increase",
  value: 28.4,
  icon: "level-up",
}) %>

<br>

<%= pb_rails("stat_change", props: {
  change: "decrease",
  value: 6.1,
  icon: "level-down",
}) %>

<br>

<%= pb_rails("stat_change", props: {
  change: "neutral",
  value: 102,
}) %>

Available Props

classname
dark
margin
margin_bottom
margin_left
margin_right
margin_top
margin_x
margin_y
max_width
padding
padding_bottom
padding_left
padding_right
padding_top
padding_x
padding_y
z_index
id
data
aria
children
change
icon
value