https://github.com/taenykim/interactive-chart

📈 📉 push datas and make interactive chart 📊
https://github.com/taenykim/interactive-chart

canvas chart interactive javascript line-chart pie-chart svg

Last synced: 4 months ago
JSON representation

📈 📉 push datas and make interactive chart 📊

• Host: GitHub
• URL: https://github.com/taenykim/interactive-chart
• Owner: taenykim
• License: mit
• Created: 2020-10-07T07:52:01.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-10-22T09:03:40.000Z (almost 5 years ago)
• Last Synced: 2025-06-04T06:52:49.654Z (4 months ago)
• Topics: canvas, chart, interactive, javascript, line-chart, pie-chart, svg
• Language: TypeScript
• Homepage: https://interactive-chart.vercel.app
• Size: 1010 KB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Interactive Chart

![npm](https://img.shields.io/npm/v/interactive-chart)

![dependencies](https://img.shields.io/badge/dependencies-none-brightengreen)

📈 📉 push datas and make interactive chart 📊

## Demo

https://interactive-chart.vercel.app/

## Charts

|Line Chart `canvas`|Pie Chart `svg`|

|--|--|

|![](./images/screenshot.png)|![](./images/screenshot2.png)|

| drag / move / resize / minimap / tooltip | hovering / highlighting / information circle|

## How to use

```bash

npm i interactive-chart

```

```js

// Line Chart

new Line({

  selector: "root", // DOM element id,

  chartTitle: "Accountbook Line Chart", // chart title

  data, // chart data

});

// Pie Chart

new Pie({

  selector: "root", // DOM element id,

  chartTitle: "Accountbook Line Chart", // chart title

  data, // chart data

  offsetMonth: 11 // current focusing month

});

```

```json

// data type

[

  {

    "month": 11,

    "data": [

      {

        "date": 1,

        "data": [

          { "type": "용돈", "amount": 3000 },

          { "type": "생활", "amount": -30000 },

          { "type": "쇼핑/뷰티", "amount": -10000 }

        ]

      },

      {

        "date": 2,

        "data": [

          { "type": "생활", "amount": -30000 },

          { "type": "식비", "amount": -50000 },

          { "type": "월급", "amount": 5000 }

        ]

      },

      ...

```