Closed6
Reactで使っていたchart.jsをv2.7からv3.9にアップデートする
参考
Pie chart のtooltipが動かない...
const options = {
plugins: {
tooltip: {
callbacks: {
label: function(tooltipItem: TooltipItem<'pie'>): string | string[] {
const label = tooltipItem.label;
const value = tooltipItem.dataset.data[tooltipItem.dataIndex] as number;
return `${label}: ${value}`;
}
}
}
}
}
ドキュメントにWARNINGであるChart.overrides[type].plugins.tooltip
の部分に設定するんか?
以下でビルドはできたが関数は呼び出されず
Chart.overrides["pie"].plugins.tooltip.callbacks.label = function(tooltipItem: TooltipItem<"pie">): string | string[] {
console.log("called tooltip label callbacks");
const label = tooltipItem.label;
const value = tooltipItem.dataset.data[tooltipItem.dataIndex] as number;
return `${label}: ${value}`;
}
Tree Shaking の関係で以下のようなに使用する機能を登録する必要があった
import { ArcElement, Chart, Legend, PieController, Tooltip } from "chart.js";
Chart.register(PieController, ArcElement, Legend);
Sandbox
aspectRatio
は以前は2
だったっぽいけど、v3からは1
がデフォルトになったっぽい。
なので大きくなりやがったってときはaspectRatio: 2
を設定するとよき
このスクラップは2022/10/06にクローズされました