Как Highcharts использовать в email рассылках?

Question

vitas2008 @vitas2008

Как Highcharts использовать в email рассылках?

Привет, поделитесь опытом, как график highcharts перевести в картинку для создания HTML письма? Как это письмо передать на бэк? есть график, который надо превратить в png. Строится он на фронте, но передать надо в составе HTML письма, где график будет картинкой.
1. КТо нибудь делал график картинкой, поделитесь опытом, ссылками, примерами?
2. Как передать на бэк html письмо? Назначить код в переменную, и превратить в JSON? Или есть умнее варианты?
Спасибо всем!

import React from 'react'
import HighchartsReact from 'highcharts-react-official'
import Highcharts, { SeriesOptionsType } from 'highcharts'
import { standardizeData } from 'services/strandartizeData'
import { LoadingOutlined } from '@ant-design/icons';
import styles from './chart.module.scss'
import NoSummaryData from 'components/SummaryInfo/NoSummaryData';
import { chartData } from './containers/Widget'
import { useSelector } from 'react-redux'

interface Props {
  data: chartData[] | undefined
}

const MainChart = ({ data }: Props) => {
  const { loading } = useSelector((state) => state.widgets)

  if (!data || loading) {
    return <div className={styles.chart}>
      <div className={styles.loader}>
      <LoadingOutlined spin />
      </div>
    </div>
  }
  if (!data[0].data.length) {
    return <div className={styles.chart}><NoSummaryData /></div>
  }

  const series = data.map(
    (series): SeriesOptionsType => ({
      ...series,
      type: 'spline',
      // @ts-ignore
      data: standardizeDataForMainChart(series.data),
    })
  )

  const charts: Highcharts.Options = {
    chart: {
      type: 'spline',
    },
    title: {
      text: 'Динамика',
    },
    tooltip: {
      xDateFormat: '%d.%m.%Y',
      pointFormat: '{series.name}: {point.title}',
    },
    plotOptions: {
      spline: {
        lineWidth: 2,
        marker: {
          radius: 2,
          enabled: false,
        },
      },
    },
    xAxis: {
      gridLineWidth: 1,
      gridLineDashStyle: 'Dash',
      type: 'datetime',
    },
    yAxis: {
      gridLineWidth: 1,
      gridLineDashStyle: 'Dash',
      title: {
        text: '',
      },
      labels: {
        enabled: false,
      },
    },
    credits: {
      enabled: false,
    },
    series,
  }
  return (
    <div className={styles.chart}>
      <HighchartsReact
        highcharts={Highcharts}
        options={charts}
        containerProps={{
          className: styles.chartWrapper,
        }}
      />
    </div>
  )
}

export default MainChart