https://github.com/obetomuniz/chrts

Minimalist charts as Web Components using SVG, CSS, and TypeScript
https://github.com/obetomuniz/chrts

charts svg typescript webcomponents

Last synced: about 1 month ago
JSON representation

Minimalist charts as Web Components using SVG, CSS, and TypeScript

• Host: GitHub
• URL: https://github.com/obetomuniz/chrts
• Owner: obetomuniz
• License: other
• Created: 2023-04-03T02:53:54.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-04-03T20:20:08.000Z (over 1 year ago)
• Last Synced: 2024-04-14T05:17:49.970Z (7 months ago)
• Topics: charts, svg, typescript, webcomponents
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/chrts
• Size: 162 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# chrts

Minimalist charts as Web Components using SVG, CSS, and TypeScript.



## Installation

```bash

npm install chrts

```

## Usage

First, import the library in your JavaScript or TypeScript file:

```typescript

import { ChrtsPie, ChrtsBars, ChrtsSegment } from "chrts"

```

Then, use the components in your HTML:

### Pie Chart

```html

  

  

```

### Bar Chart

```html

  

  

```

Each chart component uses the `` child component to define its data segments. The `` component has three attributes:

- `color`: The color of the segment.

- `label`: The label of the segment.

- `value`: The numerical value of the segment.