Javascript/Jquery/Gantt Highchart : On clicking over a task progress pop-up should get open

user_882995 0
Viewed 423

enter image description here

Refer the above Gantt Chart.

I am loading this Gantt Chart in <div id="containter">. I need a jQuery Show Bootstrap Modal Popup on clicking only a Task Progress not by clicking a containter.

I tried this code,

  $(function () {
            $("#container").click(function () {
                $('#demoModal').modal('show');
            });
        });

   <!-- Modal -->
   <div class="modal fade" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog">
            <div class="modal-content">
                  <div class="modal-header">
                         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                         <h4 class="modal-title" id="myModalLabel">Task Progress Indicator</h4>
                   </div>
                    <div class="modal-body">Task Progress Indicator</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>

Bootstrap modal pop-up window get open when clicking anywhere over the chart. I want pop-up window should get open only on clicking over the task progress not on the indicator.

Please give me a solution what to do.

highcharts jquery javascript
1 Answers

You can add following settings in your gantt chart config

plotOptions: {
   series: {
      point: {
         events: {
           click: (event) => {
              console.log(event);
              $('#demoModal').modal('show');
           }
        }
      }
   }
}
user_39168310
Related