CODEWITHSUNDEEP
highcharts
michael123
michael123

Reputation: 1

Highcharts tooltip overlapped by absolute positioned element

For my chart, I would like to position an element absolutely on the chart but under the tooltip in terms of stacking, would this be possible?

Example at: http://jsfiddle.net/0vdnrm26/1/, The final tooltip on Asia is being overlapped by the hello world div, ideally the tooltip would be over the hello world.

Upvotes: 0

Views: 543

Answers (1)

Deep 3015
Deep 3015

Reputation: 10075

It is happening like this because absolute position of the div, it is nothing to do with highcharts. Highcharts charts are svg elements and are rendered after.

You can use SVGRenderer#text to have same thing.

var chart = new Highcharts.chart('container', {
  chart: {
    type: 'area'
  },
  title: {
    text: 'Historic and Estimated Worldwide Population Growth by Region'
  },
  subtitle: {
    text: 'Source: Wikipedia.org'
  },
  xAxis: {
    categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
    tickmarkPlacement: 'on',
    title: {
      enabled: false
    }
  },
  yAxis: {
    title: {
      text: 'Billions'
    },
    labels: {
      formatter: function() {
        return this.value / 1000;
      }
    }
  },
  tooltip: {
    valueSuffix: ' millions'
  },
  plotOptions: {
    area: {
      stacking: 'normal',
      lineColor: '#666666',
      lineWidth: 1,
      marker: {
        lineWidth: 1,
        lineColor: '#666666'
      }
    }
  },
  series: [{
    name: 'Asia',
    data: [502, 635, 809, 947, 1402, 3634, 5268]
  }, {
    name: 'Africa',
    data: [106, 107, 111, 133, 221, 767, 1766]
  }, {
    name: 'Europe',
    data: [163, 203, 276, 408, 547, 729, 628]
  }, {
    name: 'America',
    data: [18, 31, 54, 156, 339, 818, 1201]
  }, {
    name: 'Oceania',
    data: [2, 2, 2, 6, 13, 30, 46]
  }]
}, function(chart) { // on complete
  var width = chart.chartWidth - 70;
  chart.renderer.text('Hello World', width, 50)
    .attr({
      //stroke: 'black',
    })
    .add();

});
.wrapper {
  position: relative;
}

/*.some-div {
  position: absolute;
  top: 50px;
  right: 0;
  background: pink;
}*/
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div class="wrapper">
  <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"> </div>
  <!--<div class="some-div">
    hello world
  </div>-->
</div>

Fiddle demo

Upvotes: 1

Related Questions