Tweet

グラフの余白を調節する方法を紹介します。

何も指定しない場合、以下のようなグラフになります(違いがわかるように、div要素に枠線を引いてます)。

描画領域における、グラフの周囲の余白(マージン)を調整するには、chart.marginプロパティを設定すればよいです。上下左右のマージンの値を 100 に設定すると、以下のようなグラフになります。

以下に、JavaScriptのコードを抜粋します。

marginChart = new Highcharts.Chart({
                        chart: {
                            renderTo: 'sample-margin-chart',
                            type: 'line',
                            margin: [100, 100, 100, 100] // ここでマージン(上右下左)を設定
                        },
                         :

上右下左の、いずれかのマージンだけを指定したい場合は、marginTop, marginRight, marginBottom, marginLeftの4つのプロパティを利用できます。Highchartsのバージョンが2.1以上の場合は、代わりにspacingTop, spacingRight, spacingBottom, spacingLeftの4つのプロパティを利用します。

目盛の値と、軸の間の余白を調整するには、xAxis.offsetプロパティやyAxis.offsetプロパティを利用します。

以下に、JavaScriptのコードを抜粋します。

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    offset: 25 // x軸と、x軸目盛の値の差
},
yAxis: {
    title: {
        text: '気温'
    },
    offset: 25 // y軸と、y軸目盛の値の差
},
  :

お問い合わせは sweng.tips@gmail.com まで。