CODEWITHSUNDEEP
javascripthighcharts
user1137338
user1137338

Reputation:

Add rectangle to highchart

Im trying to add a box (Html or whatever) between a set of y&x cordinates in a plot chart. Basically a box between x20 & y25 but cant find the numbers to calcualte the proper width & height of the box nor set the proper x,y cordinates for placing the box. Tried render a rectangle and a label as the fiddle example suggest but just doesnt get it.

http://jsfiddle.net/qnp5tg0h/

var chart = new Highcharts.Chart(options);

chart.renderer.label('1,99 %', chart.xAxis[0].left,265)
                    .attr({
                        r: 0,
                        width: 97,
                        height: 66,
                        fill: 'blue'
                    })
                    .css({
                        color: 'white',
                        fontWeight: 'bold'
                    })
                    .add();
        });

Upvotes: 1

Views: 2449

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

Solution is to use chart.x/yAxis[0].toPixels(value). That will translate from value on a chart, to pixel position: http://jsfiddle.net/qnp5tg0h/1/

        var chart = new Highcharts.Chart(options);

        var x1 = chart.xAxis[0].toPixels(0),
            x2 = chart.xAxis[0].toPixels(20),
            y1 = chart.yAxis[0].toPixels(0),
            y2 = chart.yAxis[0].toPixels(25);

        chart.renderer.rect(x1, y2, x2 - x1, y1 - y2)
            .attr({
            fill: 'blue'
        }).add();

I'm rendering only rect, because label can have some extra padding which will mess up rect. Now the same way add text using chart.renderer.text() method.

NOTE: Point (0,0) in SVG is top left corner of the viewport.

Upvotes: 5

Related Questions