<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>Narrow Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../css/editor.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="narrow-jumbotron.css" rel="stylesheet">
</head>
<body><div data-component-chartjs="" class="chartjs" data-chart="{"type":"line","data":{"labels":["Red","Blue","Yellow","Green","Purple","Orange"],"datasets":[{"data":[12,19,3,5,2,3],"fill":false,"borderColor":"rgba(255, 99, 132, 0.2)"},{"fill":false,"data":[3,15,7,4,19,12],"borderColor":"rgba(54, 162, 235, 0.2)"}]}}" style="min-height:240px;min-width:240px;width:100%;height:100%;position:relative"> <canvas width="829" height="414" class="chartjs-render-monitor" style="display: block; width: 829px; height: 414px;"></canvas> </div>
<!-- /container -->
<script id="chartjs-script" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script><script> $(document).ready(function() { $(".chartjs").each(function () { ctx = $("canvas", this).get(0).getContext("2d"); config = JSON.parse(this.dataset.chart); chartjs = new Chart(ctx, config); }); }); </script></body>
</html>
