Bootstrap modal showing when clicking individual points in Linechart but not in individual bars in Barchart

Question

I am trying to show a bootstrap modal when clicking individual bars instead of tooltip in chart js.

I have written the code for showing a bootstrap modal on clicking the particular x values in Line chart. But it doesn't work with barchart when i changed to linecchart to barchart with same datasets. As far as i know, the diiference b/w linechart and bar chart is the graphical representation and visualization. Please correct if am wrong.

Image file :

Screenshot of output which i explained above

HTML :

<div class="chart1">
    <canvas id="chart" width="300" height="150"></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">
         You clicked in June
       </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>

<div class="modal fade" id="myModal1" 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">
        You clicked in May
        <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 data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "My First dataset",
      fillColor: "rgba(220,220,220,0.2)",
      strokeColor: "rgba(220,220,220,1)",
      pointColor: "rgba(220,220,220,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(220,220,220,1)",
      data: [65, 59, 80, 81, 56, 55, 40]
    }, {
      label: "My Second dataset",
      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: [28, 48, 40, 19, 86, 27, 90]
    }]
  };

  var canvas = document.getElementById("chart");
  var ctx = canvas.getContext("2d");
  var chart = new Chart(ctx).Line(data, {
    responsive: true
  });


  canvas.onclick = function(evt) {
    var points = chart.getPointsAtEvent(evt);
    var value = chart.datasets[0].points.indexOf(points[0]);
    if(value == 5){
      $('#myModal').modal('show');
    } else if(value == 4){
      $('#myModal1').modal('show');
    }


  };

</script>

This code works perfectly fine in Linechart but I want the same in Barchart which I tried but didn't get the output.

Answer 1

use getBarsAtEvent instead of getPointsAtEvent