Analytics

<Chart
  name="Chart name"
  :labels="['array', 'of', 'labels', 'for', 'x-axis', 'typically', 'dates']"
  :data="[
      {
        name: 'Spirit',
        data: ['array', 'of', 'data', 'equal', 'length', 'to', 'x-axis'],
      },
      ...
    ]"
  :colors="['array', 'of', 'colors', 'for', 'each', 'series/dataset']"
  prefix="string or svg icon to append to each data point"
  suffix="string or svg icon to append to each data point"
  type="bar|line"
  :stacked="true|false (default: false) (determines whether or not values overlap/sidebyside instead of stacked)"
  :hideTotal="true|false (default: false) (hide total value in tooltip)"
  :hideToolbar="true|false (default: false) (hide toolbar)"
  :hideLegend="true|false (default: false) (hide legend)"
>
  ... slot for title stuff
  <template #toolbar>
    ... slot for toolbar stuff
  </template>
</Chart>

<CompactChart
  title="Chart title"
  value="Chart value"
  :labels="['array', 'of', 'labels', 'for', 'x-axis', 'typically', 'dates']"
  :data="[
      {
        name: 'Spirit',
        data: ['array', 'of', 'data', 'equal', 'length', 'to', 'x-axis'],
      },
      ...
  ]"
  prefix="string or svg icon to append to each data point"
  suffix="string or svg icon to append to each data point"
/>