https://github.com/ileodo/budget-view-chart

📈 budget-view-chart is a React Chart component specialising in display budget for personal finance.
https://github.com/ileodo/budget-view-chart

budget-tracker budget-view-chart chart data-visualization escharts personal-finance react visualization

Last synced: 17 days ago
JSON representation

📈 budget-view-chart is a React Chart component specialising in display budget for personal finance.

• Host: GitHub
• URL: https://github.com/ileodo/budget-view-chart
• Owner: ileodo
• Created: 2023-03-25T00:47:08.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2025-11-14T20:23:28.000Z (3 months ago)
• Last Synced: 2025-12-03T12:27:39.301Z (2 months ago)
• Topics: budget-tracker, budget-view-chart, chart, data-visualization, escharts, personal-finance, react, visualization
• Language: TypeScript
• Homepage: https://ileodo.github.io/budget-view-chart/
• Size: 7.55 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# budget-view-chart

[![Deploy Github Page](https://github.com/ileodo/budget-view-chart/actions/workflows/static.yml/badge.svg)](https://github.com/ileodo/budget-view-chart/actions/workflows/static.yml)

![npm type definitions](https://img.shields.io/npm/types/budget-view-chart)

![NPM](https://img.shields.io/npm/l/budget-view-chart)

[![npm](https://img.shields.io/npm/v/budget-view-chart)](https://www.npmjs.com/package/budget-view-chart)

![npm](https://img.shields.io/npm/dw/budget-view-chart)



A react Chart component specialising in display budget for personal finance.

> This component is built based on [echarts](https://echarts.apache.org/en/index.html).

[![Demo Button Icon]][Demo Link]

[Demo Link]: https://ileodo.github.io/budget-view-chart/

[Demo Button Icon]: https://img.shields.io/badge/Demo-EF2D?style=for-the-badge&logoColor=white



## Get Started

```bash

npm install budget-view-chart

```

```react

```

Example `dataset` can be find in [demo/src/data/](demo/src/data/)

## Visualisation

Breakdown View



Highlight on Budget Item



Highlight on Spending in a Whole Month



Highlight on Spending



Negative Spending (Income)



Aggregate View



Over Spending



Current Line



## Contribution

All contributions are welcomed, especially the following aspects:

- Standardise the repo

- Standardise the build/test/linting process

- Support custom styling

- Performance improvements