Labelled pie charts not showing up

1

Is this plugin available through the free API? Whenever I create a chart all the labels are missing and only the pie chart shows.

	const chart = new QuickChart();
	chart.setConfig({
		'type': 'outlabeledPie',
		'data': {
			'labels': labels,
			'datasets': [{
				'backgroundColor': backgroundColor,
				'data': data,
			}],
		},
		'options': {
			'plugins': {
				'legend': false,
				'outlabels': {
					'text': '%l %p',
					'color': 'black',
					'stretch': 35,
					'font': {
						'resizable': true,
						'minSize': 12,
						'maxSize': 18,
					},
				},
			},
		},
	});

Here is what it looks like: https://quickchart.io/chart/render/sf-15d8fa52-2c48-4e80-b213-3f1532319536

2

Hi @hankered,

The Chart.js outlabels plugin is unfortunately sensitive to the size and DPI of the canvas. If the labels are not showing up, that’s because it can’t quite fit the labels in your chart’s dimensions.

The default size of the web sandbox image is 500x300 and the devicePixelRatio is 2.0. If you set devicePixelRatio to 2.0 and/or if you increase the size of the image in your request, it will likely be able to fit the outlabels. You might have to play around with it a bit.

1 Like