[Question/Help] Resizing a pie chart

[BelugaWhale]

Hello, I am using code like this:

const chartData = { 
    type: 'pie', 
    width: 40,
    height: 40,
    data: { 
        labels: categories, 
        datasets: [{ 
            data: durations, 
            backgroundColor: backgroundColors, 
            borderColor: borderColors,
            borderWidth: 1
        }]
    }
};

window.renderChart(chartData, this.container);

The problem is just that it is too big! I have tried adjusting width and height as suggested in the documentation but no luck. https://charts.phibr0.de/Meta/Charts/Modifiers Could anyone help me with this?

[kevsturman]

Had some success constraining the charts height by:

1. Using responsive: true and maintainAspectRatio: false in the chart options.
2. Rendering the chart in a div inside the container with a fixed height

eg.

const chartData = { 
    type: 'pie', 
    options: {
        // options needed to keep chart sized inside container
        responsive: true, 
        maintainAspectRatio: false, 
        },
    width: 40,
    data: { 
        labels: categories, 
        datasets: [{ 
            data: durations, 
            backgroundColor: backgroundColors, 
            borderColor: borderColors,
            borderWidth: 1
        }]
    }
};

// Create a chart container div with a fixed height
dv.el("div", `<div class="chartView" style="height:150px"></div>`)
// render chart in chart container
window.renderChart(chartData, this.container.find(".chartView"))