draw path on area chart with datetime axis - Javascript highcharts

Javascript examples for highcharts:Chart Axis

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

Description

draw path on area chart with datetime axis

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-3.1.1.js"></script> 
      <script type="text/javascript">
$(function() {/*from w w w  . j a  v  a 2s.  com*/
  $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data) {
    Highcharts.chart('container', {
      chart: {
        zoomType: 'x'
      },
      title: {
        text: 'USD to EUR exchange rate over time'
      },
      subtitle: {
        text: document.ontouchstart === undefined ?
          'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
      },
      xAxis: {
        type: 'datetime'
      },
      yAxis: {
        title: {
          text: 'Exchange rate'
        }
      },
      legend: {
        enabled: false
      },
      plotOptions: {
        area: {
          fillColor: {
            linearGradient: {
              x1: 0,
              y1: 0,
              x2: 0,
              y2: 1
            },
            stops: [
              [0, Highcharts.getOptions().colors[0]],
              [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
            ]
          },
          marker: {
            radius: 2
          },
          lineWidth: 1,
          states: {
            hover: {
              lineWidth: 1
            }
          },
          threshold: null
        }
      },
      series: [{
        type: 'area',
        name: 'USD to EUR',
        data: data
      }]
    }, function(chart) {
      // add line from January to April
      var xAxis = chart.xAxis[0];
      var yAxis = chart.yAxis[0];
      chart.renderer.path([
          'M', xAxis.toPixels(new Date(2014, 0, 1)), yAxis.toPixels(0.8),
          'L', xAxis.toPixels(new Date(2014, 3, 1)), yAxis.toPixels(0.9)
        ])
        .attr({
          'stroke-width': 2,
          stroke: 'red'
        })
        .add()
    });
  });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials