portfolio-holdings graph

<div class="row" style="margin-top: 40px">
      <div class="col-lg-1"></div>
      <div class="col-lg-3">
        <lead style="color: #86868a;font-size: 14px;font-weight: 200;border-bottom: 1px dotted #86868a">Your Investment Mix</lead><br/><br/>
        <canvas id="myChart" width="250" height="250"></canvas>
      </div>

      <div class="col-lg-7" style="margin-left: px;margin-top: 50px">
        <table class="table" style="color:#86868a;font-size: 13px"> <thead> 
          <tr> 
            <th>Halo Note</th> 
            <th>Terms accepted at</th> 
            <th>Term Sheet</th> 
          </tr> 
          </thead> 
            <tbody> 
              <tr> <td scope="row" style="line-height: 20px"><div class="circle" style="background-color: #4BC0C0;display: inline-block;line-height: 5px;"></div>2yr, SPX, Growth Halo, 80% Participation, 25% Soft Protection</td> <td>5:27pm - 04/23/17</td> <td><a href="#">View</a></td>  </tr> 

              <tr> <td scope="row"><div class="circle" style="background-color: #FF6384;display: inline-block;line-height: 5px;"></div>3yr, TSLA, Income Halo, 80% Participation, 20% Soft Protection</td> <td>5:27pm - 04/23/17</td> <td><a href="#">View</a></td> </tr> 

              <tr> <td scope="row"><div class="circle" style="background-color: #36A2EB;display: inline-block;line-height: 5px;"></div>3yr, SPX, SX5E, Income Halo, 6.4% Annual Return, 25% Soft Protection</td> <td>5:27pm - 04/23/17</td> <td><a href="#">View</a></td>  </tr> 

              <tr> <td scope="row"><div class="circle" style="background-color: #FFCE56;display: inline-block;line-height: 5px;"></div>2yr, AAPL, Growth Halo, 60% Participation, 25% Soft Protection</td> <td>5:27pm - 04/23/17</td> <td><a href="#">View</a></td> </tr> 
            </tbody> 
        </table>
      </div>
    </div>

$(function () {
  var ctx = document.getElementById("myChart");
  var data = {
            datasets: [{
                data: [10, 20, 30, 20], 
                backgroundColor: [
                'rgba(255, 99, 132, 1.0)',
                'rgba(54, 162, 235, 1.0)',
                'rgba(255, 206, 86, 1.0)',
                'rgba(75, 192, 192, 1.0)',
                ]
            }],

            // These labels appear in the legend and in the tooltips when hovering different arcs
            labels: [
                '2yr, SPX, Growth Halo',
                '3yr, TSLA, Income Halo',
                '3yr, SPX, SX5E, Income Halo',
                '2yr, AAPL, Growth Halo', 

            ]
        };

        var options = {legend:{display:false}}

        var myDoughnutChart = new Chart(ctx, {
            type: 'pie',
            data: data,
            options: options
        });
        
    });