budget-view-chart

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

This component is built based on echarts.

Get Started

npm install budget-view-chart

<BudgetChart config={{
  showMonthEndLine: null,
  showAggregate: false,
  locale: 'en-GB',
  currency: 'GBP'}} value={dataset}/>

Example dataset can be find in 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