2017-09-12 3 views
0

データラベルがバーの内側に表示されることがあります。 たとえば、「アジア」のバーのjsfiddleには、バーの内側にデータラベルが表示されています。 バーの外側に常にデータラベルを表示する方法はありますか?バーの内部にデータラベルが表示されることがある

http://jsfiddle.net/n3me6r8k/

Highcharts.chart('container', { 
    chart: { 
     type: 'bar' 
    }, 
    title: { 
     text: 'Historic World Population by Region' 
    }, 
    subtitle: { 
     text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>' 
    }, 
    xAxis: { 
     categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'], 
     title: { 
      text: null 
     } 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: 'Population (millions)', 
      align: 'high' 
     }, 
     labels: { 
      overflow: 'justify' 
     } 
    }, 
    tooltip: { 
     valueSuffix: ' millions' 
    }, 
    plotOptions: { 
     bar: { 
      dataLabels: { 
       enabled: true 
      } 
     } 
    }, 
    credits: { 
     enabled: false 
    }, 
    series: [{ 
     name: 'Year 2012', 
     data: [1052, 954, 4250, 740, 38] 
    }] 
}); 
+0

外にそれを維持するために十分なスペースがないので、それが内部に示されています – mxr7350

答えて

1

はい、それはつまり、あなたのdataLabels構成でより多くの2つのparamsを設定することによって行うことができる:

dataLabels: { 
     enabled: true, 
     crop: false, 
     overflow: "none" 
} 

それができるとき、通常、Highchartsはバーの内側にラベルを移動しますdivの枠で切り取られます。上記の設定では、ラベルがチャートコンテナから抜けていても、ラベルが切り取られないように設定できます。

JSFiddle:http://jsfiddle.net/daniel_s/8m1b4arv/

APIリファレンス:http://api.highcharts.com/highcharts/series%3Cbar%3E.dataLabels.crop

関連する問題