CODEWITHSUNDEEP
javascriptamcharts
Nick Doulgeridis
Nick Doulgeridis

Reputation: 613

AmCharts Legend

I am trying to replicate the following chart

enter image description here

The problem I have is how to make the legend in the left and in the middle of every box that stacks (Series word in each box). I have searched amCharts but no luck. Is there a way to do it or how to override or extend amCharts in order to achieve this behavior?

Thanks a lot.

Upvotes: 1

Views: 1923

Answers (1)

martynasma
martynasma

Reputation: 8595

For displaying value labels, use labelText proeprty.

Just set it to "[[value]]" in your graphs. I.e.:

"graphs": [{
  ...
  "labelText": "[[value]]"
}]

For the "legend" on the left, you will need to use guides. It allows placing lines (optional) and labels at some preset values. You will need to pre-calculate the values at which to place them, though.

Here's a complete working example:

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "dataProvider": [{
    "year": 2011,
    "value1": 13,
    "value2": 5,
    "value3": 4
  }, {
    "year": 2012,
    "value1": 22,
    "value2": 4,
    "value3": 5
  }, {
    "year": 2013,
    "value1": 35,
    "value2": 7,
    "value3": 4
  }],
  "valueAxes": [{
    "stackType": "regular",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "labelsEnabled": false,
    "tickLength": 0,
    "totalText": "[[total]]",
    "guides": [{
      "value": 6.5,
      "label": "Series #1",
      "fontSize": 15
    }, {
      "value": 15.5,
      "label": "Series #2",
      "fontSize": 15
    }, {
      "value": 20,
      "label": "Series #3",
      "fontSize": 15
    }]
  }],
  "graphs": [{
    "fillAlphas": 1,
    "fillColors": "#a0b1cf",
    "labelText": "[[value]]",
    "lineAlpha": 1,
    "lineColor": "#000",
    "title": "value1",
    "type": "column",
    "color": "#000000",
    "valueField": "value1"
  }, {
    "fillAlphas": 1,
    "fillColors": "#c5cde0",
    "labelText": "[[value]]",
    "lineAlpha": 1,
    "lineColor": "#000",
    "title": "value1",
    "type": "column",
    "color": "#000000",
    "valueField": "value2"
  }, {
    "fillAlphas": 1,
    "fillColors": "#dde6eb",
    "labelText": "[[value]]",
    "lineAlpha": 1,
    "lineColor": "#000",
    "title": "value1",
    "type": "column",
    "color": "#000000",
    "valueField": "value3"
  }],
  "categoryField": "year",
  "categoryAxis": {
    "gridPosition": "start",
    "axisAlpha": 0,
    "gridAlpha": 0,
    "position": "left"
  }

});
#chartdiv {
  width: 400px;
  height: 400px;
}
<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>

Upvotes: 4

Related Questions