CODEWITHSUNDEEP
angularjshighcharts
n.Ken
n.Ken

Reputation: 133

Highcharts - How to specify dimensions of rectangles

I working with highcharts in angularjs and I want to change the background like in the picture. Also, I want to be able to specify dimentions of rectangles enter image description here

UPDATE The problem is when I give the parameters to draw my rectangles, it's affecting all the div and what I want is to draw the rectangles on my chart surface only. The problem is because of "this" which I'm using in my code and I want now to replace it with chart. enter image description here

Upvotes: 2

Views: 237

Answers (1)

Barbara Laird
Barbara Laird

Reputation: 12717

You can use the renderer to draw arbritary squares on a chart. You can also use the Axis function toPixels to convert values to pixels. I have a function that takes x and y values and draws a square. If you butted those squares together you could have your regions.

var drawSquare = function(x1,x2,y1,y2,color) {
    x1 = chart.xAxis[0].toPixels(x1);
    x2 = chart.xAxis[0].toPixels(x2);
    y1 = chart.yAxis[0].toPixels(y1);
    y2 = chart.yAxis[0].toPixels(y2);

    var width = x2 - x1;
    var height = y1 - y2;  

    chart.renderer.rect(x1,y2,width, height, 0)
        .attr({
            fill: color,
            zIndex: 0
        })
        .add();
};

drawSquare(0,40,0,35,'rgba(129,184,222,.5)');
drawSquare(40,100,0,35,'rgba(255,223,134,.5)');
drawSquare(0,40,35,150,'rgba(130,215,169,.5)');
drawSquare(40,100,35,150,'rgba(183,153,206,.5)');

http://jsfiddle.net/Lh74L8vu/1/

Upvotes: 2

Related Questions