Simple Chart

A basic vertical bar chart component that displays 6 bars with different colors. The first bar is green, the last two are red, and the middle ones are yellow.

Example Usage

Example

Inside flex-container

Flex Item 1

Flex Item 2

<template>
  <div>
    <sk-simple-chart class="h-[6em]" :values="chartValues" />

    <p>Inside flex-container</p>
    <div class="flex-container flex items-center gap-l bg-background p-m rounded-md">
      <div class="flex-item">Flex Item 1</div>
      <div class="flex-item h-[5em]">Flex Item 2</div>
      <sk-simple-chart :values="chartValues" />
    </div>
    <div class="mt-m">
      <button class="p-2 bg-gray-200 rounded" @click="randomizeValues">Randomize Values</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const chartValues = ref([75, 45, 60, 30, 20, 40]);

function randomizeValues() {
  chartValues.value = Array(6)
    .fill(0)
    .map(() => Math.floor(Math.random() * 100));
}
</script>

Reference

Properties

Name	Type	Default	Description
values	Array	required	Array of numbers representing the height of each bar

Slots

None