Skip to content
Advertisement

How to change Label text color in amcharts

I have to change label text to green and red color.how can we change the color of a label using java script amcharts. and is it possible to add a up arrow after the label text.Please check the code below.

enter image description here

     var chart = AmCharts.makeChart( "chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataProvider": [],
   "type": "serial",
              "theme": "light",
              "categoryField": "name",
              "rotate": true,
              "startDuration": 1,
              "startEffect":"easeOutSine",
               "columnSpacing": 0,
              "autoMargins": false,
              "marginBottom": 0,
             "pullOutRadius": 0,
              "categoryAxis": {
                  "inside": true,
                   "gridPosition": "start",
                   "gridAlpha": 0,
                   "axisAlpha": 0,
                   "tickPosition": "start",
                   "tickLength": 0,
                  "position": "left"
              },
              "trendLines": [],
              "graphs": [
                {
                  "balloonText": " [[name]]: $[[amt]]<br> Index: [[Index]]",
                  "fillAlphas": 0.8,
                  "fillColorsField": "color1",
                  "id": "AmGraph-12",
                  "lineAlpha": 0.2,
                  "title": "amt",
                  "type": "column",
                  "valueField": "value",
                  "showHandOnHover":true,
                  "labelText": "[[Index]]",
                  "labelPosition": "right",

                  "fixedColumnWidth": 15
                },
                {
                  "balloonText": " [[name]]: $[[amt1]]",
                  "fillAlphas": 0.8,
                  "fillColorsField": "color",
                  "id": "AmGraph-22",
                  "lineAlpha": 0.2,
                  "title": "amt",
                  "type": "column",
                  "valueField": "value1",
                  "showHandOnHover":true,
                  "fixedColumnWidth": 15
                }
              ],
              "guides": [],
              "valueAxes": [
                {
                  "id": "ValueAxis-1",
                  "axisAlpha": 0,
                  "gridAlpha": 0,
                  "labelsEnabled": false,
                  "minimum":0
                }
              ],
              "allLabels": [],
              "balloon": {
              "fillColor": "#000000",
               "color": "#ffffff",
               "fillAlpha": 1.0,
                "offsetX": 0,
                  "offsetY": 0,
                  "horizontalPadding":0,
                  "maxWidth":100
              },
              "titles": [],
              "export": {
                "enabled": true
              }


} );

Please Suggest me How can i achieve this.Also check this JsFiddle

https://jsfiddle.net/ArunKumarUmma/21wm5hf5/6/

Advertisement

Answer

You can set the label color using the color property in the graph object:

  "graphs": [{
    // ...
    "color": "#008000",
    "labelText": "[[Index]]"
  },

color demo

If you need to specify it for each individual column, then you have to set the color in your data and use labelColorField to access it. If you have a color property set, it will fall back to that color if a particular data element does not have an associated labelColorField property.

  "dataProvider": [{
    // ...
    "labelColor": "#880000",
    "name": "Name1",
    "value": "148773.88",
    "value1": "60794.55"
  }, // ...
  ]
  "graphs": [{
   // ...
   "color": "#008000",
   "labelColorField": "labelColor",
   "labelText": "[[Index]]"
  },

labelColorField demo.

Edit again

You can add arrows by inserting the unicode escape string. For example, the up arrow is u02191 and down arrow is u02193.

For example:

"labelText": "[[value]] u02191",

Updated fiddle

If you need to do this dynamically, you’ll need to set a labelFunction and figure out a way to determine which arrow to use. Check its documentation and figure out the best way to use it for your setup.

User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement