Converting Chart js canvas chart to image using toDataUrl results in blank image

Question

I am using Chart js  I am trying to convert the chart to an image by getting a base 64 string  The tutorial  http   www chartjs org docs   devotes an entire 1 line on the topic      The canvas element also allows for saving the contents as a base 64   string  allowing saving the chart as an image    A canvas element has the method of toDataURL  which returns a base64 string of the image  However  when I do that  the image it renders is just a transparent rectangle with the dimensions of the chart  and it does not include the chart contents    Here is a fiddle  http   jsfiddle net KSgV7   The  images  in the fiddle are styled with a black border  so you can see where they are supposed to be  since they seem to just be a big transparent block   Has anyone successfully converted a Chart js chart to an image

User · Answer

Chart JS API has changed since this was posted and older examples did not seem to be working for me  here is an updated fiddle that works on the newer versions   HTML    lt body gt       lt canvas id  canvas  height  450  width  600  gt  lt  canvas gt       lt img id  url    gt   lt  body gt    JS   function done      alert  haha      var url myLine toBase64Image      document getElementById  url   src url     var options       bezierCurve   false    animation        onComplete  done         var myLine   new     Chart document getElementById  canvas   getContext  2d                   data lineChartData          type  line           options options                  http   jsfiddle net KSgV7 585

User · Answer

The chart seem to be async so you will probably need to provide a callback when the animation has finished or else the canvas will be empty   var options         bezierCurve   false      onAnimationComplete  done      calls function done      at end

User · Answer

EH warch You need to use the Complete callback to generate your base64   onAnimationComplete  function        console log this toBase64Image        If you see a white image  it means you called the toBase64Image before it finished rendering

User · Answer

You should use the Chartjs API function toBase64Image   instead and call it after the animation is complete  Therefore   var pieChart  URI   var options         animation             onComplete   function                    URI   pieChart toBase64Image                        var content         type   pie     whatever  not relevant for this example     data            datasets  dataset   whatever  not relevant for this example            options  options                 pieChart   new Chart pieChart  content     Example  You can check this example and run it   x000D   x000D  var chart   new Chart ctx    x000D     type   bar   x000D     data    x000D        labels    Standing costs    Running costs       responsible for how many bars are gonna show on the chart x000D           create 12 datasets  since we have 12 items x000D           data 0    labels 0   data for first bar -  Standing costs     data 1    labels 1   data for second bar -  Running costs   x000D           put 0  if there is no data for the particular bar x000D        datasets     x000D           label   Washing and cleaning   x000D           data   0  8   x000D           backgroundColor    22aa99  x000D             x000D           label   Traffic tickets   x000D           data   0  2   x000D           backgroundColor    994499  x000D             x000D           label   Tolls   x000D           data   0  1   x000D           backgroundColor    316395  x000D             x000D           label   Parking   x000D           data   5  2   x000D           backgroundColor    b82e2e  x000D             x000D           label   Car tax   x000D           data   0  1   x000D           backgroundColor    66aa00  x000D             x000D           label   Repairs and improvements   x000D           data   0  2   x000D           backgroundColor    dd4477  x000D             x000D           label   Maintenance   x000D           data   6  1   x000D           backgroundColor    0099c6  x000D             x000D           label   Inspection   x000D           data   0  2   x000D           backgroundColor    990099  x000D             x000D           label   Loan interest   x000D           data   0  3   x000D           backgroundColor    109618  x000D             x000D           label   Depreciation of the vehicle   x000D           data   0  2   x000D           backgroundColor    109618  x000D             x000D           label   Fuel   x000D           data   0  1   x000D           backgroundColor    dc3912  x000D             x000D           label   Insurance and Breakdown cover   x000D           data   4  0   x000D           backgroundColor    3366cc  x000D           x000D        x000D     options    x000D        responsive  false  x000D        legend    x000D           position   right     place legend on the right side of chart x000D           x000D        scales    x000D           xAxes     x000D              stacked  true    this should be set to make the bars stacked x000D               x000D           yAxes     x000D              stacked  true    this also   x000D              x000D           x000D        animation     x000D           onComplete   done x000D                x000D       x000D      x000D   x000D  function done    x000D      alert chart toBase64Image     x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs Chart js 2 6 0 Chart min js  gt  lt  script gt  x000D   lt canvas id  ctx  width  700  gt  lt  canvas gt  x000D   x000D   x000D

User · Answer

First convert your Chart js canvas to base64 string   var url base64   document getElementById  myChart   toDataURL  image png     Set it as a href attribute for anchor tag   link href   url base64    lt a id  link  download  filename png  gt Save as Image lt  a gt

User · Answer

You can access afterRender hook by using plugins   And here are all the plugin api available   In html file      lt html gt     lt canvas id  myChart  gt  lt  canvas gt     lt div id  imgWrap  gt  lt  div gt   lt  html gt    In js file     var chart   new Chart ctx             plugins         afterRender  function               Do anything you want       renderIntoImage                            const renderIntoImage        gt      const canvas   document getElementById  myChart     const imgWrap   document getElementById  imgWrap     var img   new Image      img src   canvas toDataURL     imgWrap appendChild img    canvas style display    none

User · Answer

You can also use the toBase64Image   method setting animation  false  var options         bezierCurve   false      animation  false      Updated Fiddle

[javascript] Converting Chart.js canvas chart to image using .toDataUrl() results in blank image

Examples related to javascript

Examples related to html

Examples related to canvas

Examples related to chart.js