JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<button id="exportButton" type="button">Print The Page</button>
<div id="chartsContainer">
  <div id="chartContainer1" style="height: 300px; width: 100%;"></div>
  <div style="margin: 10px auto;width: 100%;">
    <table name="mytab" id="mytab1">
      <tr><th>x</th> <th>y</th></tr>
       <tr><td>10</td>  <td>71</td></tr>
       <tr><td>20</td>  <td>55</td></tr>
       <tr><td>30</td>  <td>50</td></tr>
       <tr><td>40</td>  <td>65</td></tr>
       <tr><td>50</td>  <td>95</td></tr>
       <tr><td>60</td>  <td>68</td></tr>
       <tr><td>70</td>  <td>28</td></tr>
       <tr><td>80</td>  <td>34</td></tr>
       <tr><td>90</td>  <td>14</td></tr>
    </table>
  </div>
</div>

CSS

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
}
th,td {
    text-align: center;
}
button {
  margin-bottom: 10px;
}

JavaScript

var chart1 = new CanvasJS.Chart("chartContainer1", {
	title: {
  	text: "Column Chart"
  },
  data: [
    {
      type: "column",
      dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55 },
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14 }
      ]
    }					
  ]
});

chart1.render();

$("#exportButton").click(function(){
	window.print();
});