// Some code
<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  const myChart = new Chart(
    document.getElementById('myChart'),
    {
    type: 'line',
    data: {
      labels: [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
      ],
      datasets: [{
        label: 'My First dataset',
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: [0, 10, 5, 2, 20, 30, 45],
      }]
    },
    options: {}
  }
  );
</script>

fetch('./data.json')
            .then(response => response.json())
            .then(dataJson => {
            
            })
.catch(error => console.error('Erreur lors du chargement des données JSON:', error));

<script src="assets/js/graphiques.js" defer type="module"></script>

{
    "mmi1": {
        "h":73,
        "f": 44
    },
    "mmi2": {
       "crea": {
            "h": 17,
            "f": 13
        },
        "comm": {
            "h": 11,
            "f": 4
        },
        "devFi": {
            "h": 18,
            "f": 7
        },
        "devFc": {
            "h": 74,
            "f": 28
        }
    }
}

fetch('./data.json')
            .then(response => response.json())
            .then(dataJson => {

        const chartGenreComm = new Chart(
            document.getElementById('chartGenreComm'),
            {
                type: 'pie',
                data: {
                    labels: [
                        'Homme',
                        'Femme'
                    ],
                    datasets: [{
                        label: 'Répartition des genres Parcours Communication',
                        backgroundColor: [
                            'rgb(255, 99, 132)',
                            'rgb(54, 162, 235)',
                        ],
                        hoverOffset: 4,
                        data: [dataJson.mmi2.comm.h, dataJson.mmi2.comm.f],
                    }]
                },
                options: {
                    plugins: {
                        title: {
                            text: 'Répartition des genres Parcours Communication',
                            display: true
                        }
                    }
                }
            }
        );
        })
        .catch(error => console.error('Erreur lors du chargement des données JSON:', error));

const charte2 = new Chart(
            document.getElementById('charte2'),
            {
                type: 'bar',
                data: {
                    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                    datasets: [{
                        label: '# of Votes',
                        data: [12, 19, 3, 5, 2, 3],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            }
        );

        //un clic sur le bouton avec l'id bouton doit ajouter un élément au charte2
        document.getElementById('bouton').addEventListener('click', () => {
            charte2.data.labels.push('New');
            charte2.data.datasets[0].data.push(10);
            charte2.update();
        });

const myChart = new Chart(
  document.getElementById('myChart'),
  {
    type: 'line',
    data: {
      labels: ['1', '2', '3', '4', '5'],
      datasets: [{
        label: 'A',
        data: [100, 96, 84, 76, 69],
        fill: true,
      }]
    },
    options: {
      scales: {
        y: {
          min: 0,
          max: 100
        }
      }
    }
  }
);

const myChart = new Chart(
  document.getElementById('myChart'),
  {
    type: 'line',
    data: {
      labels: ['1', '2', '3', '4', '5'],
      datasets: [{
        label: 'A',
        yAxisID: 'A',
        data: [100, 96, 84, 76, 69],
        fill: true,
      }, {
        label: 'B',
        yAxisID: 'B',
        backgroundColor: 'rgb(122, 99, 255)',
        borderColor: 'rgba(102, 99, 255, 0.2)',
        data: [1, 1, 0.5, 1, 0],
        fill: false,
      }]
    },
    options: {
      scales: {
        A: {
          type: 'linear',
          position: 'left',
        },
        B: {
          type: 'linear',
          position: 'right',
          ticks: {
            max: 1,
            min: 0
          }
        }
      }
    }
  }
);

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js" defer></script>
    <script src="assets/js/demo3.js" defer></script>
</head>
<body>
    <canvas id="graph"></canvas>
    <div>
        <input type="checkbox" id="check1" value="A" data-color="rgb(120,123,21)" data-label="A" data-value="[1, 3, 4, 6]">A
        <input type="checkbox" id="check1" value="B" data-color="rgb(21,123,121)" data-label="B" data-value="[4, 2, 41, 12]">B
        <input type="checkbox" id="check1" value="C" data-color="rgb(20,13,21)" data-label="C" data-value="[2, 0, 9, 6]">C
        <input type="checkbox" id="check1" value="D" data-color="rgb(120,13,21)" data-label="D" data-value="[10, 3, 7, 1]">D
    </div>
</body>
</html>

const myChart = new Chart(
    document.getElementById('graph'),
    {
        type: 'line',
        data: {
            labels: ['1', '2', '3', '4'],
            datasets: []
        },
    }
);

document.querySelectorAll('input[type=checkbox]').forEach((e) => {
    e.addEventListener('click', (el) => {
        console.log('check')
        if (el.target.checked) {
            val = el.currentTarget.dataset.value.substring(1, el.currentTarget.dataset.value.length - 1).split(', ');
            obj = {
                label: el.currentTarget.dataset.label,
                data: val,
                fill: false,
                backgroundColor: el.currentTarget.dataset.color,
                borderColor: el.currentTarget.dataset.color,
            }
            myChart.data.datasets.push(obj);
            myChart.update()
        } else {
            myChart.data.datasets = myChart.data.datasets.filter((e) => e.label !== el.currentTarget.dataset.label)
            myChart.update()
        }
    })
})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .map-tooltip {
            position: absolute;
            text-align: center;
            z-index: 1000;
            color: black;
            width: 275px;
            height: 37px;
            padding: 2px;
            font: 12px sans-serif;
            background: grey;
            border: 0px;
            border-radius: 8px;
            pointer-events: none;
        }
    </style>
</head>

<body>
    <div id="map"></div>

    <script>
        const width = 550, height = 550;
        const path = d3.geoPath();
        const projection = d3.geoConicConformal()
            .center([2.454071, 46.279229])
            .scale(2600)
            .translate([width / 2, height / 2]);
        path.projection(projection);

        const svg = d3.select('#map').append("svg")
            .attr("id", "svg")
            .attr("width", width)
            .attr("height", height);

        const deps = svg.append("g");

        d3.json('assets/js/departments.json').then(function (geojson) {
            deps.selectAll("path")
                .data(geojson.features)
                .enter()
                .append("path")
                .attr('class', 'department')
                .attr("d", path)//récupère chaque path (chaque département), possible de changer la couleur de path avec un attribut sur le SVG
                .on("mouseover", function (event, d) {
                    console.log(d)//d contient les informations du département survolé
                    div.transition()
                        .duration(200)
                        .style("opacity", .9);
                    div.html("Département : " + d.properties.NOM_DEPT + "<br/>"
                        + "Région : " + d.properties.NOM_REGION)
                        .style("left", (event.pageX + 30) + "px")
                        .style("top", (event.pageY - 30) + "px")
                })
                .on("mouseout", function (event, d) {
                    div.style("opacity", 0);
                    div.html("")
                        .style("left", "-500px")
                        .style("top", "-500px");
                });
        });

        let div = d3.select("body").append("div")
            .attr("class", "map-tooltip")
            .style("opacity", 0);
    </script>
</body>

</html>