Is there a way to copy the contents of a HighCharts tooltip to the clipboard?

Question

I'd like to be able to click on a point and have the contents of the tooltip for that point copied into the browser clipboard. I have a compromised solution here that copies the html of the tooltip into an input field and then copies it into the clipboard. I would ideally like to do this without the need for an input field, since this also requires focus to be moved to the input field.

I'm thinking that it should be possible to select the text of the tooltip itself and copy it from there rather than using the input as an intermediate.

In this example clicking on a point copies the html of the tooltip

$(function() {
  $('#container').highcharts({
    chart: {},

    tooltip: {
      useHTML: true,
      borderWidth: 0,
      style: {
        padding: 0
      }
    },

    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
      events: {
        click: function(event) {
          copyToClipboard(this.chart.tooltip.label.div.innerHTML);
        }
      }
    }]
  });

  // modified from another stackoverflow question
  function copyToClipboard(html) {
    // create hidden text element, if it doesn't already exist
    var targetId = "clipboardInput";
    target = document.getElementById("clipboardInput");
    target.value = html;
    target.focus();
    target.setSelectionRange(0, target.value.length);
    document.execCommand("cut");
  }
});

So what is the problem? You don't how to get the content of from the tooltip html, like point's value, series, etc. or you don't how to copy the text to clipboad. For the second case, there are answers which cover the topic fully, e.g. here http://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript — morganfree, Nov 30 '16 at 14:18

score 0 · Answer 1 · answered Nov 30 '16 at 13:09

0

document.execCommand('texttocopy'); works in most modern browsers. Try executing it with your high chart tooltip in place.

Otherwise you can always use Github's Zelo Clipboard (browsers need to support Flash for this option)

answered Nov 30 '16 at 13:09

nashcheez

5,067
1
27
53

score 0 · Answer 2 · answered Nov 30 '16 at 14:30

There are multiple ways. But this one I found the safest as the user actually has to do it:

$(function() {
  function copyToClipboard(text) {
    window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
  }

  $('#container').highcharts({
    chart: {},

    tooltip: {
      useHTML: true,
      borderWidth: 0,
      style: {
        padding: 0
      }
    },

    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
      events: {
        click: function(event) {
          console.log(this.chart.tooltip.label.div.textContent);
          var theText = this.chart.tooltip.label.div.textContent;
          copyToClipboard(theText);
        }
      }
    }]
  });
});

Popup box comes up with text that is to be copied with prompts to do it.

score 0 · Answer 3 · edited May 23 '17 at 10:30

I have a working solution that although still uses an intermediate html element, it no longer causes movement of focus issues that I saw with the example I posted.

Working version

copyTextToClipboard function from How do I copy to the clipboard in JavaScript?

$(function() {
  $('#container').highcharts({
    chart: {},

    tooltip: {
      useHTML: true,
      borderWidth: 0,
      style: {
        padding: 0
      }
    },

    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
      events: {
        click: function(event) {
          copyTextToClipboard(this.chart.tooltip.label.div.innerHTML);
        }
      }
    }]
  });

  function copyTextToClipboard(text) {
    var textArea = document.createElement("textarea");

    //
    // *** This styling is an extra step which is likely not required. ***
    //
    // Why is it here? To ensure:
    // 1. the element is able to have focus and selection.
    // 2. if element was to flash render it has minimal visual impact.
    // 3. less flakyness with selection and copying which **might** occur if
    //    the textarea element is not visible.
    //
    // The likelihood is the element won't even render, not even a flash,
    // so some of these are just precautions. However in IE the element
    // is visible whilst the popup box asking the user for permission for
    // the web page to copy to the clipboard.
    //

    // Place in top-left corner of screen regardless of scroll position.
    textArea.style.position = 'fixed';
    textArea.style.top = 0;
    textArea.style.left = 0;

    // Ensure it has a small width and height. Setting to 1px / 1em
    // doesn't work as this gives a negative w/h on some browsers.
    textArea.style.width = '2em';
    textArea.style.height = '2em';

    // We don't need padding, reducing the size if it does flash render.
    textArea.style.padding = 0;

    // Clean up any borders.
    textArea.style.border = 'none';
    textArea.style.outline = 'none';
    textArea.style.boxShadow = 'none';

    // Avoid flash of white box if rendered for any reason.
    textArea.style.background = 'transparent';


    textArea.value = text;

    document.body.appendChild(textArea);

    textArea.select();

    try {
      var successful = document.execCommand('copy');
      var msg = successful ? 'successful' : 'unsuccessful';
      console.log('Copying text command was ' + msg);
    } catch (err) {
      console.log('Oops, unable to copy');
    }

    document.body.removeChild(textArea);
  }

});

Is there a way to copy the contents of a HighCharts tooltip to the clipboard?

3 Answers3