title: Highcharts bar format datalabels to percent and add text
body: <p>I have highcharts bar.</p>
  
  <p>How I can format my datalabel to percent and add text datalabels (how i can reposition this text? It's need me for create vertical version of this bar) ? </p>
  
  <p>In the end, it should turn out like this in a horizontal or vertical solution.</p>
  
  <p><a href="https://i.stack.imgur.com/0p6Qy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0p6Qy.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/5NvoO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5NvoO.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Highcharts.chart('container', {
      chart: {
          type: 'bar'
      },
      title: {
          text: 'Activity'
      },
      xAxis: {
          categories: ['Activity']
      },
      yAxis: {
          min: 0,
          title: {
              text: ''
          }
      },
      legend: {
          reversed: true
      },
      plotOptions: {
          series: {
           borderWidth: 0,
              stacking: 'normal',
              pointWidth: 3,
              dataLabels: {                
                  enabled: true,
                  y: 2,
                  verticalAlign: 'top',
                  align: 'left',
                  color: '#000000',
               style: {
                      textOutline: false 
                  }
              }
          }
      },
      series: [{
          name: 'One',
          data: [10],
          color: '#f45b69'
      }, {
          name: 'Two',
          data: [20],
          color: '#44bba4'
          
      }, {
          name: 'Three',
          data: [30],
          color: '#ff9f1c'
      }]
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  
  &lt;div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>