project-github-tracker/code/chart.js at main · Dorothea-B/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
50
51
52
const counterDiv = document.querySelector('projectCounter');


Chart.defaults.font.family = 'Miriam Libre, sans-serif';
Chart.defaults.font.size = 12;

const drawCounter = (finishedProjects) => {

  counterDiv.innerHTML += `Finished projects: ${finishedProjects} <br> Projects to go: ${19-finishedProjects}`

}

//DOM-selector for the canvas 👇
const ctx = document.getElementById('chart').getContext('2d')

//"Draw" the chart here 👇
const drawChart = (finishedProjects) => {


  const data = {
    labels: ['Finished','Unfinished'],
    datasets: [{
      label: 'My First dataset',
      backgroundColor: [
        '#211d31d2',
                         '#FFFFFF',
                         ],

      borderWidth: '0',
      data: [finishedProjects, 19-finishedProjects],
    }]
  };

  const config = {
    type: 'pie',
  data: data,
  options: {
      plugins: {

        legend: {
        display: false
        },
    },
    responsive: true,

    }

  };

  const myChart = new Chart( ctx, config );

}