highchart export 2 pdf with text title

Centering text title on export pdf

by jethanger

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<div id="container1" class="container"></div>
<div id="container2" class="container"></div>
<div id="container3" class="container"></div>
<div id="container4" class="container"></div>
<div id="container5" class="container"></div>

<div id="buttonrow">
  <button id="export-png">Export to PNG</button>
  <button id="export-pdf">Export to PDF</button>
</div>

<textarea name="message" class="HC" id='2' style="width:600px; height:50px" >
  Artifact Frequency
</textarea>

CSS

.container {
  width: 320px;
  margin: 0 auto;
  display: inline-block;
}

#buttonrow {
  width: 320px;
  margin: 0 auto;
  display: inline-block;
}

JavaScript

/**
 * Create a global getSVG method that takes an array of charts as an
 * argument
 */
Highcharts.getSVG = function(charts, texts) {
  var svgArr = [],
    top = 0,
    width = 0,
    endWidth = 0;
     i=0;
   

  Highcharts.each(charts, function(chart) {
    
    
     txt = texts;
    
     
     title= 'Daily Log  ';
      value = $(txt).val().replace(/\n/g, '</tspan><tspan x="0" dy="1.2em">');
      
      numberOfLines = $(txt).val().split("\n").length;
      txt = '<text x= "' + 5000 + '" y = "' + (top) + '"><tspan x="0" dy="1.2em">'  + title +'</br>' + ' at '  + '</tspan></text>';
      if(i==0){
      
      top +=  100
      svgArr.push(txt);
      
      }
     i+=1;
    
    
    
    var svg = chart.getSVG(),
      // Get width/height of SVG for export
      svgWidth = +svg.match(
        /^<svg[^>]*width\s*=\s*\"?(\d+)\"?[^>]*>/
      )[1],
      svgHeight = +svg.match(
        /^<svg[^>]*height\s*=\s*\"?(\d+)\"?[^>]*>/
      )[1];

    svg = svg.replace(
      '<svg',
      '<g transform="translate(' + width + ', ' + top + ')" '
    );

    svg = svg.replace('</svg>', '</g>');

    width += svgWidth;
    endWidth = Math.max(endWidth, width)

    if (width === 2 * svgWidth) {
      width = 0;
      top += svgHeight ;
    }

    svgArr.push(svg);
  });
  top += 200;
  return '<svg height="' + top + '" width="' + endWidth +
    '" version="1.1" xmlns="http://www.w3.org/2000/svg">' +
    svgArr.join('') + '</svg>';
};

/**
 * Create a global exportCharts method that takes an array of charts as an
 * argument, and exporting options as the second argument
 */
Highcharts.exportCharts = function(charts, options) {

  // Merge the options
  options = Highcharts.merge(Highcharts.getOptions().exporting, options);

  // Post to export server
  Highcharts.post(options.url, {
    filename: options.filename || 'chart',
    type: options.type,
    width: options.width,
    svg: Highcharts.getSVG(charts)
  });
};



 Highcharts.exportChartWithText =...