CODEWITHSUNDEEP
javascriptamcharts
Arunkumar
Arunkumar

Reputation: 269

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/

Upvotes: 2

Views: 23313

Answers (3)

Chris
Chris

Reputation: 18884

I needed my font color to be dark since my charts bg color was white:

xAxis.renderer.labels.template.fill = am4core.color('#000000');
yAxis.renderer.labels.template.fill = am4core.color('#000000');

Upvotes: 0

Jamie Hutber
Jamie Hutber

Reputation: 28106

I wish that the documentation was more clear, but you can change the label colour with nested properties so:

chart.labels.template.fill = am4core.color("white");

This would target your labels and change their colour.

Upvotes: 4

xorspark
xorspark

Reputation: 16012

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.

Upvotes: 5

Related Questions