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.
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]]" },
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]]" },
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",
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.