Highcharts Demo

author(s): Torstein Hønsi

by kzoon

HTML

<script src="http://github.highcharts.com/master/highcharts.js"></script>

<h1>Tooltip outside the box</h1>
<div id="outer">
  <div class="container" id="container1"></div>

</div>

CSS

#outer {
  max-width: 420px;
  margin: 1em auto;
}

.container {
  width: 100px;
  height: 200px;
  display: inline-block;
}

JavaScript

Highcharts.chart('container1', {



  chart: {
    type: 'column',
    backgroundColor: '#FCFFC5',
  },
  title: {
    text: ''
  },

  legend: {
    "enabled": false
  },
  tooltip: {
    useHTML: true,
    outside: true,
    formatter: function() {
      //return this.series.name;
      return 'multiline ' + this.series.name;
    },

  },

  yAxis: {
    title: {
      enabled: false
    }
  },
  series: [{

    data: [40103],
    name: 'abcdefghijklmnopqrstuvwxyz'
  }]



});