add some html text to the chart while exporting it to PNG, PDF,Jpeg - Javascript highcharts

Javascript examples for highcharts:Chart Text

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

Description

add some html text to the chart while exporting it to PNG, PDF,Jpeg

Demo Code

ResultView the demo in separate window 

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

#container {//from  w  w w. j a  v a 2s .  c  o m
   min-width: 310px;
   max-width: 800px;
   height: 400px;
   margin: 0 auto
}


      </style> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container"></div> 
      <input type="text" id="dynamic"> 
      <script type="text/javascript">
Highcharts.chart('container', {
  title: {
    text: 'Solar Employment Growth by Sector, 2010-2016'
  },
  subtitle: {
    text: 'Source: thesolarfoundation.com'
  },
  yAxis: {
    title: {
      text: 'Number of Employees'
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },
  plotOptions: {
    series: {
      pointStart: 2010
    }
  },
  exporting: {
    chartOptions: {
      chart: {
        events: {
          load: function() {
           var dynamic=document.getElementById('dynamic').value
           this.setTitle({ text: dynamic });
          }
        }
      },
      title: {
        align: 'right',
      }
    }
  },
  series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
  }, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
  }, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
  }, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
  }]
});

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

Related Tutorials