为什么我无法更改c3饼图的大小和位置？

Question

您可以看到js脚本中有多个实例，在这些实例中，我尝试更改饼图的大小。在脚本中更改高度和宽度完全不会影响饼图的大小，而这几乎占据了整个屏幕。

<script>
var config = {
    type: 'pie',
        size: {
            height: 340,
            width: 480
        },
    data: {
        datasets: [{
            data: [
            {% for stgexe in stage_execs %}
                {{stgexe.duration_seconds }} / 60,
            {% endfor %}
            ],
            backgroundColor: [
                window.chartColors.red,
                window.chartColors.orange,
                window.chartColors.yellow,
                window.chartColors.green,
                window.chartColors.blue,
                window.chartColors.purple,
                window.chartColors.cyan,
            ],
            label: 'Stage Timing',
        }],
        labels: [
            {% for stgexe in stage_execs %}
                '{{stgexe.stage.name }}',
            {% endfor %}
        ]
    },
    options: {
        legend: {
            display: true,
          position: 'right',
            labels: {
                fontColor: '#333',
            },
          size: {
            height: 340,
            width: 480
        },
        }
    }
};

window.onload = function() {
    var ctx = document.getElementById('chart-area').getContext('2d');
    window.myPie = new Chart(ctx, config);
};
</script>


<canvas id="chart-area" style="background: #80808014; padding: 15px; display: inherit; height: 300px; width: auto"></canvas>

如何更改图表的大小？