📊

react-apexcharts の日付と単位を日本形式にローカライズ

2022/08/20に公開

localize

apexcharts

tech

デフォルト表示

x軸の日付と、ツールチップの日付が英語圏の形式になっているので日本の形式に変えたい。ツールチップの中の数字にカンマと単位を追加し読みやすくしたい。

修正後

現状

const chartOptions = {
  xaxis: {
    type: 'datetime',
    categories: newData.categories,
    labels: {
      style: {
        colors: theme.palette.text.secondary
      },
      formatter: dateFormat
    }
  },
  ...
};

x軸の日付の形式を指定

8/10 の形式で指定したかったので以下のように修正

xaxis: {
  ...
  labels: {
    ...
    formatter: (timestamp) => {
      var date = new Date(timestamp);
      return date.getMonth() + 1 + '/' + date.getDate();
    }
  }
},

ツールチップのデータの値の形式を指定

ツールチップの日付も、8/10 形式で指定し、値も 8000 ではなく、8,000円の形式で指定したかったので以下のように修正

tooltip: {
  x: {
    formatter:  (timestamp) => {
      var date = new Date(timestamp);
      return date.getMonth() + 1 + '/' + date.getDate();
    }
  },
  y: {
    formatter: (price) => {
      return localCurrency(price, 'ja');
    }
  }
},

最終

const dateFormat = (timestamp) => {
  var date = new Date(timestamp);
  return date.getMonth() + 1 + '/' + date.getDate();
}

const chartOptions = {
  tooltip: {
    x: {
      formatter:  dateFormat
    },
    y: {
      formatter: (price) => {
        return localCurrency(price, 'ja');
      }
    }
  },
  xaxis: {
    type: 'datetime',
    categories: newData.categories,
    labels: {
      style: {
        colors: theme.palette.text.secondary
      },
      formatter: dateFormat
    }
  },
  ...
};

余談

ちなみに、ツールバーの翻訳等は以下のオプションでできます。

現状

x軸の日付の形式を指定

ツールチップのデータの値の形式を指定

最終

余談

Discussion