AmChart Legend scrolling
HTML
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
CSS
#chartdiv {
width : 100%;
height : 200px;
font-size : 11px;
}
.amChartsLegend {
/* max-height: 200px; */
/* overflow-y: auto !important; */
}
JavaScript
var chartData = generatechartData();
function generatechartData() {
var chartData = [];
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 150);
for (var i = 0; i < 10; i++) {
// we create date objects here. In your data, you can have date strings
// and then set format of your dates using chart.dataDateFormat property,
// however when possible, use date objects, as this will speed up chart rendering.
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var visits = Math.round(Math.random() * 100 - 50);
chartData.push({
date: newDate,
visits: visits
});
}
return chartData;
}
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"addClassNames": true,
"dataProvider": chartData,
"valueAxes": [{
"id": "v1",
"axisAlpha": 0.1
}],
"graphs": [{
"valueField": "visits",
"title": "1"
}, {
"valueField": "visits",
"title": "2"
}, {
"valueField": "visits",
"title": "3"
}, {
"valueField": "visits",
"title": "4"
}, {
"valueField": "visits",
"title": "5"
}, {
"valueField": "visits",
"title": "6"
}, {
"valueField": "visits",
"title": "7"
}, {
"valueField": "visits",
"title": "8"
}, {
"valueField": "visits",
"title": "9"
}, {
"valueField": "visits",
"title": "10"
}, {
"valueField": "visits",
"title": "11"
}, {
"valueField": "visits",
"title": "12"
}],
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"axisAlpha": 0,
"minHorizontalGap": 60
},
"legend": {
"enabled": true,
"position": "right",
"textClickEnabled": true
}
});
// Solution proposed by AmChart support:...