How to export highcharts graph and send it by email?

I’m ussing highcharts in my project and I’m abit new in that. My problem is that how to get a capture of my chart and then send it by email? for email sending I’m ussing PHPMailer, the email works correctly. I searched in highcharts documentation they propose node export-server, but there is no example. I got some hints from internet but doesn’t work. I want, when I click on send chart by email button, it sould take the picture of chart and send it to email. So, can anybody kindly help me please with an example? A simple example of My code is bellow:

// import highcharts and export server
<script src="https://code.highcharts.com/highcharts.js"></script>
   <script src="https://code.highcharts.com/modules/exporting.js"></script>

// sendGraphByMail is my PHPMailer configuration file
  <a href="sendGraphByMail.php">
      <button class="send-chart" onclick="sendChart()">Send chart by e-mail</button>
   </a>
   <div id="container"></div>
   <h2>
      Exported image below
   </h2>
   <img id="image" />

   <script>
      var options = {
         chart: {},
         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],
            type: 'column'
         }]
      }

      var chart = Highcharts.chart('container', options);

      function sendChart() {
         console.log('Send chart button clicked !');
         // I think the exprot script goes here 
      }

a screen shot of page look like this.

Answer

I want to answer myself:

• We use html2canvas for taking an screenshot.
• For sending email we use SMTPJS.

for email sending we use elasticemail provider, because SMTP accept only elastic email provider. Note: don’t forgate to import both smtpJS and html2canvas

  <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.0.0-rc.5/dist/html2canvas.min.js"></script>

  <script src="https://smtpjs.com/v3/smtp.js"></script>

 function sendChart() {
          // get the div id where you dispaly the highchart
         let chart = document.getElementById('yourChartId');

         // Use the html2canvas function to take a screenshot
         html2canvas(chart).then(
            function(canvas) {

               canvas.style.display = 'none'
               document.body.appendChild(canvas);

               Email.send({
                     //SecureToken: 'your security(-4d2c-86ac-41f939394144)',
                     Host: "smtp.elasticemail.com",
                     Username: "[e-mail]",
                     Password: "yourPassword",
                     To: '[e-mail]',
                     // To: document.getElementById('idname').value, // if you want to get by form
                     From: "[e-mail]",
                     Subject: "Highchart graph",
                     Body: "Hello, the body of your email",
                     Attachments: [{
                        name: "chart.png",
                        data: canvas.toDataURL()
                     }]
                  })
                  .then(
                     message => alert(message == 'OK' ? 'Email sent successfully' : message)
                  );

            })

      }