project-github-tracker/code/chart.js at main · kolkri/project-github-tracker · 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


//"Draw" the chart here 👇
const drawChart = (amount) => {
  //DOM-selector for the canvas 👇
const ctx = document.getElementById("chart").getContext("2d");
  //font for chart
  Chart.defaults.font.family = 'Syne Mono, monospace';
  Chart.defaults.font.weight = 'bold';
  Chart.defaults.color = '#fff';
  const config = {
    type: "doughnut",
    data: {
      labels: ["Projects done", "All projects"],
      datasets: [
        {
          label: "My Technigo projects",
          data: [amount, 19 - amount],
          backgroundColor: ["rgba(241, 187, 75,0.6)", "rgba(90, 112, 55, 0.1)"],
          trans: 0.6,
          hoverOffset: 4,
        },
      ],
    },
    options: {
      plugins: {
          legend: {
              position: 'bottom',
              labels: {
                  font: {
                      size: 16,
                  },
              }
          },
      }
  }


}


  const projectsChart = new Chart(ctx, config);
};