dashboard/script.js at main · Coding-EG/dashboard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
function changeTab(event, tabName) {
  event.preventDefault();
  const tabs = document.querySelectorAll(".tab");
  tabs.forEach((tab) => {
    if (tab.classList.contains("active")) {
      tab.classList.remove("active");
    }
  });
  document
    .querySelector(`[onclick="changeTab(event,'${tabName}')"]`)
    .classList.add("active");
}

const xValues = [20, 25, 30, 35, 40, 45, 50, 55, 60, 65];
const yValues = [55, 49, 44, 24, 15];
const barColors = ["red", "green", "blue", "orange", "brown"];

new Chart("bar-data", {
  type: "bar",
  data: {
    labels: xValues,
    datasets: [
      {
        label: "Employer: K73,500",
        data: yValues,
        backgroundColor: "#0800a3",
        stack: "Stack 0",
      },
      {
        label: "Employee: K52,500",
        data: yValues,
        backgroundColor: "#4935ff",
        stack: "Stack 0",
      },
      {
        label: "Total Interest: K244,313",
        data: yValues,
        backgroundColor: "#85afff",
        stack: "Stack 0",
      },
    ],
  },
  options: {
    plugins: {
      title: {
        display: true,
        text: "Contributions Overtime",
      },
    },
    responsive: true,
    interaction: {
      intersect: false,
    },
    scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true,
        ticks: {
          callback: function (value) {
            return `$${value}`;
          },
        },
      },
    },
  },
});