Help with data labels shifting toward the boundary direction as more data is added


« 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 Stuart Andrews on 9th May 2017
Hi Richard,

Am having an issue with the data labels shifting toward the boundary direction.

It's happening both with the showLabels and using Text2.

Here's a screenshot: imgur.com/lgcQldr

And here's the code:

--


   //<![CDATA[
   $(document).ready(function() {
     var graph_ZD8W8 = new RGraph.Bar({
       id: "canvas_ZD8W8",
       data: [9,10,9,14,18,11,17,6,6,12,17,10],
       options: {
         colors: ["#3EA254"],
         gutterBottom: 140,
         gutterTop: 50,
         gutterLeft: 50,
         gutterRight: 10,
         ylabels: false,
         noaxes: true,
         shadowOffsetx: 1,
         shadowOffsety: 1,
         shadowBlur: 10,
         textAngle: 70,
         labels: ["May 2016","June 2016","July 2016","August 2016","September 2016","October 2016","November 2016","December 2016","January 2017","February 2017","March 2017","April 2017"],
         tooltips: ["May 2016","June 2016","July 2016","August 2016","September 2016","October 2016","November 2016","December 2016","January 2017","February 2017","March 2017","April 2017"],
         labelsAbove: true,
       }
     });
     graph_ZD8W8.on("draw", function(obj) {
       var vTextYPos = 40;
       for (var i=0; i < obj.coords.length; i++) {
         obj.context.fillStyle="black";
         var vTextVal = obj.data_arr[i];
         var text1_ZD8W8 = RGraph.Text2(obj.context, {
           x: obj.coords[i][0] + (obj.coords[i][2]/2),
           y: vTextYPos,
           text: vTextVal,
           size: 10,
           valign: "center",
           halign: "center",
           bounding: true,
           boundingFill: "white",
           marker: false,
           angle: 0
         });
       }
     });
     graph_ZD8W8.draw();

     var key_ZD8W8 = RGraph.HTML.Key("key_ZD8W8", {
       colors: ["#3EA254"],
       labels: ["Listings"],
       blobCss: {
         "border": "1px solid #333;",
       },
       tableCss: {
         "position": "absolute",
       }
     });
   });
   //]]>


--

Is there anything you can see that might be causing this to happen?

Cheers
Posted by Richard on 9th May 2017
Hi,

No idea I'm afraid I've setup an example to try and replicate it but without joy:

www.rgraph.net/fiddle/view.html/labelsabove-labels-shifting

So perhaps try upgrading to 4.62 if you haven't tried that.



Richard
Posted by Stuart Andrews on 10th May 2017
Found it!

For some forgotten reason (I think copied+pasted from my early RGraph code a few years back) the <canvas> element had some style="" values, including "padding: 10px;". Not cool!

Removed that, and it's functioning fine.

Thanks Richard!

Cheers

Add a reply

 




« Back to message list
RGraph on social media