javascript - amChart legend appearance - Stack Overflow

admin管理员组

文章数量:1287569

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)

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)

• javascript
• amcharts

Share Improve this question Follow edited Jun 6, 2014 at 10:40 ic3 7,6901515 gold badges7272 silver badges122122 bronze badges asked Jun 6, 2014 at 10:37 IstvánIstván 5,1271010 gold badges4040 silver badges6767 bronze badges 1

• my last hours try seems that AMcharts serial type hasn't legend for every categoryAxis ((but if you want to add another graphs you can/have/(do it) for every graph to select and show or hide selected graph)) – saber tabatabaee yazdi Commented Oct 18, 2016 at 8:04

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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./tutorials/putting-a-legend-outside-the-chart-area/

And here is the JsFiddle Example: http://jsfiddle/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;
}

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

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

chart.legend.fontFamily= "sans";

chart.legend.fontSize= 24;

本文标签： javascriptamChart legend appearanceStack Overflow