막대의 시작 부분에 하이 차트 막대 차트에 경계 추가

Question

막대 그래프 주위에 경계선이있는 하이 차트로 작성된 막대 차트가 있습니다. 그러나 눈금 선과 눈금을 비활성화했습니다. 전체 막대가 막대의 가장 왼쪽 가장자리를 포함하는 경계에 포함되도록하고 싶습니다. 막대의 해당 부분에 테두리를 추가 할 수 있습니까?

http://jsfiddle.net/9csjzsx5/

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'bar', 
      width: 265, 
      height: 350 
     }, 
     credits: { 
      text: '' 
     }, 
     title: { 
      text: '' 
     }, 
     xAxis: { 
      labels: { 
       align: 'left', 
       x: 0, 
       y: -12 
      }, 
      tickWidth: 0, 
      lineWidth: 0, 
      minorGridLineWidth: 0,    
      categories: ['Label 1', 'Label 2', 'Label 3', 'Label 4', 'Label 5', 'Label 6', 'Label 7', 'Label 8', 'Label 9'] 
     }, 
     yAxis: { 

      minorGridLineWidth: 0, 
      majorGridLineWidth: 0, 

      gridLineWidth: 0, 
      labels: { 
       enabled: false 
      }, 
      title: { 
       text: '', 
       align: 'high' 
      }, 
      tickWidth: 0 
     }, 
     plotOptions: { 
      bar: { 
       colorByPoint: true, 
       colors: ['#4572A7', '#AA4643', '#89A54E', '#80699B', '#3D96AE', '#DB843D', '#92A8CD', '#A47D7C', '#B5CA92'] 
      }, 
      series: { 
       stacking: 'normal', 
       borderColor: '#303030' 
      } 
     }, 
     series: [{ 
      data: [{ 
       dataLabels: { 
        enabled: true, 
        defer: false, 
        align: 'right', 
        color: 'black', 
        x: 0, 
        format: '{y}%', 
        style: { 
         fontSize: '12px', 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', 
        } 
       }, 
       y: 9, 
       color: 'white' 
      }, { 
       dataLabels: { 
        enabled: true, 
        defer: false, 
        align: 'right', 
        color: 'black', 
        x: 0, 
        format: '{y}%', 
        style: { 
         fontSize: '12px', 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', 
        } 
       }, 
       y: 9, 
       color: 'white' 
      }, { 
       dataLabels: { 
        enabled: true, 
        defer: false, 
        align: 'right', 
        color: 'black', 
        x: 0, 
        format: '{y}%', 
        style: { 
         fontSize: '12px', 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', 
        } 
       }, 
       y: 8, 
       color: 'white' 
      }, { 
       dataLabels: { 
        enabled: true, 
        defer: false, 
        align: 'right', 
        color: 'black', 
        x: 0, 
        format: '{y}%', 
        style: { 
         fontSize: '12px', 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', 
        } 
       }, 
       y: 9, 
       color: 'white' 
      }, { 
       dataLabels: { 
        enabled: true, 
        defer: false, 
        align: 'right', 
        color: 'black', 
        x: 0, 
        format: '{point.name}%', 
        style: { 
         fontSize: '12px', 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', 
        } 
       }, 
       y: 10, 
       name: '<0.001', 
       color: 'white' 
      }, { 
       dataLabels: { 
        enabled: true, 
        defer: false, 
        align: 'right', 
        color: 'black', 
        x: 0, 
        format: '{point.name}%', 
        style: { 
         fontSize: '12px', 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', 
        } 
       }, 
       y: 10, 
       name: '<0.001', 
       color: 'white' 
      }, { 
       dataLabels: { 
        enabled: true, 
        defer: false, 
        align: 'right', 
        color: 'black', 
        x: 0, 
        format: '{point.name}%', 
        style: { 
         fontSize: '12px', 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', 
        } 
       }, 
       y: 10, 
       name: '<0.001', 
       color: 'white' 
      }, { 
       dataLabels: { 
        enabled: true, 
        defer: false, 
        align: 'right', 
        color: 'black', 
        x: 0, 
        format: '{point.name}%', 
        style: { 
         fontSize: '12px', 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', 
        } 
       }, 
       y: 10, 
       name: '<0.001', 
       color: 'white' 
      }, { 
       dataLabels: { 
        enabled: true, 
        defer: false, 
        align: 'right', 
        color: 'black', 
        x: 0, 
        format: '{point.name}%', 
        style: { 
         fontSize: '12px', 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black', 
        } 
       }, 
       y: 10, 
       name: '<0.001', 
       color: 'white' 
      }], 
      showInLegend: false, 
      pointWidth: 15, 
     }, { 
      data: [2, 2, 3, 2, 1, 1, 1, 1, 1], 
      showInLegend: false, 
      pointWidth: 15, 
     }] 
    }); 
}); 

누락 된 테두리 하단 색상에 특히 분명하지만 인쇄 될 때 그들 모두에서 볼 수 있습니다 : 당신은 여기 내 차트를 볼 수 있습니다.

Answer 1

국경은 실제로 있지만, 축을 넘어서 숨겨져 있습니다.

이 같은 약간 덜 제로 다음 분을 설정하고 false로 startOnTick을 설정하면 테두리가 나타납니다

yAxis: { 
min:-.1, 
startOnTick:false, 
} 

• http://jsfiddle.net/9csjzsx5/1/