2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

apexchartsでデータが無いときに任意のテキストを表示する

Last updated at Posted at 2021-11-02

#はじめに
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の値が[]となっていること__です。
seriesundefined, null, 0となっているときは適用されません。
私はここでつまづきました・・・。

#参照した記事
apexcharts公式
公式のissue→noDataの適用条件がコメントされています。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?