CODEWITHSUNDEEP
javascriptamcharts
István
István

Reputation: 5127

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)

Upvotes: 5

Views: 13610

Answers (3)

KARAN SINGH
KARAN SINGH

Reputation: 21

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

chart.legend.fontFamily= "sans";

chart.legend.fontSize= 24;

Upvotes: 1

Kaushal Bhatt
Kaushal Bhatt

Reputation: 346

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;
}

Upvotes: 3

Dhiraj Wakchaure
Dhiraj Wakchaure

Reputation: 2716

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

Upvotes: 2

Related Questions