obsidian-charts icon indicating copy to clipboard operation
obsidian-charts copied to clipboard

[Question/Help] Resizing a pie chart

Open BelugaWhale opened this issue 2 years ago • 1 comments

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?

BelugaWhale avatar Oct 19 '23 14:10 BelugaWhale

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"))

kevsturman avatar Jul 23 '24 07:07 kevsturman