フォント

チャート上のすべてのフォントを変更できる特別なグローバル設定があります。これらのオプションは Chart.defaults.font にあります。グローバルフォント設定は、設定にさらに具体的なオプションが含まれていない場合にのみ適用されます。

たとえば、このチャートでは、凡例のラベルを除いて、テキストのフォントサイズは16pxになります。

Chart.defaults.font.size = 16;
let chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        plugins: {
            legend: {
                labels: {
                    // This more specific font property overrides the global property
                    font: {
                        size: 14
                    }
                }
            }
        }
    }
});

名前	タイプ	デフォルト	説明
family	文字列	"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"	すべてのテキストのデフォルトフォントファミリー。CSSのfont-familyオプションに従います。
size	数値	12	テキストのデフォルトフォントサイズ（px単位）。 radialLinearスケールポイントラベルには適用されません。
style	文字列	'normal'	デフォルトのフォントスタイル。ツールチップのタイトルまたはフッターには適用されません。チャートタイトルには適用されません。 CSSのfont-styleオプション（normal、italic、oblique、initial、inheritなど）に従います。
weight	normal | bold | lighter | bolder | number	未定義	デフォルトのフォントの太さ。（MDN (新しいウィンドウで開きます)を参照）。
lineHeight	数値|文字列	1.2	テキストの1行の高さ（MDN (新しいウィンドウで開きます)を参照）。

フォントが見つからない場合

システムに存在しないフォントがチャートに指定されている場合、ブラウザはフォントが設定されていても適用しません。チャートに奇妙なフォントが表示される場合は、適用しているフォントがシステムに存在することを確認してください。詳細については、issue 3318 (新しいウィンドウで開きます)を参照してください。

フォントの読み込み

フォントがキャッシュされておらず、読み込む必要がある場合、フォントを使用するチャートは、フォントが読み込まれたら更新する必要があります。これは、フォント読み込みAPI (新しいウィンドウで開きます)を使用して実現できます。詳細については、issue 8020 (新しいウィンドウで開きます)を参照してください。