obsidian-charts
obsidian-charts copied to clipboard
[Question/Help] Resizing a pie chart
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?
Had some success constraining the charts height by:
- Using
responsive: trueandmaintainAspectRatio: falsein the chart options. - 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"))