12.9.1

Legend

A key used to compare the variables and their value in any given graph.

Default

Windows
Doors
Roofing
Siding
Solar
Gutters
Insulation
Other

With Prefix Text

10 Windows

Colors

Windows
Windows
Windows
Windows

By default legend kit uses data_1 color.
Pass the color prop and use any desired value from $data_colors, $status_colors, $product_colors and $category_colors list.

Custom Colors

Windows
Windows
Windows

The color prop also allows for use of custom colors passed in as HEX codes.


Things to Avoid

Do not use as bullet points in a list.

UI Samples using Legend Kit

Get the full picture. See how this kit is used in our samples.

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
  • number_spacing
  • shadow
  • line_height
  • display
  • cursor
  • flex_direction
  • flex_wrap
  • justify_content
  • justify_self
  • align_items
  • align_content
  • align_self
  • flex
  • flex_grow
  • flex_shrink
  • order
  • id
  • data
  • aria
  • children
  • color
  • prefix_text
  • text