plotly.jsグラフでロングティックラベルが途切れる

Question

plotly.jsに目盛りラベルのためのスペースを増やすことはできますか？私のグラフの長いラベルが切れています。

HTML：

<div id="plot"></div> 

はJavaScript：

var data = [{ 
    type: 'bar', 
    x: [20, 14, 23], 
    y: ['giraffes', 'orangutans', 'a looooooooong string'], 
    orientation: 'h' 
}]; 

var layout = { 
    title: 'Bar Chart' 
}; 

Plotly.newPlot('plot', data, layout); 

私はAPI for y-axes tick settingsでこれを行う方法を見ることができません。

私のチャートの性質を考えると、私は水平方向を使用する必要があります。したがって、私が使用できない解決策は、ティックが90度回転した垂直方向です。

Answer 1

プロットチャートの余白を調整して、余裕を持たせることができます。たとえば、変更：ここhttps://plot.ly/javascript/setting-graph-size/ と全体的なレイアウトオプション：https://plot.ly/javascript/#layout-options

Answer 2

ます。また、ベース、動的にマージンを設定することができ

var layout = { 
    title: 'Bar Chart' 
}; 

あなたがここに余白を調整についての詳細を読むことができます

var layout = { 
    title: 'Bar Chart', 
    margin:{ 
    l:200 
    } 
}; 

へラベルの長さ：

var maxLabelLength = d3.max(data, d => d3.max(d.y, label => label.length)); 
const letterWidth = 7; 
var layout = { 
    title: 'Bar Chart', 
    margin:{ 
    l: maxLabelLength * letterWidth 
    } 
};