CODEWITHSUNDEEP
labelbackground-coloramcharts
Jerald Feller
Jerald Feller

Reputation: 33

AmCharts Adding Background Color to valueAxes guides label

How can I add background color to valueAxes guides label? Seems like there is no options that we can set or I just really dont know what it is. This is current setup that I have in amcharts

$chart = AmCharts.makeChart( "chartdiv", {
            "type": "serial",
            "theme": "light",
            "dataProvider": $data_trade,
            "valueAxes": [ {
                "position": "right",
                "guides": [ {
                    "value": $tickValue,
                    "label": $tickValue,
                    "position": "right",
                    "dashLength": 0,
                    "axisThickness": 1,
                    "fillColor": "#000",
                    "axisAlpha": 1,
                    "fillAlpha": 1,
                    "color": "#000",
                    "fontSize": 16,
                    "backgroundColor": "#008D00",
                    "labelColorField": "red",
                },

                ],

            } ],

            ../
        } );

please see image for reference

image-screenshot

Im new here, I hope I can get help

Thanks

Upvotes: 1

Views: 2112

Answers (1)

xorspark
xorspark

Reputation: 16012

There isn't a built-in way to do this currently but you can use the same technique in this demo to create a colored box around your label in the drawn event by changing the selector to .amcharts-axis-label.amcharts-guide to target the guide label and apply your color there. Note that the demo doesn't set individual colors, but the drawn event gives you access to the chart object if you want to pull the color from your custom backgroundColor properties:

AmCharts.makeChart("...", {
  // ...
  "valueAxes": [{
    // ...
    "guides": [{
      "value": 4.5,
      "label": "4.5",
      "backgroundColor": "#22ff11" //custom property for drawn event
    }, {
      "value": 7.5,
      "label": "7.5",
      "backgroundColor": "#11ddff"
    }]
  }],
  // ...
  "listeners": [{
    "event": "drawn",
    "method": addLabelBoxes
  }] 
});

function addLabelBoxes(event) {
  var labels = document.querySelectorAll(".amcharts-axis-label.amcharts-guide");
  Array.prototype.forEach.call(labels, function(label, i) {
    var parent = label.parentNode;
    var labelText = label.childNodes[0].textContent; //get guide label from SVG
    var svgRect = label.getBBox();
    var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
    // find the matching guide label in the chart object
    var guide = event.chart.valueAxes[0].guides.filter(function(guide) {
      return guide.label == labelText;
    });
    rect.setAttribute("x", svgRect.x);
    rect.setAttribute("y", svgRect.y);
    rect.setAttribute("transform", label.getAttribute("transform"))
    rect.setAttribute("width", svgRect.width);
    rect.setAttribute("height", svgRect.height);
    rect.setAttribute("fill", (guide && guide.length && guide[0].backgroundColor ? guide[0].backgroundColor : "#FFD32F")); //apply background from guide if it exists
    rect.setAttribute("stroke", (guide && guide.length && guide[0].backgroundColor ? guide[0].backgroundColor : "#4857FF")); //same for the border
    rect.setAttribute("opacity", 1);
    parent.insertBefore(rect, label);
  });
}

Demo

Upvotes: 1

Related Questions