Resize Chart Independently From Legend in ChartJS for Canvas Download

user_10955575 0
Viewed 181

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 e.g.

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 e.g.

enter image description here

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.

chart.js legend charts canvas javascript
1 Answers

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 e.g.

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