Skip to content

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

License

Notifications You must be signed in to change notification settings

obetomuniz/chrts

Repository files navigation

chrts

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

Screenshot 2023-04-03 at 01 08 53

Installation

npm install chrts

Usage

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

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

Then, use the components in your HTML:

Pie Chart

<chrts-pie>
  <chrts-segment color="red" label="Red" value="120"></chrts-segment>
  <chrts-segment color="blue" label="Blue" value="80"></chrts-segment>
</chrts-pie>

Bar Chart

<chrts-bars>
  <chrts-segment color="green" label="Green" value="50"></chrts-segment>
  <chrts-segment color="purple" label="Purple" value="100"></chrts-segment>
</chrts-bars>

Each chart component uses the <chrts-segment> child component to define its data segments. The <chrts-segment> component has three attributes:

  • color: The color of the segment.
  • label: The label of the segment.
  • value: The numerical value of the segment.