How to save Chart JS charts as image without black background using blobs and filesaver?

by

If you want a customized background color then, you’d have to draw a background with your preferred color, and you can do so, like this …

var backgroundColor="white";
Chart.plugins.register({
    beforeDraw: function(c) {
        var ctx = c.chart.ctx;
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, c.chart.width, c.chart.height);
    }
});

DEMO

// draw background
var backgroundColor="white";
Chart.plugins.register({
    beforeDraw: function(c) {
        var ctx = c.chart.ctx;
        ctx.fillStyle = backgroundColor;
        ctx.fillRect(0, 0, c.chart.width, c.chart.height);
    }
});

// chart
var canvas = $('#NoBidsChart').get(0);
var myChart = new Chart(canvas, {
    type: 'line',
    data: {
        labels: [1, 2, 3, 4, 5],
        datasets: [{
            label: 'Line Chart',
            data: [1, 2, 3, 4, 5],
            backgroundColor: 'rgba(255, 0, 0, 0.2)',
            borderColor: 'rgba(255, 0, 0, 0.5)',
            pointBackgroundColor: 'black'
        }]
    }
});

// save as image
$('#save').click(function() {
    canvas.toBlob(function(blob) {
        saveAs(blob, "pretty image.png");
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<button id="save">Save</button>
<canvas id="NoBidsChart"></canvas>

More Related Contents:

  1. Multiple clipping areas on Fabric.js canvas
  2. Record at constant fps with CanvasCaptureMediaStream even on slow computers
  3. Zoom and pan in animated HTML5 canvas
  4. HTML5 File API downloading file from server and saving it in sandbox
  5. Convert blob URL to normal URL
  6. Cursor size limit in Android SQLiteDatabase
  7. CanvasCaptureMediaStream / MediaRecorder Frame Synchronization
  8. canvas2d toDataURL() different output on different browser
  9. How to perform Mouse Wheel scrolling over HTML5 Canvas in Selenium?
  10. How to clear a chart from a canvas so that hover events cannot be triggered?
  11. Chart.js – Formatting Y axis
  12. Saving images: files or blobs?
  13. Display image from blob using javascript and websockets
  14. How to create rounded bars for Bar Chart.js v2?
  15. Where is Blob binary data stored?
  16. Saving canvas to image via canvas.toDataURL results in black rectangle
  17. Convert HTML5 Canvas into File to be uploaded?
  18. Angular: How to download a file from HttpClient?
  19. chart.js load totally new data
  20. How to find the coordinates of the buttons on a canvas, and click on them after using Java and Selenium?
  21. Error: “category” is not a registered scale
  22. Chartjs Bar Chart showing old data when hovering
  23. Custom Legend with ChartJS v2.0
  24. canvas getContext(“2d”) returns null
  25. How can I get DPI from image in JS?
  26. What’s the best way to display an image from a sql server database in asp.net?
  27. How can I animate the drawing of text on a web page?
  28. ng2-charts update labels and data
  29. Open HTML5 date picker on icon click
  30. Blob download is not working in IE

Leave a Comment