Highcharts Demo

author(s): Torstein Hønsi

by kzoon

HTML

<script src="https://code.highcharts.com/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": {
            "reflow": false,
            "type": "column",
            "animation": false,
            "borderRadius": 0,
            "backgroundColor": "rgba(255,255,255,1)",
            "plotBackgroundColor": "rgba(255,255,255,0)",
            "spacingRight": 0,
            "spacingBottom": 10,
            "spacingLeft": 0,
            "marginRight": 10,
            "marginLeft": 10,
            "scAnimateChanges": false
        },
        "drilldown": {},
        "title": {
            "text": "",
            "margin": 0
        },
        "subtitle": {
            "text": "",
            "margin": 0
        },
        "legend": { "enabled": false },
        "tooltip": {
            "enabled": true,
            "backgroundColor": "rgba(255,255,255,1)",
            "style": {
                "fontFamily": "'Lucida Grande', 'Lucida Sans Unicode'",
                "fontSize": "11px",
                "color": "rgba(60,60,60,1)"
            },
            "useHTML": true,
            "backgroundColor": "rgba(255,255,255,1)",
            "hideDelay": 10,
            "outside": true
        },
        "plotOptions": {
            "column": {
                "animation": false,
                "shadow": false,
                "stickyTracking": false,
                "zIndex": 11,
                "dataLabels": {
                    "enabled": true,
                    "borderColor": "rgba(0,0,0,1)",
                    "style": {
                        "fontFamily": "'Lucida Grande', 'Lucida Sans Unicode'",
                        "fontSize": "11px",
                        "fontWeight": "normal",
                        "color": "rgba(60,60,60,1)",
                        "textOutline": false,
                        "textAlign": "center"
                    },
                    "allowOverlap": true,
                    "useHTML": true,
                    "scFormat": {
                        "yValue": {...