JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githubusercontent.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<script src="https://raw.githubusercontent.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.js"></script>
<div id='main_data_div'>
<h1>
This is my graph with pdf
</h1>
<button onclick="javascript:generate_pdf();">
Click for pdf!!
</button>
<div class="chartAreaWrapper" id="blanks_chart">
<canvas id="blanks_graph" width="500" height="300"></canvas>
</div>
</div>

JavaScript

function generate_pdf(){

    var element = document.getElementById('main_data_div');
    html2pdf(element, {
        margin:       0,
        filename:     'myfile.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { dpi: 192, letterRendering: true },
        jsPDF:        { unit: 'in', format: 'a4', orientation: 'l' }
    }).save();
    }

var ctx = document.getElementById('blanks_graph').getContext("2d");
var data = {
        labels: ["January","February","March",
              "April","May","June",
              "July","Agost","September",
              "October","November","December"],
        datasets: [
            {
                label: 'graph',
               fill: false,
                lineTension: 0,
                backgroundColor: "rgba(57,122,187,1)",
                borderColor: "rgba(57,122,187,1)",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderWidth: 1,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(57,122,187,1)",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "rgba(57,122,187,1)",
                pointHoverBorderColor: "rgba(57,122,187,1)",
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
                data: [65,68,75,
                    81,95,105,
                    130,120,105,
                    90,75,70],
                spanGaps: false
            }]
            };
            var options = {
        responsive: false,
        title: {
            display: true,
            position: "left",
            text: 'adadaad',
            fontSize: 18,
            fontColor: "#111"
        },
        legend: {
            display: false,
            position: "left",
            labels: {
               ...