LoginSignup
0
1

More than 5 years have passed since last update.

Chart.jsで円グラフのlegend(横とかにつくラベル)の横幅が調整できない問題

Posted at

どうやら、改行はサポートしてくれないらしい。

スクリーンショット 2018-01-23 17.02.59.png

ふざけんな!!!

日本語できちんとラベルを付けると、グラフが。。。笑

スクリーンショット 2018-01-23 17.03.50.png

かわいいっすね。

文字サイズを無理やり調整すればいいのでは?

editor.js
var label_array = [
'ラベル1',
'ラベル2'.
'ラベル3ラベル33ラベル33ラベル33ラベル33ラベル3'
];

var stringLength = 0;
label_array.forEach(function(value){
            stringLength = value.length > stringLength ? value.length : stringLength ;
});
var labelWidth = 200;
var fontSize = labelWidth / stringLength;

fontSize = fontSize > 16 ? 16 : fontSize;

...

legend: {
    position: 'right',
    fullWidth:false,
    labels : {
        boxWidth : 20,
        fontSize : fontSize,
    }
},

それっぽくなった

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1