How to print angular-chart

Question

and want to print this chart. My code is,

<html>
<head>Chart</head>
<body>
    <div class="row"><b>Patient Report</b>
        <div>
            <canvas id="line" class="chart chart-line" data="agedata" colours="colours"
                labels="labels" legend="true" series="series"click="onClick"></canvas>
        </div>
    </div>
    <div class="row">
        <a href="javascript:window.print()" class="btn btn-success">Print</a>
    </div>
</body>

But it prints nothing. Can Anyone suggest me methods to print chart?

Please provide your code sample in a formatted state, that means: don't hesitate to add line breaks. And check your spaces and closing quotation marks. If your code is like shown above it is missing some of them. (have a look near "click=" and "class=") — Marged, Jun 11 '15 at 12:05
A great place to start would be to look at the [Getting Started](http://jtblin.github.io/angular-chart.js/) section of the angular.chart.js; you are missing all includes and nothing in your sample indicates you're using Angular at all. — Juliën, Jun 11 '15 at 12:37

potatopeelings · Accepted Answer · 2015-07-07T12:53:38.040

0

You can use the toDataURL() to make the canvas into an image (and you could use media specific CSS to hide the canvas and swap in the img with src as the Data URL when printing)

Remember to wait for the animation to end before generating the data URI or you end up with a blank image.

edited Jul 07 '15 at 12:53

answered Jun 11 '15 at 12:55

potatopeelings

40,709
7
95
119

score 0 · Answer 2 · edited Sep 24 '22 at 23:00

0

Chart.js relies on a HTML5 canvas to render its charts however canvas objects cannot be printed by browsers.

The solution to bypass this limitation is to transform the canvas into an image when printing as described in this post.

edited Sep 24 '22 at 23:00

halfer

19,824
17
99
186

answered Jul 07 '15 at 13:03

POZ

583
4
11

How to print angular-chart

2 Answers2