highchart export 2 pdf with text title

Centering text title on export pdf

by Black Label

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 transform="translate(' + 560 + ', ' + 30 + ')"><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 = function(charts, texts, options) {

  // Merge the options
 ...