amChart legend appearance

Question

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)

Answer 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:
<div id="chartdiv" style="height: 250px; border: 2px dotted #c33; margin: 5px 0 20px 0;"></div>

<br />
Legend div:
<div id="legenddiv" style="border: 2px dotted #3f3; margin: 5px 0 20px 0;"></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 < 15; i ++) {
        chartData[0]["val"+i]  = Math.floor(Math.random() * 20);
        var graph = new AmCharts.AmGraph();
        graph.valueField = "val"+i;
        graph.title = "Graph #"+i;
        graph.type = "column";
        graph.lineAlpha = 0;
        graph.fillAlphas = 1;
        chart.addGraph(graph);
    }

    // LEGEND
    var legend = new AmCharts.AmLegend();
    chart.addLegend(legend, "legenddiv");

    // WRITE
    chart.write("chartdiv");
});

CSS:

body { font-family: Verdana; padding: 15px;}

#legenddiv {
    height: 100px !important; /* force that height */
    overflow: auto;
    position: relative;
}

Answer 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

Answer 3

To change Font-Family and Font-Size in Legends Label of Amcharts

chart.legend.fontFamily= "sans";

chart.legend.fontSize= 24;