Amazon QuickSightでHighcharts Visualを使用して困ったこと

はじめに

こんにちは、開発部でデータサイエンティストをしている蜜澤です。

現在Amazon QuickSightを使用して、データ分析ツールを作成しています。
Highcharts Visualを有効に活用できていませんでしたが、従来の折れ線グラフでは実現できなかった、数値によって小数点表示を変更することや、凡例をクリックすることでグラフの表示/非表示を切り替えることが可能になったので、分析ツールの利便性向上のために検証を行いました。
その際に少し困ったことがあったので、紹介させていただければと思います。
本記事の内容はかなりニッチな内容になっているため、QuickSightを日頃から使用している方向けの内容となっております。

使用するデータ

以下のような、レシピ動画サイトでのユーザーの検索ログを集計したという想定の模擬データを使用します。

それぞれのカラムの定義は以下の通りです。

event_date：日付（2025-09-01~2025-09-07）
search_word：検索されたワード（キャベツ、豚肉）
count：検索回数

QuickSightの準備

QuickSightのデフォルトのビジュアルを使用した折れ線グラフと、Highcharts Visualを使用した折れ線グラフを作成します。
コントロールに入力したワードの検索回数が見れるようにフィルターとコントロールの設定もします。

作成したビジュアルが以下になります。
ほとんど同じ見た目になるように作成しました。

チャートコードは以下になります。

{
  "tooltip": {
    "headerFormat": "{point.x:%b %Y-%m-%d}<br>",
    "crosshairs": [
      {
        "width": 1,
        "color": "gray"
      }
    ],
    "borderWidth": 1,
    "borderColor": "#C0C0C0",
    "shadow": false
  },
  "legend": {
    "enabled": false
  },
  "xAxis": {
    "categories": ["getColumn", 0],
    "labels": {
      "style": {
        "fontSize": "10px"
      },
      "rotation": -45
    },
    "tickmarkPlacement": "on",
    "tickLength": 5,
    "tickWidth": 1
  },
  "yAxis": {
    "title":{
      "text": ""
    },
    "labels": {
      "style": {
        "fontSize": "10px"
      }
    },
    "min": 0
  },
  "series": [
    {
      "type": "line",
      "data": ["getColumn", 1],
      "name": "検索回数",
      "lineWidth": 2,
      "marker": {
        "enabled": true,
        "symbol": "circle",
        "radius": 2,
        "states": {
          "hover": {
            "enabled": false
          }
        }
      },
      "states": {
        "hover": {
          "lineWidth": 2
      }
    }
    }
  ],
  "colors": ["getColorTheme"]
}

困ったこと

先ほどの例ではコントロールで「キャベツ」を指定していましたが、「豚肉」に変更すると、以下のようにビジュアルも変更されます。

しかし、データに存在しないワードの場合は以下のようになります。

これがまさに困った点で、デフォルトの折れ線グラフの場合は「データなし」と表示されるので、「にんじんのデータは無いんだな」と利用者が気づけますが、Highcharts Visualを使用すると、何も表示されないため、「データがないのか」「読み込み中なのか」「他に問題があるのか」どういう状況なのかわからなくなってしまいます。

試したこと

Highcharts Visualでデータがない場合に「データなし」と表示する方法がないか調べた結果、チャートコードにnodataというオプションがあるということがわかったので、それを設定してみました。以下のコードを先ほどのチャートコードに追加しました。

"lang": {
    "noData": "データなし"
  },
  "noData": {
    "style": {
      "fontWeight": "bold",
      "fontSize": "12px",
      "color": "#606060"
    }
  }

しかし、「データなし」とは表示されず、何も表示されないままでした。

それでは、このオプションはなんのためにあるのだろうと疑問に思ったので、色々と検証してみた結果、以下のようにチャートコードのdataで参照する値がnullになっている場合に表示されるものだとわかりました。

"series": [
    {
      "type": "line",
      "data": [],
      ...

チャートコードのdataの部分を上記のようにして実行すると、以下のように「データなし」と表示されました。

まとめ

QuickSightの折れ線グラフでデータに存在しない値をフィルターで指定した時に、デフォルトの折れ線グラフを使用した場合は「データなし」と表示されるが、Highcharts Visualを使用している場合は現状では残念ながら「データなし」と表示する方法がないことがわかりました。
nodataというオプションはありますが、これはチャートコードで表示するデータを指定できていない場合に「データなし」と表示できるだけであり、上記の問題を解決できるわけではありませんでした。
現在Highcharts Visualはベータ版なので、今後のアップデートに期待したいです！

every Tech Blog

株式会社エブリーのTech Blogです。