jsPDF Chart.js Tutorial to Export Colorful Bar Chart inside PDF Document in Browser Using Javascript

Welcome folks today in this blog post we will be using the chart.js library to export colorful bar charts in pdf document using jspdf library in javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #chartContainer {
            width: 40%
        }

;

#myChart2 {
            width: 40%
        }

;
    </style>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.debug.js"></script>
<body>
    <a href="#" id="downloadPdf">Download Report Page as PDF</a>
    <br /><br />
    <div id="reportPage">
        <div id="chartContainer" style="width: 30%;float: left;">
            <canvas id="myChart"></canvas>
        </div>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#chartContainer {

width: 40%

}

;

#myChart2 {

width: 40%

}

;

</style>

</head>

<body>

<a href="#" id="downloadPdf">Download Report Page as PDF</a>

</div>

</div>

</div>

</body>

As you can see we have the bar charts inside the html. Now we also have some custom css styles that are applied to the bar charts. And now we need to export these bar charts from the canvas to pdf document

script.js

var chartColors = {
  red: 'rgb(255, 99, 132)',
  orange: 'rgb(255, 159, 64)',
  yellow: 'rgb(255, 205, 86)',
  green: 'rgb(75, 192, 192)',
  blue: 'rgb(54, 162, 235)',
  purple: 'rgb(153, 102, 255)',
  grey: 'rgb(231,233,237)'
};

var randomScalingFactor = function() {
  return (Math.random() > 0.5 ? 1.0 : 1.0) * Math.round(Math.random() * 100);
};

var data =  {
  labels: ["Car", "Bike", "Walking"],
  datasets: [{
    label: 'Fuel',
    backgroundColor: [
      chartColors.red,
      chartColors.blue,
      chartColors.yellow],
    data: [
      randomScalingFactor(), 
      randomScalingFactor(), 
      randomScalingFactor(), 
    ]
  }]
};

var myBar = new Chart(document.getElementById("myChart"), {
  type: 'horizontalBar', 
  data: data, 
  options: {
    responsive: true,
    title: {
      display: true,
      text: "Chart.js - Base Example"
    },
    tooltips: {
      mode: 'index',
      intersect: false
    },
    legend: {
      display: false,
    },
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

var myBar2 = new Chart(document.getElementById("myChart2"), {
  type: 'horizontalBar', 
  data: data, 
  options: {
    responsive: true,
    title: {
      display: true,
      text: "Chart.js - Changing X Axis Step Size"
    },
    tooltips: {
      mode: 'index',
      intersect: false
    },
    legend: {
      display: false,
    },
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero: true,
          stepSize: 2
        }
      }]
    }
  }
});

