Pie chart looks weird

This is what I get when trying to get a pie chart. The code:

var chartJsOptions = {
  type: 'pie',
  data: {
    datasets: [
      {
        data: [10, 10, 20, 30, 40],
        backgroundColor: ['red', 'orange', 'yellow', 'green', 'blue'],
        label: 'Dataset 1'
      }
    ],
    labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue']
  },
  options: {}
};

var chartNode = new ChartjsNode(800, 600);
return chartNode
  .drawChart(chartJsOptions)
  .then(() => {
    // chart is created

    // get image as png buffer
    return chartNode.getImageBuffer('image/png');
  })
  .then(buffer => {
    Array.isArray(buffer); // => true
    // as a stream
    return chartNode.getImageStream('image/png');
  })
  .then(streamResult => {
    // using the length property you can do things like
    // directly upload the image to s3 by using the
    // stream and length properties
    streamResult.stream; // => Stream object
    streamResult.length; // => Integer length of stream
    // write to a file
    return chartNode.writeImageToFile('image/png', './testimage.png');
  });```

[SeanLMcCullough]

I’ve found a temporary workaround.

It seems the problem has to do with the math relating to chart.js finding the inner circumference of the pie chart arcs. You can see in the example at the start of this thread that it’s giving up on rendering the arc origin.

What you can do, is set a really tiny number for the cutout percentage to trick the math into doing something. Tested under Windows 10 and Server 2016

var chartJsOptions = {
	type: 'pie',
	data: {
		datasets: [{
			data: [10, 10, 20, 30, 40],
			backgroundColor: ['red', 'orange', 'yellow', 'green', 'blue'],
			label: 'Dataset 1'
		}],
		labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue']
	},
	options: {
		cutoutPercentage: 0.00000001
	}
};

[SeanLMcCullough]

Can confirm, Windows 10 results in the same issue. My chart config works on the test website.