javascript - ハイストックY軸ラベルは互いに重なり合っています

Question

私が作成しているチャートについては、このフィドルをご覧ください。

私の問題は次のとおりです。

• Y軸のラベルとパーセンテージが重なっています。緑のパーセンテージ、ラベル「Two」、赤のパーセンテージ、最後にラベル「Three」になるようにそれらを整列させることは可能ですか？別のフィドルを見ると、確かにきれいに見えます。
• Highstockは、グラフグリッド内にラベルを表示します。これらを外側に押し出して、2番目のJSFiddleが表示するようにラベルを表示することはできますか？

最初の問題は私が解決するために最も重要であり、2番目の問題は私がしなければならない場合に一緒に暮らすことができます：

chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container',
            zoomType: 'xy'
        },

        rangeSelector: {
            selected: 4
        },

        yAxis: [{
             title: {
                text: 'One',
                style: {
                    color: 'blue'
                }
            },
            labels: {
                formatter: function() {
                    return (this.value > 0 ? '+' : '') + this.value + '%';
                }
            }
        },
        {

             title: {
                text: 'Two',
                style: {
                    color: 'green'
                }
            },
            labels: {
                formatter: function() {
                    return this.value + '%';
                },
                style: {
                    color: 'green'
                }
            },
  opposite: true
        },
{

             title: {
                text: 'THree',
                style: {
                    color: 'red'
                }
            },
            labels: {
                formatter: function() {
                    return this.value + '%';
                },
                style: {
                    color: 'red'
                }
            },
  opposite: true
        }  
      ],

        plotOptions: {
            series: {
                compare: 'percent'
            }
        },

        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
            valueDecimals: 2
        },

        series: seriesOptions
    });
}

});​

Answer 1

yAxis.labels.xとyAxis.title.marginの組み合わせを使用して、これらの位置を制御できます。

たとえば、最初のyAxis：

        {
             title: {
                text: 'One',
                style: {
                    color: 'blue'
                },
                margin: 25 //push out 25 pixels
            },
            labels: {
                formatter: function() {
                    return (this.value > 0 ? '+' : '') + this.value + '%';
                },
                x: -20 //push out 20 pixels
            }
        }

ここでフィドルを更新しました。