The Line charts textAngle property is not working

« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by RK on 4th August 2016
I am trying to use the textAngle property for a line chart. I have added the following libraries in the code.


I am using version 4.55.

code is copied below-

var line = new RGraph.Line({
                     id: 'cvs',
                     data: data,
                     options: {
                         title: 'Test Report',
                         labels: labels,
                         textAngle: 45,

                         key: ['Value1', 'Value2', 'Value3', 'Value4'],
                         keyPositionGraphBoxed: true,
                         keyPositionX: 670,
                         keyPositionY: 100,
                         textSize: 9,
                         gutterRight: 150,
                         titleXaxis : 'Months',
                         titleYaxis : 'Totals',
                         titleYaxisPos: 0.15,
                         titleXaxisPos: -1.25,
                         textAccessible: true
Posted by Richard on 4th August 2016

To use angled text you'll need to set the textAccessible property to false - currently angled text is only supported with native canvas text:

textAccessible: false,

Posted by Berjawi on 8th December 2016
You can use textAccessible for DOM and then rotate label using CSS instead of textAngle.

Here's my solution:

<!DOCTYPE html >
     <script src="../js/RGraph.common.core.js" ></script>
     <script src="../js/RGraph.line.js" ></script>
     <script src="//" ></script>
     <script src="//"></script>
     <link rel="stylesheet" href="//">

  <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

      var activityName = ["Formulaire d'\u00e9valuation - Initiation","Pr\u00e9requis 1\u00e8re partie - L'\u00e9pargne salariale, vrai relais de croissance","Pr\u00e9requis 2\u00e8me partie - L'\u00e9pargne salariale : comment cela fonctionne ?","Pr\u00e9requis 3\u00e8me partie - Les questions cl\u00e9 pour la mise en place de plans d'\u00e9pargne salariale"];
      var value = [75,90,85,80];
      var mychart = new RGraph.Line({
         id: 'cvs',
         data: [value],
         options: {
             textAccessible: true,
      ymin: 0,
      ymax: 100,
             ylabelsCount: 10,
             backgroundGridAutofitNumhlines: 10,
             colors: ['rgba(151,201,1,1)','rgba(174,181,229,1)', 'rgba(255,93,93,1)'],
             hmargin: 15,
             backgroundGridVlines: false,
             backgroundGridBorder: false,
             gutterBottom: 70,
             tickmarks: 'filledsquare',
             labels: ["Activit\u00e9 1","Activit\u00e9 2","Activit\u00e9 3","Activit\u00e9 4"],
      //Show real activityName onmouseover labels
       $( document ).tooltip();
      //find labels that has 'Acitivit_' in its id
       $('span').each(function() {
        var id = $(this).attr('id');
        if (id && id.includes('Activit_'))
          var index = id.split('Activit_');
          index = index[1].split('_') ;
          index = index[0];
          //find the real title
          $(this).attr('title', activityName[index -1]);
          //css cursor
          $(this).css('cursor', 'pointer');
          //css rotate span
          $(this).css('-webkit-transform', 'rotate(-60deg)');
          $(this).css('-moz-transform', 'rotate(-60deg)');
          $(this).css('transform', 'rotate(-60deg)');
          $(this).css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)');

Posted by Richard on 8th December 2016

Thanks. I knew about CSS transforms, but just hadn't got around to addinf it in. I'll look into it for the next release though.

Posted by Richard on 31st December 2016
Hi there,

Ok I've added this, here's the changelog entry:

Added angled accessible text to the canvas libraries. This should be
considered BETA quality code at the moment, but it seems to be OK.
You may need to use the labelsOffsety when using this option -
particularly if you have multi-line text.

It will be a part of the next stable release.


Add a reply

« Back to message list