Vertical Bar Chart

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

Component render

<VerticalBarChart
  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
    }
  ]}
  width={500}
/>

Properties

Property	Type	Description
data	BarsDataItem[]	Required. The data to display in the chart.
height	number	Default: 300. The height of the bar chart. This is required because the chart is a vertical bar chart, and the height needs to be known ahead of time in order to calculate the height of the chart. If not set, the chart will default to a height applicable to that placement you are in.
width	number	Sets the width of the chart.
enableLegend	boolean	Defaults to false. Will auto-generate a legend for you below the chart.