var myBar3 = new Chart(document.getElementById("myChart3"), {
  type: 'horizontalBar', 
  data: data, 
  options: {
    responsive: true,
    maintainAspectRatio: false,
    title: {
      display: true,
      text: "Chart.js - Setting maintainAspectRatio = false and Setting Parent Width/Height"
    },
    tooltips: {
      mode: 'index',
      intersect: false
    },
    legend: {
      display: false,
    },
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

$('#downloadPdf').click(function(event) {
  // get size of report page
  var reportPageHeight = $('#reportPage').innerHeight();
  var reportPageWidth = $('#reportPage').innerWidth();
  
  // create a new canvas object that we will populate with all other canvas objects
  var pdfCanvas = $('<canvas />').attr({
    id: "canvaspdf",
    width: reportPageWidth,
    height: reportPageHeight
  });
  
  // keep track canvas position
  var pdfctx = $(pdfCanvas)[0].getContext('2d');
  var pdfctxX = 0;
  var pdfctxY = 0;
  var buffer = 100;
  
  // for each chart.js chart
  $("canvas").each(function(index) {
    // get the chart height/width
    var canvasHeight = $(this).innerHeight();
    var canvasWidth = $(this).innerWidth();
    
    // draw the chart into the new canvas
    pdfctx.drawImage($(this)[0], pdfctxX, pdfctxY, canvasWidth, canvasHeight);
    pdfctxX += canvasWidth + buffer;
    
    // our report page is in a grid pattern so replicate that in the new canvas
    if (index % 2 === 1) {
      pdfctxX = 0;
      pdfctxY += canvasHeight + buffer;
    }
  });
  
  // create new pdf and add our new canvas as an image
  var pdf = new jsPDF('l', 'pt', [reportPageWidth, reportPageHeight]);
  pdf.addImage($(pdfCanvas)[0], 'PNG', 0, 0);
  
  // download the pdf
  pdf.save('filename.pdf');
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

var chartColors = {

red: 'rgb(255, 99, 132)',

orange: 'rgb(255, 159, 64)',

yellow: 'rgb(255, 205, 86)',

green: 'rgb(75, 192, 192)',

blue: 'rgb(54, 162, 235)',

purple: 'rgb(153, 102, 255)',

grey: 'rgb(231,233,237)'

};

var randomScalingFactor = function() {

return (Math.random() > 0.5 ? 1.0 : 1.0) * Math.round(Math.random() * 100);

};

var data = {

labels: ["Car", "Bike", "Walking"],

datasets: [{

label: 'Fuel',

backgroundColor: [

chartColors.red,

chartColors.blue,

chartColors.yellow],

data: [

randomScalingFactor(),

]

}]

};

var myBar = new Chart(document.getElementById("myChart"), {

type: 'horizontalBar',

data: data,

options: {

responsive: true,

title: {

display: true,

text: "Chart.js - Base Example"

tooltips: {

mode: 'index',

intersect: false

legend: {

display: false,

scales: {

xAxes: [{

ticks: {

beginAtZero: true

}

}]

}

});

var myBar2 = new Chart(document.getElementById("myChart2"), {

type: 'horizontalBar',

data: data,

options: {

responsive: true,

title: {

display: true,

text: "Chart.js - Changing X Axis Step Size"

tooltips: {

mode: 'index',

intersect: false

legend: {

display: false,

scales: {

xAxes: [{

ticks: {

beginAtZero: true,

stepSize: 2

}

}]

}

});

var myBar3 = new Chart(document.getElementById("myChart3"), {

type: 'horizontalBar',

data: data,

options: {

responsive: true,

maintainAspectRatio: false,

title: {

display: true,

text: "Chart.js - Setting maintainAspectRatio = false and Setting Parent Width/Height"

tooltips: {

mode: 'index',

intersect: false

legend: {

display: false,

scales: {

xAxes: [{

ticks: {

beginAtZero: true

}

}]

}

});

$('#downloadPdf').click(function(event) {

// get size of report page

var reportPageHeight = $('#reportPage').innerHeight();

var reportPageWidth = $('#reportPage').innerWidth();

// create a new canvas object that we will populate with all other canvas objects

var pdfCanvas = $('<canvas />').attr({

id: "canvaspdf",

width: reportPageWidth,

height: reportPageHeight

});

// keep track canvas position

var pdfctx = $(pdfCanvas)[0].getContext('2d');

var pdfctxX = 0;

var pdfctxY = 0;

var buffer = 100;

// for each chart.js chart

$("canvas").each(function(index) {

// get the chart height/width

var canvasHeight = $(this).innerHeight();

var canvasWidth = $(this).innerWidth();

// draw the chart into the new canvas

pdfctx.drawImage($(this)[0], pdfctxX, pdfctxY, canvasWidth, canvasHeight);

pdfctxX += canvasWidth + buffer;

// our report page is in a grid pattern so replicate that in the new canvas

if (index % 2 === 1) {

pdfctxX = 0;

pdfctxY += canvasHeight + buffer;

}

});

// create new pdf and add our new canvas as an image

var pdf = new jsPDF('l', 'pt', [reportPageWidth, reportPageHeight]);

pdf.addImage($(pdfCanvas)[0], 'PNG', 0, 0);

// download the pdf

pdf.save('filename.pdf');

});

As you can see we are using the jspdf library to export the canvas first of all and take the screenshot as jpeg image and then adding that image using the addImage() method of jspdf. And lastly we are downloading the pdf using the save() method.