Chart Annotation Scroll - Javascript highcharts

Javascript examples for highcharts:Chart Configuration

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

Description

Chart Annotation Scroll

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Annotations Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

#container {/*w  ww. j a  va  2  s. com*/
   max-width: 800px;
   margin: 0 auto;
}
.highcharts-annotation-label>span {
   height: 40px;
   overflow: auto;
}


      </style> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/annotations.js"></script> 
      <div id="container" style="height: 400px; margin-top: 1em"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
    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]
    }],
    xAxis: {
        tickInterval: 0.5,
        gridLineWidth: 1
    },
    annotations: [{
        labels: [{
            point: {
                x: 3,
                y: 129.2,
                xAxis: 0,
                yAxis: 0
            },
            text: 'KKKKKKKK<br/>KKK<br/>KKK<br/>KKK<br/>KKK<br/>KKK<br/>KKK'
        }],
        labelOptions: {
            useHTML: true,
            x: 40,
            y: -10
        }
    }]
});

      </script>  
   </body>
</html>

Related Tutorials