Charts Component

Chart components for visualizing data in various formats, including line charts, bar charts, and more.

Features

• 🎯 TypeScript support with full type definitions

Installation

npm install @phila/phila-ui-charts
# or
yarn add @phila/phila-ui-charts
# or
pnpm add @phila/phila-ui-charts

Usage

<script setup lang="ts">
import { LineChart } from "@phila/phila-ui-charts";
const data = computed(()=>{
    if (fetchedData.value) {
        return fetchedData.value.map(item => ({
            x: item.date,
            y: item.value
        }));
    }
    return [];
})

const levelAreas = [
            {
                level: 11,
                color: '#FFFFE4',
                label: 'Action 11ft'
            },
            {
                level: 12.5,
                color: '#FFF6E2',
                label: 'Moderate 12.5ft'
            },
            {
                level: 14,
                color: '#FFE9E2',
                label: 'Major 14ft'
            },
        ];

</script>

<template>
  <LineChart :data="data" :level-areas="levelAreas" />
</template>

Development

Install Dependencies

pnpm install

Run Demo

pnpm dev

Build Library

pnpm build

Type Check

pnpm type-check

License

MIT