javascript - How can I show Bootstrap modal when on click in individual bars in chart.js -

i working on project using chart.js. trying show bootstrap modal when clicking individual bars instead of tooltip in chart js. right using chart id's onclick function showing bootstrap modal. there way make possible.?

here code:

html:

   <div class="chart1">      <canvas id="barchart5"></canvas>    </div>   <!-- modal --> <div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel">   <div class="modal-dialog" role="document">     <div class="modal-content">       <div class="modal-header">         <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>         <h4 class="modal-title" id="mymodallabel">modal title</h4>       </div>       <div class="modal-body">         ...       </div>       <div class="modal-footer">         <button type="button" class="btn btn-default" data-dismiss="modal">close</button>         <button type="button" class="btn btn-primary">save changes</button>       </div>     </div>   </div> </div> 

javascript :

 <script type="text/javascript">    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');   });  </script> 

canvas.onclick = function(evt) {     var points = chart.getbarsatevent(evt);     var value = chart.datasets[0].points.indexof(points[0]);     if(value == 5){       $('#mymodal').modal('show');     } else if(value == 4){       $('#mymodal1').modal('show');     }     };