ダークモードで使える。React-chatjs-2のテキストの色を変える方法

React-chatjs-2で棒グラフを表示させたのですが、テキストの色を変えるのにかなり苦戦しました。使えるオプション一覧なども見つからず、英文で検索なども試し、1時間半ほど経ってようやく設定方法に辿り着きました。検索力を高めたい…。

Chart.jsとReact-chartjs-2とは

Chart.jsとは、JavaScript でグラフ(チャート)を描画するためのライブラリです。Canvasを使用しています。 React-chartjs-2はchart.jsをreactのプロジェクトで使いやすくしたものです。

React-chartjs-2でグラフの表示

Chart.jsとreact-chartjs-2をインストールします。

yarn add  chart.js react-chartjs-2

指定のコンポーネント内で、React-chartjs-2からBarをimportします。

import { Bar } from "react-chartjs-2";

const data = {
  labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  datasets: [
    {
      label: "# of Votes",
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        "rgba(255, 99, 132, 0.2)",
        "rgba(54, 162, 235, 0.2)",
        "rgba(255, 206, 86, 0.2)",
        "rgba(75, 192, 192, 0.2)",
        "rgba(153, 102, 255, 0.2)",
        "rgba(255, 159, 64, 0.2)",
      ],
      borderColor: [
        "rgba(255, 99, 132, 1)",
        "rgba(54, 162, 235, 1)",
        "rgba(255, 206, 86, 1)",
        "rgba(75, 192, 192, 1)",
        "rgba(153, 102, 255, 1)",
        "rgba(255, 159, 64, 1)",
      ],
      borderWidth: 1,
    },
  ],
};

const Graph = (): JSX.Element => {
  return <Bar data={data} />
};

export default Graph;

棒グラフが作成できました。オプションを設定せずとも、デザイン含めクオリティが高いです。

機能としては十分ですが、背景が暗い場合にテキストが黒だと、見えにくくなってしまいます。 今時のサイトは、ダークモード設定は当たり前になってきているのでその点を考えても、テキストの色を変えれないのは痛いです。

やはりテキストやメモリ線が見にくいです。

変更方法

以下のoptionsを作成します。

const options = {
  plugins: {
    //タイトル関連
    legend: {
      labels: {
        color: "#fff",
        font: {
          size: 20,
        },
      },
    },
  },
  scales: {
    //x軸関連
    x: {
      grid: {
        drawBorder: true,
        color: "#fff", //borderの色
      },
      ticks: {
        color: "#fff", //テキストの色
        font: {
          size: 16,        },
      },
    },
    //y軸関連
    y: {
      grid: {
        drawBorder: true,
        color: "#fff",
      },
      ticks: {
        color: "#fff",
        font: {
          size: 16,
        },
        beginAtZero: true,
      },
    },
  },
};

オプションを指定します。

<Bar data={data} options={options}　/>

いかがでしょうか。かなり見やすくなったと思います。

他にもオプションを追加することで、アニメーションをつけたりできますので、気になる方は調べてみてください。