woowahan-chart

A simple Pie Chart Generator implemented with CSS and Shadow DOM

Usage no npm install needed!

<script type="module">
  import woowahanChart from 'https://cdn.skypack.dev/woowahan-chart';
</script>

README

🚨 'woowahan-pie' is now deprecated. Use 'woowahan-chart' instead.

Woowahan Chart

A simple HTML chart generator that helps you easily create simple yet elegant HTML charts just in a second.

This library aims to intentionally leverage the power of CSS and DOM API provided by the browsers natively.

v2 migration guide

The exported name Pie has been changed to PieChart since v2.

> npm uninstall woowahan-pie
> npm install woowahan-chart

// v1
import { Pie } from 'woowahan-pie'

// v2
import { PieChart } from 'woowahan-chart'

ES

With package managers

> npm install woowahan-chart

or

> yarn add woowahan-chart

then

import { PieChart, LineChart } from 'woowahan-chart'

With browser ES module

<script src="script.js" type="module"></script>

import {
  PieChart,
  LineChart,
} from 'https://unpkg.com/woowahan-chart@latest/lib/index.js'

UMD

<script
  src="https://unpkg.com/woowahan-chart@latest/lib/index.min.js"
  crossorigin
></script>

const { PieChart, LineChart } = window.woowahanChart

Pie Chart

Usage (example above)

PieChart({
  target: '.pie-container',
  segments: [
    { percent: 65, color: '#05a790', legend: 'Water [%]' },
    { percent: 16, color: '#13c1a9', legend: 'Protein [%]' },
    { percent: 14, color: '#27dac1', legend: 'Fat [%]' },
    { percent: 5, color: '#3dead2', legend: 'Mineral [%]' },
  ],
})

PieChart(PieOptions)

The Pie function accepts pie options then returns a pie instance.

Options

target

A target element for a pie chart to be mounted. You can just give a selector string.

const pieContainer = document.querySelector('.pie-container')

Pie({
  target: pieContainer,
})

or

Pie({
  target: '.pie-container',
})

size?

(Optional) The size of the pie. Any valid CSS size properties like px, em, rem, % are available including just a number which converts into pixels.

Pie({
  size: '400px',
})

Pie({
  size: '10vw',
})

Pie({
  size: 200, // Same as '200px'
})

segments

An array of pie segments defined by some segment options.

Key Type Description
percent number The proportion of a segmentation. Max is 100.
color string The color of the segment in hexadecimal, rgba() or any color values accepted by CSS rules.
legend? string (Optional) The name or label of the segment. Use [%] inside a legend as a placeholder of the percentage.

Line Chart

Usage (example above)

LineChart({
  target: '.line-chart-container',
  maxY: 30000,
  intervalY: 5000,
  data: [
    {
      x: '6/1',
      y: 10000,
    },
    {
      x: '6/2',
      y: 0,
    },
    {
      x: '6/3',
      y: 5000,
    },
    {
      x: '6/4',
      y: 20000,
    },
    {
      x: '6/5',
      y: 15000,
    },
    {
      x: '6/6',
      y: 17000,
    },
    {
      x: '6/7',
      y: 30000,
    },
  ],
})

Options

target

Same as PieChart, it accepts both selector string or DOM.

maxY, intervalY

maxY for the max value for Y axis, and intervalY for the lines.

maxY should be divided by intervalY exactly without remainder.

data

An array of points data with x, y values.

Property Type
x string
y number

To Do

Common

  • UMD module

Pie Chart

  • Custom size
  • Display legend on hover (add an option)

Line Chart

  • Implementation
  • Animation on load
  • Manipulate (add, remove, edit) points dynamically

License

MIT License (c) jhaemin