ChartJS legend is not included in canvas if is a custom html legend

ChartJS legend is not included in canvas if is a custom html legend

Expected Behavior

When save an image of canvas to include the legend.

Current Behavior

The legend is not included.

Possible Solution

Include the custom html legend into the chart canvas.

Steps to Reproduce (for bugs)

  1. Visit https://codepen.io/anon/pen/XZGyNW
  2. Right Click on Chart save image

Environment

Author: Fantashit

1 thought on “ChartJS legend is not included in canvas if is a custom html legend

  1. Actually, you could implement that feature by yourself, for example by using library like html2canvas and wrap the canvas + HTML legend inside the same container. You would add to expose a save button that will “capture” the HTML container (fiddle).

    <div id="chart">
      <div class="chart-wrapper">
         <canvas id="chart-canvas"><canvas/>
      </div>
      <div id="chart-legend">...</div>
    </div>
    <button id="btn-save">Save as image...</button>
    
    // ...
    
    document.getElementById('btn-save').addEventListener('click', function() {
        html2canvas(document.querySelector("#chart")).then(canvas => {
           // ...
        });
    });

Comments are closed.