Highcharts Demo

author(s): Torstein Hønsi

by Rajesh Danabal

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div class="utiltyMenu">
   <button class="btn_settings" onclick="showMenu()">Settings</button>
   <div id="menu_container" class="menu_container" onmouseleave="removeMenu()" style="display:none">
     <ul>
       <!-- onclick="exportPopup()" -->
       <li data-toggle="modal" data-target="#exampleModalCenter">Export</li>
       <li>Runtime Editor</li>
       <li>Deviation Bar</li>
       <li>Interaction</li>
        <select id = "action">
             <option id="lasso" value="lasso">lasso</option>
             <option id="rlasso" value="rlasso">Reverse Lasso</option>
             <option id="zoom" value="zoom">Zoom</option>
       </select>
       <li id="lasso">lasso</li>
       <li id="rlasso">Reverse Lasso</li>
       <li id="zoom">Zoom</li>
     </ul>
   </div>


   <!-- Modal -->
   <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
     <div class="modal-dialog modal-dialog-centered" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title" id="exampleModalLongTitle">Export</h5>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button>
         </div>
         <div class="modal-body export_body">
           <p>
             select exporting format
           </p>
           <div>
             <ul id="exportOptions">
        ...

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
}

.btn_settings {
  position: relative;
}

.menu_container {
  position: absolute;
  top: 25;
  left: 20;
  background-color: #fff;
  box-shadow: 0px 0px 5px -1px #a6a6a6;
  padding: 15px;
  border-radius: 2px;
  z-index: 11;
}

.menu_container ul,
.export_body ul {
  margin: 0;
  padding: 0
}

.menu_container li {
  margin: 0 0 10px 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.menu_container li:last-child {
  margin-bottom: 0;
}

.modal-dialog {
  width: 300px !important;
  margin: 0 auto !important;
}

.modal-title {
  display: inline-block;
}

.export_body li {
  list-style: none
}

.export_body [type="radio"]:checked,
.export_body [type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
}

.export_body [type="radio"]:checked+label,
.export_body [type="radio"]:not(:checked)+label {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  line-height: 20px;
  display: inline-block;
  color: #666;
}

.export_body [type="radio"]:checked+label:before,
.export_body [type="radio"]:not(:checked)+label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 100%;
  background: #fff;
}

.export_body [type="radio"]:checked+label:before {
  border: 1px solid #0d7fd6;
}

.export_body [type="radio"]:checked+label:after,
.export_body [type="radio"]:not(:checked)+label:after {
  content: '';
  background: #0d7fd6;
  position: absolute;
  width: 9px;
  height: 9px;
  left: 3px;
  top: 5px;

  padding: 0;
  border: transparent;
  border-radius: 100%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.export_body [type="radio"]:not(:checked)+label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}

.export_body...

JavaScript

function showMenu() {
  document.getElementById("menu_container").style.display = "block"
}

function removeMenu() {
  document.getElementById("menu_container").style.display = "none"
}



$(function() {
var selection = "zoom";
  var chart = new Highcharts.Chart({
    //var chart =	$('#container').highcharts({

    chart: {
                    renderTo: 'container',
                    // polar: true,
                    type: 'bar',
                    zoomType: 'x',
                    events:{
                   	selection: function(e){
                    console.log("selection", selection);
                    alert("selecton "+ selection);
                    }
                    }
                },

                title: {
                    text: 'Budget vs spending',
                    x: -80
                },


                xAxis: {
                    categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
                    title: {
                        text: null
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Population (millions)',
                        align: 'high'
                    },
                    labels: {
                        overflow: 'justify'
                    }
                },

                tooltip: {
                    shared: true,
                    pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
                },

                legend: {
                    align: 'right',
                    verticalAlign: 'top',
                    y: 70,
                    layout: 'vertical'
                },
                plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
    series: [{
        name: 'Year 1800',
        data: [107, 31, 635, 203, 2]
    }, {
        name: 'Year...