Amcharts - HTML tags in some Labels

Question

I use the following chart: http://www.amcharts.com/demos/stacked-bar-chart-with-negative-values/#theme-none

Now I want to add html tags to some labels. (not to all.)

Example: (Here I wanna use strong)

"dataProvider": [{
    "age": "<strong>85+</strong>",
    "male": -0.1,
    "female": 0.3
  }, {
    "age": "80-54",
    "male": -0.2,
    "female": 0.3
  }, ..... ],

Result:

Answer 1

The category axis labels in amCharts are SVG nodes and therefore do not support HTML tags.

What you can do is to target specific labels using CSS.

To do that, you will first need to enable application of CSS classess to chart elements, by setting "addClassNames": true.

Then target labels using CSS. Each category axis label has class "amcharts-axis-label" set. You can target the first one using CSS's nth-child selector:

.amcharts-category-axis .amcharts-axis-label:nth-child(1) tspan {
  font-weight: bold;
}

(I also used .amcharts-category-axis selector so that value axis labels are not targeted by this)

Here's the whole working chart with the above working:

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "rotate": true,
  "addClassNames": true,
  "marginBottom": 50,
  "dataProvider": [{
    "age": "85+",
    "male": -0.1,
    "female": 0.3
  }, {
    "age": "80-54",
    "male": -0.2,
    "female": 0.3
  }, {
    "age": "75-79",
    "male": -0.3,
    "female": 0.6
  }, {
    "age": "70-74",
    "male": -0.5,
    "female": 0.8
  }, {
    "age": "65-69",
    "male": -0.8,
    "female": 1.0
  }, {
    "age": "60-64",
    "male": -1.1,
    "female": 1.3
  }, {
    "age": "55-59",
    "male": -1.7,
    "female": 1.9
  }, {
    "age": "50-54",
    "male": -2.2,
    "female": 2.5
  }, {
    "age": "45-49",
    "male": -2.8,
    "female": 3.0
  }, {
    "age": "40-44",
    "male": -3.4,
    "female": 3.6
  }, {
    "age": "35-39",
    "male": -4.2,
    "female": 4.1
  }, {
    "age": "30-34",
    "male": -5.2,
    "female": 4.8
  }, {
    "age": "25-29",
    "male": -5.6,
    "female": 5.1
  }, {
    "age": "20-24",
    "male": -5.1,
    "female": 5.1
  }, {
    "age": "15-19",
    "male": -3.8,
    "female": 3.8
  }, {
    "age": "10-14",
    "male": -3.2,
    "female": 3.4
  }, {
    "age": "5-9",
    "male": -4.4,
    "female": 4.1
  }, {
    "age": "0-4",
    "male": -5.0,
    "female": 4.8
  }],
  "startDuration": 1,
  "graphs": [{
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "male",
    "title": "Male",
    "labelText": "[[value]]",
    "clustered": false,
    "labelFunction": function(item) {
      return Math.abs(item.values.value);
    },
    "balloonFunction": function(item) {
      return item.category + ": " + Math.abs(item.values.value) + "%";
    }
  }, {
    "fillAlphas": 0.8,
    "lineAlpha": 0.2,
    "type": "column",
    "valueField": "female",
    "title": "Female",
    "labelText": "[[value]]",
    "clustered": false,
    "labelFunction": function(item) {
      return Math.abs(item.values.value);
    },
    "balloonFunction": function(item) {
      return item.category + ": " + Math.abs(item.values.value) + "%";
    }
  }],
  "categoryField": "age",
  "categoryAxis": {
    "gridPosition": "start",
    "gridAlpha": 0.2,
    "axisAlpha": 0
  },
  "valueAxes": [{
    "gridAlpha": 0,
    "ignoreAxisWidth": true,
    "labelFunction": function(value) {
      return Math.abs(value) + '%';
    },
    "guides": [{
      "value": 0,
      "lineAlpha": 0.2
    }]
  }],
  "balloon": {
    "fixedPosition": true
  },
  "chartCursor": {
    "valueBalloonsEnabled": false,
    "cursorAlpha": 0.05,
    "fullWidth": true
  },
  "allLabels": [{
    "text": "Male",
    "x": "28%",
    "y": "97%",
    "bold": true,
    "align": "middle"
  }, {
    "text": "Female",
    "x": "75%",
    "y": "97%",
    "bold": true,
    "align": "middle"
  }]
});

#chartdiv {
  width: 100%;
  height: 500px;
}

.amcharts-category-axis .amcharts-axis-label:nth-child(1) tspan {
  font-weight: bold;
}

<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>