12.9.1
A key used to compare the variables and their value in any given graph.
<% labels = %W[Windows Doors Roofing Siding Solar Gutters Insulation Other] %> <% (0..7).each do |n, i| %> <%= pb_rails("legend", props: { color: "data_#{n + 1}", text: "#{labels[n]}" }) %> <% end %>
<%= pb_rails("legend", props: { color: "data_3", prefix_text: "10", text: "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.
<%= pb_rails("legend", props: { color: "data_8", text: "Windows" }) %> <%= pb_rails("legend", props: { color: "warning", text: "Windows" }) %> <%= pb_rails("legend", props: { color: "windows", text: "Windows" }) %> <%= pb_rails("legend", props: { color: "category_7", text: "Windows" }) %>
The color prop also allows for use of custom colors passed in as HEX codes.
<%= pb_rails("legend", props: { color: "#dc418a", text: "Windows" }) %> <%= pb_rails("legend", props: { color: "#3ef0b8", text: "Windows" }) %> <%= pb_rails("legend", props: { color: "#ab8b04", text: "Windows" }) %>
Do not use as bullet points in a list.