add a link in PlotLines for column chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

add a link in PlotLines for column chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Adding custom behaviours to the plotlines in Highcharts</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" src="https://code.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script> 
      <script type="text/javascript">
var yourNamespaceHere = yourNamespaceHere || {};
yourNamespaceHere.deleteMe = function (plotLine) {
      console.log("Delete " + plotLine);
      return;/*w ww  .  jav  a2 s . c o m*/
  };
  $(function () {
      $(document).ready(function () {
          var chart = new Highcharts.Chart({
              chart: {
                  renderTo: 'container',
                  type: 'column'
              },
              title: {
                  text: 'Add Link in PlotLines'
              },
              xAxis: {
                  categories: ['Africa', 'America', 'Asia'],
              },
              yAxis: {
                  plotLines: [{
                      value: 450,
                      color: '#ff0000',
                      width: 2,
                      zIndex: 4,
                      id: 'PlotLine1',
                      label: {
                          text: 'PlotLine 1 ' + '<a href="javascript: yourNamespaceHere.deleteMe(\'PlotLine1\');" >Delete</a>'
                      }
                  }, {
                      value: 200,
                      color: '#000055',
                      width: 2,
                      id: 'PlotLine2',
                      zIndex: 4,
                      label: {
                          text: 'PlotLine 2 ' + '<a href="javascript: yourNamespaceHere.deleteMe(\'PlotLine2\');" >Delete</a>'
                      }
                  }]
              },
              series: [{
                  name: 'Year 1800',
                  data: [107, 31, 50]
              }, {
                  name: 'Goal',
                  type: 'scatter',
                  marker: {
                      enabled: false
                  },
                  data: [450]
              }]
          });
      });
  });

      </script> 
   </head> 
   <body> 
      <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials