OYNA

BarChart ​

A few values side by side. All bars are quiet; colour picks out the one to look at.

  • 1.42Mon
  • 1.18Tue
  • 2.31Wed
  • 1.27Thu
  • 0.96Fri
  • 1.51Sat
  • 1.33Sun
vue
<script setup lang="ts">
const week = [
  { label: 'Mon', value: 1.42, display: '1.42' },
  { label: 'Tue', value: 1.18, display: '1.18' },
  { label: 'Wed', value: 2.31, display: '2.31', tone: 'danger', dot: true },
  { label: 'Thu', value: 1.27, display: '1.27' },
  { label: 'Fri', value: 0.96, display: '0.96', tone: 'accent' },
  { label: 'Sat', value: 1.51, display: '1.51', dot: true },
  { label: 'Sun', value: 1.33, display: '1.33' },
]
</script>

<template>
  <OBarChart :items="week" />
</template>
  • tone colours one bar and its value: danger for the worst, accent for the best. Use it on one or two bars, or it stops meaning anything.
  • dot marks a bar where something happened — an error, a miss. Say what the dot means next to the chart.
  • display is the value as text. Bars are scaled to the highest value.

Many bars ​

With more than 12 bars the chart gets dense: thin bars, no text. The values stay in the hover titles.

Height and labels ​

The chart is 180px high; set --o-bar-chart-height to change it. The label slot replaces the text under a bar, for an icon or an avatar:

vue
<OBarChart :items="week" style="--o-bar-chart-height: 240px">
  <template #label="{ item }">
    <img :src="item.icon" :alt="item.label">
  </template>
</OBarChart>

Props ​

PropTypeDefaultDescription
items{ label: string, value: number, display?: string, tone?: 'accent' | 'danger', dot?: boolean }[]required