为 Canvas 独立于 ChartJS 中的图例调整图表大小 下载

Question

Some of the charts created and downloaded by my application have the potential to have very large legends. When this is the case, the idea is to create (ideally via ChartJs - as is the case with the associated chart) and download a dedicated canvas/image showing the full legend for the chart.

So far, I have been able to "hide" the chart by setting the scales to display: false eg

options: {
  scales: {
    x: {
      display: false
    },
    y: {
      display: false
    }

This successfully prevents the chart from showing, but the canvas still seems to allocate half the real-estate for the chart eg

Is there any way I can make the space for the chart smaller (or even disable it from showing at all?) allowing more space for the legend?

Playground here: https://jsfiddle.net/ShallDev2018/7bdnjsw9/16/

NOTE: HtmlLegend is not an option here as the sole purpose of this canvas is for downloads.

Answer 1

After some more tinkering, I have found the solution to the problem.

As it happens, ChartJs sets a default max-width for the legend (although it doesn't specify this in the documentation). By setting legend max width to a high value, the legend can assume the whole canvas eg

legend: {
  position: 'left',
  align: 'start',
  fullSize: false,
  labels: {
    font: {
      size: 12
    },
    padding: 10
  },
  maxWidth: 9999
}