title: Highcharts export with custom HTML graph
body: <p>I am generating a custom legend as an HTML table.  I would like to be able to include it when using the export function.  Is this possible, or will I have to use the useHTML function?</p>
  
  <p>Any thoughts?</p>
  
  <p><a href="http://jsfiddle.net/brookssh/hQqVU/1/" rel="nofollow">Fiddle</a></p>
  
  <p>var chart;</p>
  
  <pre><code>chart = new Highcharts.Chart({
      chart: {
          renderTo: 'chartContainer',
          height: 500, // 600,
          width: 1150,
          type: 'column',
          defaultSeriesType: 'spline',
          backgroundColor: null,
          reflow: false,
          shadow: false,
          //marginLeft: 60,
          //spacingTop: 10,
          spacingBottom: 100,
          width: 1150,
          events: {
              load: function () {
  
              }
          }
      },
      credits: {
          enabled: false
      },
      legend: {
          enabled: true,
          useHTML: true,
          layout: 'vertical',
          formatter: function () {
              return '&lt;td&gt;' + this.name + '&lt;/td&gt;';
          }
      },
      title: {
          text: "Power",
          style: {
              color: '#484a4a',
              fontSize: '22px',
              fontFamily: 'Arial, Helvetica, sans-serif',
              fontWeight: 'bold'
          }
      },
      subtitle: {
          text: "Wednesday, January 01 2014 through Saturday, January 18 2014",
          y: 36,
          style: {
              color: '#7e8081'
          }
      },
      xAxis: [{
          title: {
              text: 'Time',
              style: {
                  color: '#0063A2',
                  fontFamily: 'Arial, Helvetica, sans-serif',
                  fontWeight: 'bold'
              }
          },
          type: 'datetime',
          dateTimeLabelFormats: {
              second: '%H:%M:%S',
              minute: '%H:%M',
              hour: '%I:%M %p',
              day: '%b %d',
              month: '%B',
              year: '%Y'
          },
          plotBands: [{
              color: '#DDECFF',
              from: 1388768400000,
              to: 1388941200000
          }, {
              color: '#DDECFF',
              from: 1389373200000,
              to: 1389546000000
          }, {
              color: '#DDECFF',
              from: 1389978000000,
              to: 1390150800000
          }, {
              color: '#DDECFF',
              from: 1390582800000,
              to: 1390755600000
          }]
  
      }, {
          labels: {
              enabled: false
          },
          lineWidth: 0,
          tickWidth: 0
      }],
      yAxis: {
          title: {
              text: 'Consumption (kWh)',
              style: {
                  color: '#0063A2',
                  fontFamily: 'Arial, Helvetica, sans-serif',
                  fontWeight: 'bold'
              }
          },
          min: 0,
          plotLines: [{
              value: 0,
              width: 2,
              color: '#000000'
          }]
      },
      tooltip: {
  
          enable: true,
          formatter: function () {
              return Highcharts.dateFormat('%A, %b %e, %Y - %I:%M %P', this.x) + '&lt;br/&gt;' + '&lt;span style=color:#0063A2;&gt;' + this.series.name.split('|')[1] + '&lt;/span&gt; : ' + '&lt;b&gt;' + Highcharts.numberFormat(this.y, 2) + ' kWh' + '&lt;/b&gt;'
          }
  
  
  
      },
      plotOptions: {
  
          spline: {
              enableMouseTracking: true,
              animation: {
                  duration: 1500
              },
              marker: {
                  enabled: false,
                  states: {
                      hover: {
                          enabled: true,
                          symbol: 'circle',
                          radius: 5,
                          lineWidth: 1
                      }
                  }
              }
          }
      },
  
      series: [{
          name: "Building 1|Meter 1|870.68 kWh",
          visible: true,
          showInLegend: true,
          xAxis: 0,
  
          data: [
              [1388534400000, 65.598914000000000000],
              [1388620800000, 68.851831000000000000],
              [1388707200000, 60.547108000000000000],
              [1388793600000, 51.878880000000000000],
              [1388880000000, 46.766490000000000000],
              [1388966400000, 47.069411000000000000],
              [1389052800000, 54.288275000000000000],
              [1389139200000, 59.740870000000000000],
              [1389225600000, 49.483467000000000000],
              [1389312000000, 47.307088000000000000],
              [1389398400000, 39.515004000000000000],
              [1389484800000, 46.416965000000000000],
              [1389571200000, 46.892318000000000000],
              [1389657600000, 39.748021000000000000],
              [1389744000000, 47.707878000000000000],
              [1389830400000, 52.755024000000000000],
              [1389916800000, 46.109382000000000000]
          ]
  
      }, {
          name: "Building 1|Meter 2|1551.64 kWh",
          visible: true,
          showInLegend: true,
          xAxis: 0,
  
          data: [
              [1388534400000, 44.189323000000000000],
              [1388620800000, 109.177733000000000000],
              [1388707200000, 108.329552000000000000],
              [1388793600000, 50.555344000000000000],
              [1388880000000, 54.558574000000000000],
              [1388966400000, 111.037208000000000000],
              [1389052800000, 106.283663000000000000],
              [1389139200000, 91.240093000000000000],
              [1389225600000, 110.277573000000000000],
              [1389312000000, 115.203550000000000000],
              [1389398400000, 51.361583000000000000],
              [1389484800000, 50.476118000000000000],
              [1389571200000, 109.615805000000000000],
              [1389657600000, 108.753643000000000000],
              [1389744000000, 113.507186000000000000],
              [1389830400000, 112.714930000000000000],
              [1389916800000, 104.354283000000000000]
          ]
  
      }, {
          name: "Building 1|Meter 3|1400.82 kWh",
          visible: true,
          showInLegend: true,
          xAxis: 0,
  
          data: [
              [1388534400000, 37.352607000000000000],
              [1388620800000, 94.506990000000000000],
              [1388707200000, 90.280063000000000000],
              [1388793600000, 36.979780000000000000],
              [1388880000000, 40.526298000000000000],
              [1388966400000, 99.731228000000000000],
              [1389052800000, 108.977339000000000000],
              [1389139200000, 113.311452000000000000],
              [1389225600000, 100.197263000000000000],
              [1389312000000, 103.398914000000000000],
              [1389398400000, 37.813981000000000000],
              [1389484800000, 44.259228000000000000],
              [1389571200000, 98.668671000000000000],
              [1389657600000, 92.367895000000000000],
              [1389744000000, 107.649142000000000000],
              [1389830400000, 102.261792000000000000],
              [1389916800000, 92.540327000000000000]
          ]
  
      }]
  }, function (chart) {
      var options = chart.options.legend;
  
      /**
       * What happens when the user clicks the legend item
       */
      function clickItem(series, $legendItem, $line) {
          series.setVisible();
          $legendItem.css(
          options[series.visible ? 'itemStyle' : 'itemHiddenStyle']);
          if (series.visible) $legendItem.css({
              color: series.color
          });
          $line.css({
              borderTop: '2px solid ' + (series.visible ? series.color : options.itemHiddenStyle.color)
          });
      }
  
      var $legendcontainer = $("&lt;div id='centerdiv' class='highcharts-legend'&gt;").appendTo($(".createGraph"));
      // Create the legend box
      var $legend = $('&lt;table&gt;')
          .css({
          width: 800,
          //maxHeight: 210,
          //left:175,
          padding: 10,
          //position: 'absolute',
          overflow: 'auto',
  
          //top: 510,
          borderColor: options.borderColor,
          borderWidth: options.borderWidth,
          borderStyle: 'solid',
          borderRadius: options.borderRadius
      })
          .appendTo($legendcontainer);
  
      var $headerrow = $("&lt;tr&gt;").appendTo($legend);
      $("&lt;th&gt;").appendTo($headerrow);
      $("&lt;th&gt;").html("Building Name").appendTo($headerrow);
      $("&lt;th&gt;").html("Meter Name").appendTo($headerrow);
  
      $("&lt;th&gt;").html("Total Consumption").appendTo($headerrow);
  
      $.each(chart.series, function (i, series) {
          var data = series.name.split('|');
  
          //shift columns to the right for formatting
          if (data[0] == "Aggregate") {
              data[2] = data[1];
              data[1] = data[0];
              data[0] = "";
          }
          // create the legend item            
          var $legendItem = $('&lt;tr&gt;')
              .css({
              position: 'relative',
              marginLeft: 20
          })
              .css(options[series.visible ? 'itemStyle' : 'itemHiddenStyle'])
              .css({
              color: series.color
          })
              .html("&lt;td&gt;&lt;/td&gt;&lt;td&gt;" + data[0] + "&lt;/td&gt;&lt;td&gt;" + data[1] + "&lt;/td&gt;&lt;td&gt;" + data[2] + "&lt;/td&gt;")
              .appendTo($legend);
  
          // create the line with each series color
          var $line = $('&lt;div&gt;')
              .css({
              width: 16,
              float: 'left',
              borderTop: '2px solid ' + (series.visible ? series.color : options.itemHiddenStyle.color)
          })
              .prependTo($($legendItem).find("td").first());
  
          // click handler 
          $legendItem.click(function () {
              clickItem(series, $legendItem, $line);
          });
      });
  });
  </code></pre>