amChart legend appearance

问题:

I have an amChart with many rows, like this one. The legend looks a bit awfull.

Is it possible to display the legend in a single row with some scrolling? like for the columns? (I don't want to change the container div's height)

回答1:

The question is too old to answer but still it may help someone to get rid of this problem quickly.

Following is the proper documentation provided by amcharts: https://www.amcharts.com/tutorials/putting-a-legend-outside-the-chart-area/

And here is the JsFiddle Example: http://jsfiddle.net/amcharts/Cww3D/

HTML:

Chart div: 
  
 Legend div: 
 

JavaScript:

var chart;  var chartData = [{category:" "}];  AmCharts.ready(function() {     // SERIAL CHART     chart = new AmCharts.AmSerialChart();     chart.autoMarginOffset = 0;     chart.dataProvider = chartData;     chart.categoryField = "category";     chart.startDuration = 1;      // AXES     // category     var categoryAxis = chart.categoryAxis;     categoryAxis.labelRotation = 45; // this line makes category values to be rotated     categoryAxis.gridAlpha = 0;     categoryAxis.fillAlpha = 1;     categoryAxis.fillColor = "#FAFAFA";     categoryAxis.gridPosition = "start";      // value     var valueAxis = new AmCharts.ValueAxis();     valueAxis.dashLength = 5;     valueAxis.title = "Visitors from country";     valueAxis.axisAlpha = 0;     chart.addValueAxis(valueAxis);      // GRAPH     for (var i = 0; i 

CSS:

body { font-family: Verdana; padding: 15px;}  #legenddiv {     height: 100px !important; /* force that height */     overflow: auto;     position: relative; } 

回答2:

try this

"legend": {         "maxColumns": 1,         "useGraphSettings": true     } 

i hope this would help you , max columns is set for lengent property , you will get all in one line

EDIT as you cant see your char, because when we make legends in one column so your chart cant fit in existing height of your container so make change in css

#chartdiv { width       : 100%; height      : 1000px; font-size   : 11px; }    

hope this will help

文章来源: amChart legend appearance