Chart Summary

Chart summaries are used primarily in React-based Recharts diagrams to display summary information with Sage type styling.

React Component

Default

New today 6,452 current

Sage Component

SageChartSummary

<h3>Default</h3>
<%= sage_component SageCard, {
  css_classes: "sage-chart-container",
  html_attributes: {
    style: "width: 200px; height: 200px",
  }
} do %>
  <%= sage_component SageChartSummary, {
    caption: 'current',
    centered: true,
    chart_type: 'donut',
    label: 'New today',
    value: '6,452',
  } %>
<% end %>

Property	Description	Type	Default
`caption`	Caption to display below the value	String	`nil`
`centered`	Whether or not to center the summary within the current space (assumes this is within a `sage-chart-container`).	Boolean	`true`
`chart_type`	Customizations for a given chart type	`"donut"`	`nil`
`label`	Label to display above the value	String	`nil`
`value` required	Core value to display in the middle	String	`nil`

Don't