Draw series as arrow - Javascript highcharts

Javascript examples for highcharts:Chart Series

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

Description

Draw series as arrow

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.6.1.js"></script> 
      <script type="text/javascript">
    $(function(){//from   w  w  w  .j a  v  a  2s. c  om
$(function() {
  (function(H) {
    H.wrap(H.Series.prototype, 'drawGraph', function(proceed) {
      proceed.apply(this, Array.prototype.slice.call(arguments, 1));
      var arrowLength = 15,
        arrowWidth = 9,
        series = this,
        lastPoint = series.points[series.points.length - 1],
        nextLastPoint = series.points[series.points.length - 2],
        path = [];
      var angle = Math.atan((lastPoint.plotX - nextLastPoint.plotX) / (lastPoint.plotY - nextLastPoint.plotY));
      if (angle < 0) angle = Math.PI + angle;
      path.push('M', lastPoint.plotX, lastPoint.plotY);
      if (lastPoint.plotX > nextLastPoint.plotX) {
        path.push(
          'L',
          lastPoint.plotX + arrowWidth * Math.cos(angle),
          lastPoint.plotY - arrowWidth * Math.sin(angle));
        path.push(
          lastPoint.plotX + arrowLength * Math.sin(angle),
          lastPoint.plotY + arrowLength * Math.cos(angle));
        path.push(
          lastPoint.plotX - arrowWidth * Math.cos(angle),
          lastPoint.plotY + arrowWidth * Math.sin(angle),
          'Z');
      } else {
        path.push(
          'L',
          lastPoint.plotX - arrowWidth * Math.cos(angle),
          lastPoint.plotY + arrowWidth * Math.sin(angle));
        path.push(
          lastPoint.plotX - arrowLength * Math.sin(angle),
          lastPoint.plotY - arrowLength * Math.cos(angle));
        path.push(
          lastPoint.plotX + arrowWidth * Math.cos(angle),
          lastPoint.plotY - arrowWidth * Math.sin(angle),
          'Z');
      }
      if (series.arrow) {
        series.arrow.attr({
          d: path
        });
      } else {
        series.arrow = series.chart.renderer.path(path)
          .attr({
            fill: series.color
          })
          .add(series.group);
      }
    });
  }(Highcharts));
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'bar',
      zoomType: 'x'
    },
    xAxis: {
      min: -5,
      max: 5
    },
    plotOptions: {
      series: {
        animation: {
          duration: 2000
        },
        lineWidth: 2,
        marker: {
          enabled: false
        }
      },
      states: {
        hover: {
          enabled: true,
          lineWidth: 2
        },
      }
    },
    series: [{
      type: 'line',
      name: 'main',
      id: 'main',
      data: [
        [-1, 0],
        [-1, 5]
      ]
    }, {
      type: 'bar',
      data: [4, 3]
    }]
  });
});
    });

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

Related Tutorials