npm

chrts
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

chrts

A simple chart web components library 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.

Package Sidebar

Install

npm i chrts

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

13.1 kB

Total Files

17

Last publish

Collaborators

  • obetomuniz