Fire a bootstrap modal when i click on a stacked bar of highcharts

Question

I m trying to fire a bootstrap modal when i click on a stacked column of highcharts. As i m trying to figure out that when i click on different columns in the highchart the modal values has to change according to the values in the 1s

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area',
			options2d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
		title: {
            text: 'Exams Report'
        },
        xAxis: {
		    title: {
                text: 'Classes'
            },
            categories: ['1st class', '2nd class', '3rd class', '4th class', '5th class','6th class', '7th class', '8th class', '9th class', '10th class']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Exams Report'
            },			
            stackLabels: {
                enabled: false,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },

        plotOptions: {
            area: {
                stacking: 'normal',
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {
							window.location.href= "details_sub_reports.html?subject="+this.x+"&completed="+this.y+"&report=lesson";
                        }
                    }
                },dataLabels: {
             
          enabled: true,
          color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black', 
          style: {
                    textShadow: '0 0 3px 0'
                 }
                }
            }
        },

        series: [{
        name: 'Passed',
        data: [5, 3, 4, 7, 4, 9, 5, 6, 8, 7],
		color:'#4DB84D'
    }, {
        name: 'Failed',
        data: [1, 2, 3, 2, 2, 5, 6, 2, 3, 4],
		color:'#FF6666'
    }]
    });	
});
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/datacharts.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="container" data-toggle="modal" data-target="#myModal" style="height: 350px;width:600px;"><a></a></div>
		<div id="div3_example" data-toggle="modal" data-target="#myModal" style="margin:10px 0 30px 0; width:200px; height:230px;"> </div>
			<div id="myModal" class="modal fade" role="dialog">
								<div class="modal-dialog modal-dialog-lg">
									<!-- Modal content-->
									<div class="modal-content">
										<div class="modal-header">
											<button type="button" class="close" data-dismiss="modal">&times;</button>
											<h4 class="modal-title">Faculty Schedule</h4>
										</div>
										<div class="modal-body">
											<div id="container2" style="height: 350px;width:500px;"></div>
										
										</div>
										<div class="modal-footer">
											<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
										</div>
									</div>
								</div>
							</div>

t stacked column chart

Answer 1

This is a two part answer:

Firstly, looking at the highcharts API documentation you can use the 'click' method to fire off your own javascript.

See Highcharts API and Highcharts fiddle

Secondly, use:

$('#myModal').modal('show');

To open the applicable bootstrap modal.

See Bootstrap API and Another SE question/answer