Django изменение размера графика в таблице

У меня есть базовый график, созданный с помощью chart.js, который впоследствии отображается в таблице. У меня есть проблема с манипуляцией его высотой/шириной, чтобы правильно подогнать его к таблице в шаблоне django. График отображается в цикле for в таблице и код выглядит следующим образом:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<table class="table table-bordered">
        <thead>Details
        </thead>
        <tbody>
        {% for key, value in game_details.items %}
            <tr>
                <th>Game</th>
                <th>Played</th>
                <th>Won</th>
                <th>Lost</th>
                <th>Pending</th>
            </tr>
            <tr>
                <td>Game </td>
                <td>{{ value.all }}</td>
                <td>{{ value.win }}</td>
                <td>{{ value.lost }}</td>
                <td>{{ value.pending }}</td>
            </tr>
            <tr>
                <td colspan="5" style="max-height: 10px">
                    <canvas id="myChart{{ key }}" width="200" height="200"></canvas>
                    <script>
                        const ctx{{ key }} = document.getElementById('myChart{{ key }}').getContext('2d');
                        const myChart{{ key }} = new Chart(ctx{{ key }}, {
                            type: 'doughnut',
                            data: {
                                labels: ['W', 'L', "P"],
                                datasets: [{
                                    label: '# of Votes',
                                    data: [{{ value.win }}, {{ value.lost }}, {{ value.pending }}],
                                    backgroundColor: [
                                        'rgba(255, 99, 132, 0.2)',
                                        'rgba(54, 162, 235, 0.2)',
                                        'rgba(153, 102, 255, 0.2)',
                                    ],
                                    borderColor: [
                                        'rgba(255, 99, 132, 1)',
                                        'rgba(54, 162, 235, 1)',
                                        'rgba(153, 102, 255, 1)',
                                    ],
                                    borderWidth: 1
                                }]
                            },
                            options: {
                                scales: {
                                    y: {
                                        beginAtZero: true
                                    }
                                }
                            }
                        });
                    </script>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

и это выглядит так:

Изменение ширины или высоты в элементе canvas не изменяет размер. Есть ли какое-нибудь решение, как я могу подогнать его к таблице, чтобы это выглядело более удобным для пользователя?

Вернуться на верх