List Chart

A list chart component, used on the Home Widgets page in the Square Dashboard.

Component render

Screenshot of the list chart Dashboard Add-Ons UI component

<ListChart
  data={[
    {
      formattedValue: '$175',
      key: 'Bills',
      label: 'Bills',
      value: 175
    },
    {
      formattedValue: '$250',
      key: 'Meals',
      label: 'Meals',
      value: 250
    },
    {
      formattedValue: '$1K',
      key: 'Other',
      label: 'Other',
      value: 1020
    },
    {
      formattedValue: '$4.5K',
      key: 'Payroll',
      label: 'Payroll',
      value: 4466
    },
    {
      formattedValue: '$1.5K',
      key: 'Personal',
      label: 'Personal',
      value: 1500
    },
    {
      formattedValue: '$800',
      key: 'Rent',
      label: 'Rent',
      value: 800
    }
  ]}
/>

Properties

Property Type Description
data BarsDataItem[] Required. The data to display in the chart.
order ascending | descending | none The sort order of the data to display in the chart.
domainType value | percentage Display the value or percentage of the data in the chart.