React + Highcharts で Client side export を行う

Highcharts で作成したグラフをPNGへ出力する際に、フォントの指定が反映されない現象に悩まされました。

出力する際のフォントの指定は以下のように行います。これが反映されません。

exporting: {
  chartOptions: {
    chart: {
      style: {
        fontFamily: 'フォント名
      }
    }
  }
}

ドキュメントを読んでいたところ、Client side export という記述を見つけました。 そもそも、実装していた内容だとPNGへ出力する際に外部のサーバーを利用して出力をしていました。 このため、フォントの反映に問題があったようです。

Client side export | Highcharts

早速 Client side export を利用するようにコードを改修しました。

import Highcharts from 'highcharts';
import HighchartsExporting from 'highcharts/modules/exporting';
import HighchartsOfflineExporting from 'highcharts/modules/offline-exporting';  // 追加

....

if (typeof Highcharts === 'object') {
  HighchartsExporting(Highcharts);
  HighchartsOfflineExporting(Highcharts);  // 追加
}

const exportChartImage = () => {
  //chartRef.current?.chart.exportChart({
  chartRef.current?.chart.exportChartLocal({  // 変更
    type: 'image/png',
    filename: 'chart.png'
  }, {});
};

この変更で、出力したPNGにフォントが反映されるようになりました。 また、外部サーバーを利用しないことから、画像がダウンロードされるまでの応答速度も改善されました。