How can I show Bootstrap modal when on click in individual bars in chart.js
<p>I am working on a project using chart.js. I am trying to show a bootstrap modal when clicking individual bars instead of tooltip in chart js. Right now I am using chart id's onclick function for showing a bootstrap modal. Is there any way to make it possible.?</p>

<p>Here is my code:</p>

<p>HTML:</p>

<pre><code>   &lt;div class="chart1"&gt;
     &lt;canvas id="barchart5"&gt;&lt;/canvas&gt;
   &lt;/div&gt;

 &lt;!-- Modal --&gt;
&lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
  &lt;div class="modal-dialog" role="document"&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
        &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
        &lt;h4 class="modal-title" id="myModalLabel"&gt;Modal title&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
        ...
      &lt;/div&gt;
      &lt;div class="modal-footer"&gt;
        &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
        &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>JAVASCRIPT :</p>

<pre><code> &lt;script type="text/javascript"&gt;
   var data5 ={
   labels: ["Label1", "Label2", "Label3", "Label4", "Label5", "Label6", "Label7", "Label8"],
   datasets : [
   {
     fillColor : "#F64747",
     strokeColor : "#F64747",
     highlightFill: "#F64747",
     highlightStroke: "#F64747",
     data: [4, 6, 3, 2, 10, 5, 5, 7]
   },
   {
     fillColor : "#19B5FE",
     strokeColor : "#19B5FE",
     highlightFill : "#19B5FE",
     highlightStroke : "#19B5FE",
     data: [3, 6, 4, 3, 10, 10, 5, 8]
  },
  {
    fillColor : "#F7CA18",
    strokeColor : "#F7CA18",
    highlightFill : "#F7CA18",
    highlightStroke : "#F7CA18",
    data: [4, 6, 10, 4, 7, 6, 2, 4]
  }
]
};

 var ctx = document.getElementById("barchart5").getContext("2d");
 var barchart5 = new Chart(ctx).Bar(data5, {

 responsive : true,
 showTooltips: false,

 onAnimationComplete: function () {
 var ctx = this.chart.ctx;
 alert(ctx);
 ctx.font = this.scale.font;
 ctx.fillStyle = this.scale.textColor
 ctx.textAlign = "center";
 ctx.textBaseline = "bottom";

 this.datasets.forEach(function (dataset) {
  dataset.bars.forEach(function (bar) {
    ctx.fillText(bar.value, bar.x, bar.y);
    });
   })
 }
 });


$( "#barchart5" ).click(function() {
    $('#myModal').modal('show');
  });
 &lt;/script&gt;
</code></pre>