CODEWITHSUNDEEP
svgamcharts
pmiranda
pmiranda

Reputation: 8420

Edit legend-value style of AmCharts

This is the code of "graphs" of my AmChart:

           "graphs": [{
                "balloonText": "Activos mes actual: [[value]]",
                "title": "Actual",
                "valueField": "activo_actual",
                "fillAlphas": 0,
                "lineColor": "#001ea0",
            }, {
                "balloonText": "Activos mes anterior: [[value]]",
                "title": "Anterior",
                "valueField": "activo_anterior",
                "fillAlphas": 0,
                "lineColor": "#ff0a1b",
            }],

As you can see in the red box of this pic: enter image description here The valueField activo_actualis too long, and it's overflowing the little space that AmCharts has for default in it's template. How can edit that? Is there any option? I tried to edit the class of amcharts-value-legend: enter image description here but I just can only add a few style (bold, color, text size) but can't give some margin-left or something like that, it's a svg with the <text> tag. Any tip?

Upvotes: 1

Views: 310

Answers (1)

xorspark
xorspark

Reputation: 16012

Rather than trying to edit the SVG directly, you can leverage a couple of properties provided by the legend object:

  • valueWidth - adjusts the width of the value portion of each legend entry
  • labelWidth - adjusts the width of the marker title portion of each legend entry

Ex:

AmCharts.makeChart("chartdiv", {
  // ...
  legend: {
    // ...
    valueWidth: /* some value */,
    labelWidth: /* some value */,
    // ...
  }
});

Tweaking these should help prevent the text overlap you're seeing.

Upvotes: 2

Related Questions