project-github-tracker/code/chart.js at main · sk-phan/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
49
//DOM-selector for the canvas 👇
const ctx = document.getElementById('chart').getContext('2d')

//"Draw" the chart here 👇

const updateChart = (projects) => {

    const labels = [
      ''
    ];

    const data = {
      labels: labels,
      datasets: [{
        label: `Done: ${projects}`,
        backgroundColor: ['#7365e5'],
        data: [projects],
      },
      {
        label: `Total: ${19}`,
        backgroundColor: [ '#D6CDE9'],
        data: [19-projects],
      }
    ]
    };

    const config = {
      type: 'bar',
      data: data,
      options: {
        barThickness: 30,
        maxBarThickness: 30,
        responsive: true,
        indexAxis: 'y',
        scales: {
          x: {
            stacked: true,
          },
          y: {
            stacked: true
          }
        }
      }
    };
    const myChart = new Chart(
      document.getElementById('chart'),
      config
    );
}