はじめに

react-apexchartsを用いてグラフの描画を行っています。
データが無いときに、「まだデータがありません」というテキストを表示させるのに少し手間取ったのでメモします。

option: noDataを使う

データが無いときのテキストの指定には、noDataというoptionを使います。
以下は円グラフをReactで表示させるときの例です。
グラフの代わりに「データがありません」のテキストを表示できます。

PieCharts.js

import React from 'react';
import Chart from 'react-apexcharts';

const PieCharts = (props) => {

  const [options, setOptions] = useState({
    labels: ['A', 'B', 'C', 'D'],
    colors: ['#FADE03','#33691E', '#0D47A0', '#B71C1C'],
    noData: {                
      text: 'データがありません'                //noDataにデータが無いときに表示するテキストを指定する
    }                              
  })

  const [series, setSeries] = useState([])   // seriesに[]を渡す→データなし

  return (
    <React.Fragment>
        <Chart
          options={options}
          series={series}
          type="pie"
        />
    </React.Fragment>
  );
}
export default PieCharts

noDataに指定できる項目

noDataには以下の設定をすることでテキストの表示を編集できます。
詳細は公式をご確認ください。

noData.js

noData: {
  text: undefined,
  align: 'center',              //または left, right
  verticalAlign: 'middle',　    //または top, bottom
  offsetX: 0,
  offsetY: 0,
  style: {
    color: undefined,
    fontSize: '14px',
    fontFamily: undefined
  }
}

noDataが適用されるときの条件

noDataに指定したテキストが表示される条件は、
__seriesの値が[]となっていること__です。
seriesがundefined, null, 0となっているときは適用されません。
私はここでつまづきました・・・。

参照した記事

・apexcharts公式
・公式のissue→noDataの適用条件がコメントされています。