JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="row">
    <div class="col-md-12">
        <div id="widget" class="canvas__container">
            <canvas id="lineChartCanvas" class="chart chart-line canvas__canvas" chart-data="data" chart-labels="labels" style="height: 300px; width: 95%;"
                    chart-legend="true" chart-series="series" chart-click="onClick"></canvas>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-12 text-center">
        <input type="button" class="btn btn-primary" id="btnSave" value="EXPORT CHART" />
    </div>
</div>

CSS

body,
ul,
li {
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 21px;
  text-align: left;
}
#menu {
  list-style: none;
  width: 940px;
  margin: 30px auto 0px auto;
  height: 43px;
  padding: 0px 20px 0px 20px;
  /* Rounded Corners */
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  /* Background color and gradients */
  background: #014464;
  background: -moz-linear-gradient(top, #0272a7, #013953);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
  /* Borders */
  border: 1px solid #002232;
  -moz-box-shadow: inset 0px 0px 1px #edf9ff;
  -webkit-box-shadow: inset 0px 0px 1px #edf9ff;
  box-shadow: inset 0px 0px 1px #edf9ff;
}
#menu li {
  float: left;
  display: inline-block;
  text-align: center;
  position: relative;
  padding: 4px 10px 4px 10px;
  margin-right: 30px;
  margin-top: 7px;
  border: none;
}
#menu li:hover {
  border: 1px solid #777777;
  padding: 4px 9px 4px 9px;
  /* Background color and gradients */
  background: #F4F4F4;
  background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
  /* Rounded corners */
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
  border-radius: 5px 5px 0px 0px;
}
#menu li a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #EEEEEE;
  display: block;
  outline: 0;
  text-decoration: none;
  text-shadow: 1px 1px 1px #000;
}
#menu li:hover a {
  color: #161616;
  text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
  padding-right: 21px;
  background: url("img/drop.png") no-repeat right 8px;
}
#menu li:hover .drop {
  background: url("img/drop.png") no-repeat right 7px;
}
.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns,
.dropdown_6columns {
  margin: 4px auto;
  float: left;
  position: absolute;
  left: -999em;
  /* Hides the drop down...

JavaScript

$(function () {

var c = document.getElementById("lineChartCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
        $("#btnSave").click(function () {
        canvasdiv = document.getElementById('lineChartCanvas');
       html2canvas(canvasdiv, 
    {
      onrendered: function (canvas) {
        var a = document.createElement('a');
        // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
        a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
        a.download = 'somefilename.jpg';
        a.click();
      }
    });
        });
    });