<button type="button" class="btn btn-primary" data-toggle="modal"
        data-target="#graph">
    Graph
</button>

<div class="modal fade" id="graph" tabindex="-1" role="dialog"
     aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h1>Misses</h1>
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <script src="node_modules/chart.js/dist/Chart.js"></script>
                <canvas id="myChart" style="width: 20%; height: 50vh"></canvas>

                <script>
                    var ctx = document.getElementById('myChart');
                    ctx.style.backgroundColor = 'rgb(0,0,0)';
                    ctx.height = 100;
                    var myPieChart = new Chart(ctx, {
                        type: 'pie',
                        data: {
                            labels: ['Self flash', 'Aim', 'Rush', 'Solo', 'Spray control'],
                            datasets: [{
                                label: '# of Votes',
                                data: [
                                    1,
                                    19,
                                    3,
                                    5,
                                    2
                                ],
                                backgroundColor: [
                                    'rgba(255, 99, 132, 0.2)',
                                    'rgba(54, 162, 235, 0.2)',
                                    'rgba(255, 206, 86, 0.2)',
                                    'rgba(75, 192, 192, 0.2)',
                                    'rgba(153, 102, 255, 0.2)'
                                ],
                                borderColor: [
                                    'rgba(255, 99, 132, 1)',
                                    'rgba(54, 162, 235, 1)',
                                    'rgba(255, 206, 86, 1)',
                                    'rgba(75, 192, 192, 1)',
                                    'rgba(153, 102, 255, 1)'
                                ],
                                borderWidth: 1
                            }]
                        },
                        options: {
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        display: false
                                    }
                                }]
                            }
                        }
                    });

                </script>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    Close
                </button>
            </div>
        </div>
    </div>
    <br><br>