Question

I want to rotate the text for x-axis of graph. Below is the code I am using

context.rotate(20*Math.PI/2);
context.fillText(name, startX + (i * barWidth) + i, chartHeight + 10, 200); 
context.rotate(-20*Math.PI/2);

I am rotating it back to original position after writing the text. But somehow it is not working. Working code can be found at http://intercepter.comli.com/example3.html

I have gone through this article and have tried it but it is just not working. Please help me out

Answer 1

Rotating by 20*Math.PI/2 is similar to not rotating anything, ’cause :

20*Math.PI/2 = 10*Math.PI = 2*Math.PI

Not sure how do you want to rotate your text, but instead of

context.rotate(20*Math.PI/2);
context.fillText(name, startX + (i * barWidth) + i, chartHeight + 10, 200); 
context.rotate(-20*Math.PI/2);

you may try to use transformations like this:

context.save();
context.setTransform(1,0,0,1,0,0);
context.translate(startX + (i * barWidth) + barWidth/2, chartHeight - 10); 
context.rotate(-Math.PI/2);

context.fillText(name, 0, 0, 200);        
context.restore();

See the working DEMO: