📊
react-apexcharts の日付と単位を日本形式にローカライズ
デフォルト表示
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
}
},
...
};
余談
ちなみに、ツールバーの翻訳等は以下のオプションでできます。
Discussion