<% data = [ { name: 'Name', value: 45, } ]%> <%= pb_rails("gauge", props: { id: "gauge-default", chart_data: data, }) %>
<% data = [ { name: 'Participants', value: 84, } ]%> <%= pb_rails("gauge", props: { id: "gauge-disable-animation", chart_data: data, disable_animation: true, }) %>
<% data = [ { name: 'Score', value: 780, } ]%> <%= pb_rails("gauge", props: { id: "gauge-title", chart_data: data, min: 300, max: 850, title: "Credit Score", }) %>
<% data1 = [ { name: 'Data Used', value: 32, } ]%> <%= pb_rails("gauge", props: { id: "gauge-units1", chart_data: data1, title: "Data Usage", suffix: "GB" }) %> <% data2 = [ { name: 'Sales to Date', value: 65, } ]%> <%= pb_rails("gauge", props: { id: "gauge-units2", chart_data: data2, title: "Sales Goal", prefix: "$", suffix: "k", }) %>
<% data = [ { name: 'Capacity', value: 75, } ]%> <%= pb_rails("gauge", props: { id: "full-circle", chart_data: data, full_circle: true, title: "Seating Capacity", suffix: "%" }) %>
<% data = [ { name: 'Rating', value: 4.5, } ]%> <%= pb_rails("gauge", props: { id: "gauge-min-max", chart_data: data, min: 0, max: 5, show_labels: true, title: "Product Rating" }) %>
overflow
to hidden on the parent element when nesting gauges inside of a flex items to best respond to shrinking screens.<%= pb_rails("flex", props: {wrap: true}) do %> <%= pb_rails("flex/flex_item", props: {fixed_size: "400px", overflow: "hidden", shrink: true }) do %> <%= pb_rails("gauge", props: { id: "gauge-sizing4", chart_data: [{ name: "Point 1", value: 100 }], }) %> <% end %> <%= pb_rails("flex/flex_item", props: {fixed_size: "300px", overflow: "hidden", shrink: true }) do %> <%= pb_rails("gauge", props: { id: "gauge-sizing3", chart_data: [{ name: "Point 2", value: 75 }], }) %> <% end %> <%= pb_rails("flex/flex_item", props: {fixed_size: "200px", overflow: "hidden", shrink: true }) do %> <%= pb_rails("gauge", props: { id: "gauge-sizing2", chart_data: [{ name: "Point 3", value: 50 }], }) %> <% end %> <%= pb_rails("flex/flex_item", props: {fixed_size: "125px", overflow: "hidden", shrink: true }) do %> <%= pb_rails("gauge", props: { id: "gauge-sizing1", chart_data: [{ name: "Point 4", value: 25 }], }) %> <% end %> <% end %>
<%= pb_rails("gauge", props: { id: "gauge-height-px", chart_data: [{ name: "Pixels", value: 400 }], height: '400', title: "Fixed Height in Pixels", suffix: "px" }) %> <%= pb_rails("gauge", props: { id: "gauge-height-percent", chart_data: [{ name: "Percentage", value: 45 }], height: '45%', title: "Height as Percentage of Width", suffix: "%" }) %>
Custom data colors allow for color customization to match the needs of business requirements.
Pass the prop colors
and use ONE desired value data-1 | data-2 | data-3 | data-4 | data-5 | data-6 | data-7 | data-8
in an array. Hex colors are also available eg: #CA0095
<% data = [ { name: 'Name', value: 67, } ]%> <%= pb_rails("gauge", props: { id: "gauge-colors", chart_data: data, colors: ['data-7'] }) %>