Add html buttons and selects to Highcharts - Javascript highcharts

Javascript examples for highcharts:Chart Configuration

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Configuration

Description

Add html buttons and selects to Highcharts

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> 
      <style id="compiled-css" type="text/css">

#container2 span.highcharts-title {
   color: red !important;
   left: 0px !important;
   text-align: right;
   background-color: aquamarine;
   width: 100%;
   height: 50px;
}
g.highcharts-exporting-group {//from w w w  .ja va2  s.  co m
   display: none;
}


      </style> 
      <script type="text/javascript">
$(function() {
    Highcharts.wrap(Highcharts.Pointer.prototype, 'onContainerMouseDown', function(proceed, e) {
        var popupClass = e.target && e.target.className;
        // elements is not in popup
        if (!(Highcharts.isString(popupClass) &&
                popupClass.indexOf('highcharts-title-select') >= 0)) {
            proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        }
    });
    $('#container2').highcharts({
        chart: {
            events: {
                load: function() {
                    loadChartButtons();
                }
            }
        },
        title: {
            text: 'loading',
            align: 'right',
            x: -50,
            useHTML: true
        },
        credits: {
            enabled: false
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});
function loadChartButtons() {
    var element1 = '<button id="testbtn" class="btn btn-primary">Test</button>';
    var element2 = '<select id="testselect" class="highcharts-title-select"><option>test1</option><option>test2</option><option selected>test3</option></select>';
    $('#container2 span.highcharts-title').html(element1 + ' ' + element2);
}
$(document).on('click', '#testbtn', function() {
    console.log('button clicked');
});
$(document).on('click', '#testselect', function() {
    console.log('select clicked');
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container2" style="height: 400px; margin-top: 1em"></div> 
      <select>
         <option>test1</option>
         <option selected>test2</option>
         <option>test3</option>
      </select>  
   </body>
</html>

Related Tutorials