CODEWITHSUNDEEP
angularjshighcharts
n.Ken
n.Ken

Reputation: 133

Highcharts - drawing rectangle with angularjs

I'm working with highchart and angular and I'm following this example to draw rectangles inside my chart: http://jsfiddle.net/Lh74L8vu/23/

drawSquare(139.42857142857144,216.73333333333335, 28.97142857142856,11.039999999999992,'rgba(130,215,169,.4)');

        drawSquare(139.42857142857144, 171.34666666666666, 144.85714285714283, 45.386666666666684,'rgba(255,223,134,.4)');
  drawSquare(168.4, 216.73333333333335, 115.88571428571427, 11.039999999999992,'rgba(255,223,134,.4)');

        drawSquare(139.42857142857144, 116.14666666666668, 289.7142857142857, 55.19999999999999,'rgba(255,102,102,.4)');
  drawSquare(284.2857142857143, 171.34666666666666, 144.8571428571429, 56.42666666666668,'rgba(255,102,102,.4)');

It gives this (picture) I don't know what is the problem ! any help please !!

enter image description here

Upvotes: 0

Views: 1001

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

In comments, you say you don't want to work with pixels, but you already do. I think you should change logic a bit: don't use pixels at all, just use numeric values on x/yAxis. Then use Axis.toPixels() method to get pixel position on the chart. For example: http://jsfiddle.net/c57L3cj2/3/

function myRedraw (e) {
  var chart = this;
  if (!chart.rects) {
    var drawSquare = function(x1, y2, width, height, color) {
      var y_px = chart.yAxis[0].toPixels(y2) - height,
        x_px = chart.xAxis[0].toPixels(x1);

      chart.renderer.rect(x_px, y_px, width, height, 0)
        .attr({
          fill: color,
          zIndex: 0
        })
        .add();
    };
    chart.rects = true;
    drawSquare(5, 0, 28.97142857142856, 11.039999999999992, 'rgba(130,215,169,.4)');
  }
}

I don't know how func works in highcharts-ng, but for me it's broken, so I'm using chart.events.redraw() callback instead:

$scope.config1 = {
  options: {
    chart: {
      events: {
        redraw: myRedraw
      }
    }
  },
  series: [{
    data: [
      [5, 1.258],
      [30, 114]
    ]
  }],
  xAxis: {
    min: 0,
    max: 35,
    tickInterval: 5
  },
  yAxis: {
    min: 0,
    max: 120,
    tickInterval: 20
  }
}

Upvotes: 0

Related Questions