title: Highcharts border around plot
body: <p>So I am trying to make a highchart that looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/F64ik.png" alt="Desired chart"></p>
  
  <p>But I cant seem to get the border to only wrap the bar. Here's the closest I've been able to get:</p>
  
  <p><img src="https://i.stack.imgur.com/8xKQg.png" alt="Actual chart"></p>
  
  <p>Does anyone know how I can do this? Here are my options:</p>
  
  <pre><code>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 '&lt;div class="insp360-widgetLegendItemContainer"&gt;' +
                      '&lt;div class="insp360-widgetLegendNumber" style="background-color: ' + this.color + '"&gt;' + this.yData[0] + '&lt;/div&gt;' +
                      '&lt;div class="insp360-widgetLegendName"&gt;' + this.name + '&lt;/div&gt;' +
                  '&lt;/div&gt;';
          }
  },
  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'
      }
  ];
  });
  </code></pre>