Vertical Lines in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

Vertical Lines in line chart

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.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/modules/series-label.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from   www .j  a v a2  s .  c  o  m*/
Highcharts.chart('js-chart-rating-month', {
        credits: {
            enabled: false
        },
        title: {
            text: 'Ratings'
        },
        xAxis: {
            allowDecimals: false,
        },
        yAxis: {
            title: {
                text: 'Ratings'
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        plotOptions: {
            series: {
                label: {
                    connectorAllowed: true
                }
            }
        },
        series: [{
            name: 'Ratings',
            data: [[2006,9], [2007,8], [2008,9], [2009,10], [2010,8], [2011,9], [2012,10], [2013,9], [2014,8], [2015,8], [2016,8], [2017,10] ]
        }],
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 500
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        }
    });
    }

      </script> 
   </head> 
   <body> 
      <div class="col-sm-6"> 
         <div class="well well-default stat-block"> 
            <div class="tab-content"> 
               <div role="tabpanel" class="tab-pane fade" id="rating-month"> 
                  <div class="stat-chart-container"> 
                     <div id="js-chart-rating-month" class="ct-chart"></div> 
                  </div> 
               </div> 
            </div> 
         </div> 
      </div>  
   </body>
</html>

Related Tutorials