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.?

Here is my 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>

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.?

Here is my 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>

• javascript
• jquery
• twitter-bootstrap
• bootstrap-modal
• chart.js

• 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){ $('#myModal').modal('show'); } }; – Raj Commented Jul 15, 2016 at 9:39

2 Answers 2

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');
    }


  };

see this,

Click events on Pie Charts in Chart.js

don't know much about chart.js but I'm sure this library has some method to do this easily, no need to use jquery.