CODEWITHSUNDEEP
imagechartsbar-chartamcharts
Freddy Rojas
Freddy Rojas

Reputation: 11

Image at bottom in every column on amcharts

I've tried to gather information about if it is possible to put a different image located at the bottom of every column in a 100% stacked bar chart.

I've seen that is possible to modify some attributes of category labels and put images just above every bar as http://www.amcharts.com/demos/column-chart-images-top/ but I need just the opposite.

In other words, I want to make the base of the column has an image loaded, replacing x axis and category label.

Thanks in advance.

Upvotes: 1

Views: 1497

Answers (1)

martynasma
martynasma

Reputation: 8595

Unfortunately, Category axis does not allow using images in place of category labels.

There's also no way to make the custom bullets from graphs "trickle" outside plot area.

What you can do is to drop those custom icons right down just above category axis line.

To do that you will need:

1) Add additional fields to your data that would contain all zero values. 2) Add a separate graph that would use those fields and display custom bullets. 3) Make the "bullet graph" non-stackable (stackable: false), not clustered (clustered: false), and generally invisible (visibleInLegend: false, fillAlphas: 0, lineAlpha: 0, showBalloon: false)

Here's a working example:

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "dataProvider": [{
    "name": "John",
    "points": 35022,
    "color": "#7F8DA9",
    "zero": 0,
    "bullet": "//www.amcharts.com/lib/3/images/0.gif"
  }, {
    "name": "Damon",
    "points": 65456,
    "color": "#FEC514",
    "zero": 0,
    "bullet": "//www.amcharts.com/lib/3/images/1.gif"
  }, {
    "name": "Patrick",
    "points": 45724,
    "color": "#DB4C3C",
    "zero": 0,
    "bullet": "//www.amcharts.com/lib/3/images/2.gif"
  }, {
    "name": "Mark",
    "points": 13654,
    "color": "#DAF0FD",
    "zero": 0,
    "bullet": "//www.amcharts.com//lib/3/images/3.gif"
  }],
  "valueAxes": [{
    "maximum": 80000,
    "minimum": 0,
    "axisAlpha": 0,
    "dashLength": 4,
    "position": "left"
  }],
  "startDuration": 1,
  "graphs": [{
    "balloonText": "<span style='font-size:13px;'>[[category]]: <b>[[value]]</b></span>",
    "colorField": "color",
    "fillAlphas": 0.8,
    "lineAlpha": 0,
    "type": "column",
    "valueField": "points"
  }, {
    "showBalloon": false,
    "bulletOffset": 16,
    "bulletSize": 34,
    "customBulletField": "bullet",
    "fillAlphas": 0,
    "lineAlpha": 0,
    "type": "column",
    "visibleInLegend": false,
    "clustered": false,
    "stackable": false,
    "valueField": "zero"
  }],
  "categoryField": "name",
  "categoryAxis": {
    "axisAlpha": 0,
    "gridAlpha": 0,
    "tickLength": 0
  }
});
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv" style="width: 100%; height: 200px;"></div>

Additionally, if you don't need the text labels on the category axis, you can set it's labelsEnabled: false property.

Upvotes: 0

Related Questions