AmChart move labelText to right a few pixels

Question

I'm trying to move label test to right few pixels because the way it's displayed now it looks like it is more to the left:

Label text is aligned to center for 2d bar charts but when you have 3d bars you have this slight offset effect to left that needs to be corrected.Label position values are: "bottom", "top", "right", "left", "inside", "middle". I wasn't able to fine tune it.

Any ideas on this?

The labels are more or less centered with respect to the `angle` setting when using 3D. There isn't an API-specific setting to fine-tune the labels left or right, so you're better off using the `drawn`/`rendered` events to select the labels using DOM methods and adjust the position that way. If you need more help with this, update the question with a fiddle that reproduces your chart. — xorspark, Apr 13 '18 at 16:13
http://jsfiddle.net/cdedu/wc12oxdh/18/ -> this is an example close to my chart. I did not spent time updating the colors and all that. But you get the same problem as the label is a bit to the left. so this jsfiddle pretty much describes my problem. — otto, Apr 15 '18 at 17:56

xorspark · Accepted Answer · 2018-04-16T11:40:46.273

As mentioned in my comment, the labels are centered with respect to the angle setting for 3D charts. The API doesn't allow you to shift the label left or right, so you have to manipulate the graph SVG nodes directly through the drawn event. If you set addClassNames to true, you can retrieve the label elements using document.querySelectorAll through the generated DOM class names and then modifying the translate value in the transform attribute accordingly. You can use a technique from this SO answer to easily manipulate the transform attribute as an object:

// ...
  "addClassNames": true,
  "listeners": [{
    "event": "drawn",
    "method": function(e) {
      Array.prototype.forEach.call(
        document.querySelectorAll(".amcharts-graph-g4 .amcharts-graph-label"),
        function(graphLabel) {
          var transform = parseTransform(graphLabel.getAttribute('transform'));
          transform.translate[0] = parseFloat(transform.translate[0]) + 5; //adjust X offset
          graphLabel.setAttribute('transform', serializeTransform(transform));
      });
    }
  }]
// ...

// from http://stackoverflow.com/questions/17824145/parse-svg-transform-attribute-with-javascript
function parseTransform(a) {
  var b = {};
  for (var i in a = a.match(/(\w+\((\-?\d+\.?\d*e?\-?\d*,?)+\))+/g)) {
    var c = a[i].match(/[\w\.\-]+/g);
    b[c.shift()] = c;
  }
  return b;
}

//serialize transform object back to an attribute string
function serializeTransform(transformObj) {
  var transformStrings = [];
  for (var attr in transformObj) {
    transformStrings.push(attr + '(' + transformObj[attr].join(',') + ')');
  }
  return transformStrings.join(',');
}

Updated fiddle

thanks! It worked for me with `animationFinished` event due to animations set in my chart but this is the solution — otto, Apr 17 '18 at 15:48

AmChart move labelText to right a few pixels

1 Answers1