CODEWITHSUNDEEP
angularjschartshighchartshighcharts-ng
Pratik Rawlekar
Pratik Rawlekar

Reputation: 327

Get left and top position of highcharts scrollbar

I wanted to put custom label on highcharts which should be placed on left side of scrollbar. How can I get top and left position of scrollbar.?

I have put label with following code 

chart.renderer.text('<span style="font-weight:600;"> 1-21 </span>', 20, 120)
        .css({
            color: 'green',
            fontSize: '12px'
        })
        .add();

Upvotes: 0

Views: 1207

Answers (2)

Paweł Fus
Paweł Fus

Reputation: 45079

You can get position of the scrollbar using chart.xAxis[0].scrollbar.group.translateX and chart.xAxis[0].scrollbar.group.translateY, for example: https://codepen.io/anon/pen/KeBxNj?editors=1010

Snippet:

var chart = Highcharts.chart('container', {
  chart: {
    type: 'bar',
    marginLeft: 150,
    events: {
      load: function () {
        var scrollbar = this.xAxis[0].scrollbar,
            bbox;
        // Render:
        this.customLabel = this.renderer.text('<span style="font-weight:600;"> 1-21 </span>', 0, 0).attr({
          zIndex: 5
        }).add();
        // Get bbox
        bbox = this.customLabel.getBBox();

        // Position label
        this.customLabel.attr({
          x: scrollbar.group.translateX - bbox.width,
          y: scrollbar.group.translateY + bbox.height
        });
      }
    }
  },
  ...
});

Upvotes: 2

samuellawrentz
samuellawrentz

Reputation: 1732

You can determine the scrollbar's left position using the chart.plotWidth + chart.plotLeft - 25. Also, the top position can be got using chart.plotTop + 10. The numeric values are just top and left paddings.

Please have a look at this codepen. https://codepen.io/samuellawrentz/pen/eKjdpN?editors=1010

Hope this helps :)

Upvotes: 0

Related Questions