ご提供いただいたソースをそのまま使用しているため、見出しデザインがテンプレートデザインと異なる点はお見捨ておきください。
※画像のパスはファイルマネージャー上の画像を読み込むため「/images」を下記に差し替えております。
/hubfs/48792601/images/画像名.png
横書き日本語の場合
オリジナル画像
現在のグラフ画像では画像内の文字がラスタライズ化されたものであるため、ブラウザの自動翻訳機能を使っても外国語に翻訳されない問題があります。

文字無し画像+通常テキスト
画像内ラスタライズ化テキストを削除し、代わりに通常テキストを画像の上から配置することにより、ブラウザの自動翻訳翻訳機能によってグラフ内の文字を外国語に翻訳可能にします。
縦書き日本語の場合
オリジナル画像

文字無し画像+通常テキスト(無調整版)
元画像と同じ位置にテキストを配置すると、↓画像のように日本語表示では問題はないが、
自動翻訳機能で英語にするとテキストが伸びてしまい、画像と干渉するケースが発生する(この場合は翻訳語テキストが画像内の「B」に被さってしまう)
文字無し画像+通常テキスト(調整版)
翻訳によるテキストの干渉が発生した場合は、↓画像のようにテキスト位置を調整して干渉しないようにする(必要に応じて文字サイズなどを調整することも有り)
90度回転した日本語の場合
オリジナル画像

文字無し画像+通常テキスト
「transform: rotate(-90deg); 」により90度回転を設定する。
複数テキスト+等間隔テキストの場合
オリジナル画像

文字無し画像+通常テキスト
元画像の「インパルスハンマ」の「ハンマ」の等間隔部分は「text-align-last: justify;」を設定した。
ハンマ
ハンマ
枠線で囲まれたテキストの場合
オリジナル画像

文字無し画像+通常テキスト
枠線部分はdivに「border」を設定することで再現した。
ただし、「振動が下がりにくい位置」はテキスト位置を「left」で設定すると、英語テキスト化で文が長くなった際に画像の右限界に達して改行が発生し、グラフを隠してしまう問題が発生してしまいます。
そのような場合は「right」でテキスト位置を設定すると、文が左方向に伸びるので改行を回避できます。
(その他、英語化によるテキストとグラフの干渉を避けるために、各テキストの位置を若干調整した)
(力/加速度)
(力/加速度)
三次元回転が必要なテキストの場合
オリジナル画像
このような例は極めて少数であり、もしかしたらこの画像だけかもしれません。

文字無し画像+通常テキスト
「transform:rotateX(〇deg) rotateY(〇deg) skew(〇deg)」を用いてテキストの三次元回転を行った。
また、一部では「 scale(〇, 〇);」を用いて、回転したテキストの見た目を整えた。
その他、英文化による位置ずれの影響を最小限に抑えるため、文字サイズやテキスト位置などを若干調整した。
実部