chart.jsのスマホサイズについて

Question

chart.jsを使ってチャートのページを作成しているのですが、
スマホサイズにした際に、左右に余白ができてしまい、小さくなってしまいます。

こちらはCssでは指定していなくjavascriptの中の構文が反映されていると思います。

URLなのですが、会員制のページになるためこちらに掲載することはできません。

ご教授お願いいたします。###HR######IMG0ff048d77633d8b48759759246e52d77e.pngIMG0###

Accepted Answer

ECマスターズの山岡です。

もし項目が固定であれば、
chart.js では、非表示にして
html+cssで追加する方法ではいかがでしょうか？

Answer

ECマスターズの田中です。

まずは、オプション内の layout → padding にて、
４辺全てに対して明示的に0をご指定いただき、
改善されるかご確認をお願いします。
https://www.chartjs.org/docs/latest/configuration/layout.html

Answer

ありがとうございます。

上記のやり方ではなく、
			width100%,height100%にしたところ、うまく行きました。
しかし画像のように各項目の文字がPCサイズだと小さいのが気になります。

チャートのデザインはCSSではなく、スクリプトで変更していかないといけないので
知識がないのでかなり難しいです。。

ちなみに今は	},
			pointLabels: {
				fontSize: 13,
			},
というのが該当するのかと思っているのですが、できたらスマホとPCでサイズを変更したいです。###HR######IMG0cbd15c10847bb473e6baa81c0a23e579.pngIMG0######BR###

Answer

ECマスターズの山岡です。

chart.jsはcanvasに描いているため、CSSでは変更は難しいです。

pointLabelsのfontsize指定はscaleの中に記載してください。
PCとスマホでfontsizeを出し分けするのは難しいです。

scale: {
	pointLabels: {
		fontSize: 20
		},
	ticks: {
		beginAtZero: true
	}
}

Answer

ありがとうございます。
無事できました。
ちなみにグラフ（土台）の線の色を変える指定はどのようにやりますか？
調べても出てこなくて・・

Answer

ECマスターズの塚本です。

いただいたご質問ですが担当より明日回答させていただきます。
回答まで今しばらくお待ちくださいませ。

Answer

ECマスターズの山岡です。

datasets　の　strokeColor　で線の色を変更できます。
ポイントのカラーなども変更できます。

例）
labels: ["ラベル1", "ラベル2", "ラベル3"],
        datasets: [
            {
                label: "Qiita Scouter",
                fillColor: "rgba(200,0,0,0.2)",
                strokeColor: "red",
                pointColor: "red",
                pointStrokeColor: "red",
                pointHighlightFill: "red",
                pointHighlightStroke: "red",
                data: [10780, 87010, 3927]
            }
        ]

Answer

ありがとうございます。

もう一点ですが、上記の３歳１ヶ月のデザインをスクリプト内で変更するにはどのようにやりますか？

できたらbackground-colorとfont-colorとborder-radiusを挿入したいです。

今はこのようなスクリプトが指定してあります。

title: {
				display: true,
				text: '歳ヶ月',
				fontSize: 20,
			},###HR######IMG0d32dea9b8d4a40b5ec1977462eff7746.pngIMG0######BR###

Answer

ECマスターズの山岡です。

公式のドキュメントによると
https://www.chartjs.org/docs/latest/configuration/title.html

fontColor

は使えますが、

background-color
border-radius

は、無理なようです

Answer

とても役にたちました！ありがとうございます。

Answer

申し訳ありません。
もう一点、教えて欲しいのですが
グラフとラベルの文字間隔が狭く、隙間を開けたいのですが
この場合のスクリプト内での間隔はどの指定すればいいでしょうか？
（一応paddingでもトライはしてみました）###HR######IMG03b41eeb239b25df39743c624d5ba8ff2.pngIMG0######BR###

Answer

ECマスターズの山岡です。

paddingだと、ラベル同士の間隔の設定のようです。

公式サイトでもお調べしたのですが、チャートとの
グラフとラベルの間隔を設定が用意されていないようです。