Rendering Highcharts Chart in Multiple divs with same ID - Javascript highcharts

Javascript examples for highcharts:Chart Configuration

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

Description

Rendering Highcharts Chart in Multiple divs with same ID

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script> 
      <script type="text/javascript" src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
      <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> 
      <script type="text/javascript">
    $(window).load(function(){/*ww  w. j  a  v a  2  s .  c  o m*/
$(function () {
   $(document).ready(function(){
      $('.CampaignPercent').each(function(){
         var chart = new Highcharts.Chart({
            chart: {
               renderTo: this,
               type: 'bar',
               width: 200,
               margin: [0,0,0,0]
            },
            colors: ['#F2F2F2','#2E5430'],
            xAxis: {
               lineWidth: 0,
               minorGridLineWidth: 0,
               lineColor: 'transparent',
               labels: {
                  enabled: false
               },
               minorTickLength: 0,
               tickLength: 0
            },
            yAxis:{
               gridLineWidth: 0,
               minorGridLineWidth: 0,
               labels: {
                  enabled: false
               },
               title: {
                  text: null
               },
               max: 100
            },
            tooltip: {
               formatter: function(){
                  var text = '';
                  if(this.series.name == 'remaining'){
                     text = this.y + '% of goal remaining'
                  } else {
                     text = this.y + '% of goal achieved'
                  }
                  return text;
               }
            },
            credits:{enabled: false},
            title:{text: null},
            legend: {
               enabled: false
            },
            plotOptions: {
               series: {
                  stacking: 'normal',
                  pointWidth: 20
               }
            },
            series: [{
               name: 'remaining',
               data: [40]
            },{
               name: 'achieved',
               data: [60]
            }],
            exporting: {
               enabled: false
            }
         });
      });
   });
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div class="CampaignPercent" style="height: 40px;">
         Div1
      </div> 
      <div class="CampaignPercent" style="height: 40px;">
         Div2
      </div> 
      <div class="CampaignPercent" style="height: 40px;">
         Div3
      </div>  
   </body>
</html>

Related Tutorials