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

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

• [x] UMD module

Pie Chart

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

Line Chart

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

License

MIT License (c) jhaemin