Highcharts Demo

author(s): Torstein Hønsi

by YameenYasin

HTML

<div id="box"></div>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="graf1" style="width: 400px; height: 250px; float:left"></div>

CSS

.label {
  z-index: 1;
}

.highcharts-container {
  position: inherit !important;
}

.highcharts-tooltip span {
   z-index: 9999;
} 

.tooltip1 {
  background-color: white;
}

#box {
  position: absolute;
  background: pink;
  left: 0;
  height: 1000px;
  width: 180px;
  top: 150px;
}

JavaScript

$(function() {
  var chart;
  $(document).ready(function() {
    chart = new Highcharts.Chart('graf1', {
      chart: {
        renderTo: 'graf1',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
      },

      title: {
        margin: 40,
        text: 'Podíl všech potřeb'
      },
      tooltip: {
        backgroundColor: "rgba(255,0,0,0)",
        borderWidth: 0,
        borderRadius: 0,
        shadow: false,
        useHTML: true,
        outside: true,
        percentageDecimals: 2,
        formatter: function() {
          return '<div class="tooltip1" style="border: 1px solid ' + this.point.color + '; padding: 3px;">' + this.point.name + '<br /><span style="color: ' + this.point.color + '">&#9679;</span>' + Highcharts.numberFormat(this.y).replace(",", " ") + ' Kč [' + Highcharts.numberFormat(this.percentage, 2) + '%]</div>'
        }
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            zIndex: 1,
            enabled: false,
            color: '#000000',
            connectorWidth: 2,
            useHTML: true,
            formatter: function() {
              return '<span style="color:' + this.point.color + '"><b>' + this.point.name + '</b></span>';
            }
          }
        }
      },
      series: [{
        type: 'pie',
        name: 'Potřeba',
        data: [
          ['Firefox', 45.0],
          ['IE', 26.8], {
            name: 'Chrome',
            y: 12.8,
            sliced: true,
            selected: true
          },
          ['Safari', 8.5],
          ['Opera', 6.2],
          ['What happens when one has a really long name so that it is forced to wrap, which on mine causes the width of the div to be permanently larger', 0.7]
        ]
      }]
    });
  });
});