webアプリ版の簡単なお小遣い帳の問題『javascript』

現在、お小遣い帳みたいなものをjavascriptで製作しようとしています。
そこで質問なのですが、現在画像のように足すボタンを押すとグラフに色が同じ要素が追加されますので異なる色になるようにしたいです。
また、いつ貰ったかや誰から貰ったかなどが分かるものを足すボタンを押すと同時に入力し、グラフの要素の下に表示できるようにしたいです。ご教授お願い致します。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>aiueo</title>
8    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
9    <link rel="stylesheet" href="style.css">
10
11</head>
12
13<body>
14 
15    <div id="app">
16
17       
18    <div class="col">
19               <h2>お小遣い</h2>
20    </div>
21
22   
23        <div class="container-fluid">
24            <div class="row">
25                <div class="col-12 col-md-6">
26
27               
28                    <div v-for="(item,index) in datasets" :key="index" class="row py-2">
29                        <div class="col-3">
30                            <input type="number" class="form-control" v-model.number="datasets[index]">
31                        </div>    <font size="5" color="000000">円</font>
32                        <div class="col">
33                            <input type="range" class="form-control" min="0" max="999999"
34                                v-model.number="datasets[index]">
35                        </div>    
36                        <div class="col-auto">
37                            <button class="btn btn-primary" v-on:click="add(index)">足す</button>
38                            <button class="btn btn-secondary" v-on:click="del(index)"
39                                :disabled="datasets.length < 2">消す</button>
40                        </div>
41                    </div>
42                    
43                </div>
44                <div class="col-12 col-md-6">
45
46
47                    <div class="col-12">
48                        <div class="row">
49
50
51                        </div>
52                        <div>
53                            <canvas id="charts"></canvas>
54
55                        </div>
56
57                    </div>
58                </div>
59            </div>
60
61
62
63        </div>
64    </div>
65
66<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.bundle.min.js"></script>
67    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
68    <script src="script.js"></script>
69    
70
71</body>
72
73</html>

JAVASCRIPT
1
2
3new Vue({
4    el: '#app',
5    data: {
6        datasets: [
7            9999,9999
8        ],
9
10        graphSelected: 'pie'
11    },
12    watch: {
13        datasets: {
14            handler() {
15                this.canvas.data.datasets[0].data = this.datasets;
16                this.canvas.data.labels = Array(this.datasets.length).fill('');
17                this.canvas.update();
18            }
19        },
20        graphSelected: {
21            handler() {
22                this.canvas.destroy();
23                this.chart();
24            }
25        }
26
27    },
28    mounted() {
29        this.chart();
30    },
31    methods: {
32        toRaw(data) {
33            return JSON.stringify(data);
34        },
35        add(i) {
36            this.datasets.splice(i, 0, this.datasets[i]);
37            
38        },
39        del(i) {
40            if (this.datasets.length > 1) {
41                this.datasets.splice(i, 1);
42            }
43        },
44        chart() {
45            var vm = this;
46            var ctx = document.getElementById("charts");
47            vm.canvas = new Chart(ctx, {
48                type: vm.graphSelected,
49
50                data: {
51                    labels: Array(vm.datasets.length).fill(''),
52                    datasets: [{
53                        label: 'グラフ',
54                        backgroundColor: '#20B2AA',
55                        data: vm.datasets
56                    }]
57                }
58            });
59
60
61        },
62    }
63})
64