score:41

Accepted 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
};

score:-1

you can also use the tobase64image() method setting animation: false

var options = {
    beziercurve : false,
    animation: false
};

updated fiddle

score:0

@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.

score:2

you can access afterrender hook by using plugins.

and here are all the plugin api available.

in html file:

<html>
  <canvas id="mychart"></canvas>
  <div id="imgwrap"></div>
</html>

in js file:

var chart = new chart(ctx, {
  ...,
  plugins: [{
    afterrender: function () {
      // do anything you want
      renderintoimage()
    },
  }],
  ...,
});

const renderintoimage = () => {
  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'
}

score:3

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

var chart = new chart(ctx, {
   type: 'bar',
   data: {
      labels: ['standing costs', 'running costs'], // responsible for how many bars are gonna show on the chart
      // create 12 datasets, since we have 12 items
      // data[0] = labels[0] (data for first bar - 'standing costs') | data[1] = labels[1] (data for second bar - 'running costs')
      // put 0, if there is no data for the particular bar
      datasets: [{
         label: 'washing and cleaning',
         data: [0, 8],
         backgroundcolor: '#22aa99'
      }, {
         label: 'traffic tickets',
         data: [0, 2],
         backgroundcolor: '#994499'
      }, {
         label: 'tolls',
         data: [0, 1],
         backgroundcolor: '#316395'
      }, {
         label: 'parking',
         data: [5, 2],
         backgroundcolor: '#b82e2e'
      }, {
         label: 'car tax',
         data: [0, 1],
         backgroundcolor: '#66aa00'
      }, {
         label: 'repairs and improvements',
         data: [0, 2],
         backgroundcolor: '#dd4477'
      }, {
         label: 'maintenance',
         data: [6, 1],
         backgroundcolor: '#0099c6'
      }, {
         label: 'inspection',
         data: [0, 2],
         backgroundcolor: '#990099'
      }, {
         label: 'loan interest',
         data: [0, 3],
         backgroundcolor: '#109618'
      }, {
         label: 'depreciation of the vehicle',
         data: [0, 2],
         backgroundcolor: '#109618'
      }, {
         label: 'fuel',
         data: [0, 1],
         backgroundcolor: '#dc3912'
      }, {
         label: 'insurance and breakdown cover',
         data: [4, 0],
         backgroundcolor: '#3366cc'
      }]
   },
   options: {
      responsive: false,
      legend: {
         position: 'right' // place legend on the right side of chart
      },
      scales: {
         xaxes: [{
            stacked: true // this should be set to make the bars stacked
         }],
         yaxes: [{
            stacked: true // this also..
         }]
      },
      animation : {
         oncomplete : done
      }      
   }
});

function done(){
    alert(chart.tobase64image());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.6.0/chart.min.js"></script>
<canvas id="ctx" width="700"></canvas>

score:10

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;

<a id='link' download='filename.png'>save as image</a>

score:31

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:

<body>
    <canvas id="canvas" height="450" width="600"></canvas>
    <img id="url" />
</body>

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/


Related Query

More Query from same tag