Highcharts границы вокруг участка

Question

Так что я пытаюсь сделать highchart, который выглядит следующим образом:

Но я не могу показаться, чтобы получить границу только обернуть бар. Вот ближе я был в состоянии получить:

Кто-нибудь знает, как я могу это сделать? Вот мои варианты:

highcharts({ 
chart: { 
    backgroundColor: 'transparent', 
    plotBorderColor: '#9E9E9E', 
    plotBorderWidth: 2, 
    height: 200, 
    type: 'bar' 
}, 
title: { 
    text: null 
}, 
credits: { 
    enabled: false 
}, 
yAxis: { 
    title: { 
     text: null 
    }, 
    labels: { 
     enabled: false 
    }, 
    tickLength: 0, 
    lineColor: 0, 
    lineWidth: 0, 
    gridLineWidth: 0 
}, 
xAxis: { 
    title: { 
     text: null 
    }, 
    labels: { 
     enabled: false 
    }, 
    tickLength: 0, 
    lineColor: 0, 
    lineWidth: 0 
}, 
plotOptions: { 
    bar: { 
     borderColor: '#000000' 
    } 
}, 
legend: { 
    // reversed: true, 
    symbolHeight: 0, 
    symbolWidth: 0, 
    floating: true, 
    useHTML: true, 
    itemDistance: 10, 
    y: -10, 
    labelFormatter: 
     function() { 
      if (this.name === "HIDDEN") 
      { 
       return ''; 
      } 
      return '<div class="insp360-widgetLegendItemContainer">' + 
        '<div class="insp360-widgetLegendNumber" style="background-color: ' + this.color + '">' + this.yData[0] + '</div>' + 
        '<div class="insp360-widgetLegendName">' + this.name + '</div>' + 
       '</div>'; 
     } 
}, 
plotOptions: { 
    series: { 
     stacking: 'percent', 
     pointWidth: 50 
    } 
}, 
series: [ 
    { 
     name: 'New Business', 
     data: [chartData['New Business'] || 0], 
     color: '#ADD8E6' 
    }, 
    { 
     name: 'Re-Underwriting', 
     data: [chartData['Re-Underwriting'] || 0], 
     color: '#FFBC57' 
    }, 
    { 
     name: 'Consultative Visit', 
     data: [chartData['Consultative Visit'] || 0], 
     color: '#FF5200' 
    }, 
    { 
     name: 'Recommendation Check', 
     data: [chartData['Recommendation Check'] || 0], 
     color: '#B084FF ' 
    }, 
    { 
     name: 'Other', 
     data: [chartData['Other'] || 0], 
     color: '#27AC4C' 
    } 
]; 
}); 

Answer 1

На это можно внести ряд изменений.

рабочий example:

• http://jsfiddle.net/oyge0jLq/1/

Что я обновил:

1. Вы были plotOptions указаны дважды; объединенные в один, чтобы избежать противоречивых значений
2. Удалены декларация высоты от объекта диаграммы и переехали в HTML элемента
3. Установите полее диаграммы, чтобы заставить размер области печати вниз и освободить место для легенды и экспортирующего меню
4. набор мин/макс плюс minPadding/maxPadding на XAxis
5. удалены 'плавающей' из легенды