JSFiddle - React, Tailwind, and code Playground

by shruti patil

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">
    <title>Chart in Modal</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2">
			<div>
			<a href="#" data-toggle="modal" data-target="#modChart">
                                            <span class="glyphicon glyphicon-signal"></span> Volume Growth
                                        </a>
			</div>
               
            </div>
        </div>
    </div>

    <div class="modal fade" id="modChart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                        </button>
                    <h4 class="modal-title" id="exampleModalLabel">Linechart</h4>
                </div>
                <div class="modal-body">
                    <canvas id="canvas" width="568" height="300"></canvas>
                </div>
            </div>
        </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script...

CSS

body{padding-top:5em}

JavaScript

$('#modChart').on('shown.bs.modal',function(event){
  var link = $(event.relatedTarget);
    // get data source
   var source =  [65.10,59.47,80.00,81.11,56.67,55.45,40.88,20.45,40.98,80.66,88.34,61.01]   
    
    // get title
    var title = link.html();
    // get labels
    var table = link.parents('table'); 
   var labels = ['Jan.','Feb.','Mar.','April.','May.','June.','Jul.','Aug.','Sept.','Oct.','Nov.','Dec.',];
    
    // get target source
    var target = [65.10,59.47,80.00];
  
    // Chart initialisieren
    var modal = $(this);
    var canvas = modal.find('.modal-body canvas');
    modal.find('.modal-title').html(title);
    var ctx = canvas[0].getContext("2d");
    var chart = new Chart(ctx).Line({        
        responsive: true,
        labels: labels,
        datasets: [{
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: source
        },{
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "#F7464A",
            pointColor: "#FF5A5E",
            pointStrokeColor: "#FF5A5E",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "red",
            data: target
        }]
    },{});
}).on('hidden.bs.modal',function(event){
    // reset canvas size
    var modal = $(this);
    var canvas = modal.find('.modal-body canvas');
    canvas.attr('width','568px').attr('height','300px');
    // destroy modal
    $(this).data('bs.modal', null);
});