Add text to generated quadrant area by x and y plot lines in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

Add text to generated quadrant area by x and y plot lines in line chart

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">
$(function() {/*from ww  w . java2 s  . c o  m*/
  $('#container').highcharts({
    chart: {
      events: {
        load: function() {
          var chart = this,
            r = chart.renderer,
            each = Highcharts.each,
            left = chart.plotLeft,
            top = chart.plotTop,
            h = chart.plotHeight,
            w = chart.plotWidth,
            xAxis = chart.xAxis[0],
            yAxis = chart.yAxis[0],
            labels = ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
            labelStyles = {
              'font-size': '12px',
              'color': 'red'
            },
            attr = {
              zIndex: 10
            },
            xPlotLine, yPlotLine,bbox, x, y;
          chart.label = [];
          xPlotLine = xAxis.toPixels(xAxis.plotLinesAndBands[0].options.value);
          yPlotLine = yAxis.toPixels(yAxis.plotLinesAndBands[0].options.value);
          //render
          each(labels, function(label, i) {
            chart.label[i] = r.text(label, 0, 0)
              .attr(attr)
              .css(labelStyles)
              .add();
            bbox = chart.label[i].getBBox();
              console.log(w);
            switch(i) {
               case 0:
                 x = ((xPlotLine + left) / 2) - (bbox.width / 2);
                y = ((yPlotLine + top) / 2) - (bbox.height / 2);
                 break;
              case 1:
                 x = left + xPlotLine + ((w - xPlotLine)/2) - (bbox.width / 2);
                y = ((yPlotLine + top) / 2) - (bbox.height / 2);
                 break;
              case 2:
                 x = ((xPlotLine + left) / 2) - (bbox.width / 2);
                y = top + yPlotLine + ((h - yPlotLine) / 2) - (bbox.height / 2);
                 break;
              case 3:
                 x = left + xPlotLine + ((w - xPlotLine)/2) - (bbox.width / 2);
                y = top + yPlotLine + ((h - yPlotLine) / 2) - (bbox.height / 2);
                 break;
            }
            chart.label[i].attr({
               x: x,
              y: y
            });
          });
        }
      }
    },
    xAxis: {
      plotLines: [{
        id: 'ver',
        color: '#FF0000',
        width: 2,
        value: 2
      }]
    },
    yAxis: {
      plotLines: [{
        id: 'hor',
        color: '#FF0000',
        width: 2,
        value: 100
      }]
    },
    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]
    }]
  });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div>  
   </body>
</html>

Related Tutorials