Reputation: 1169
I have problem with my graph. For some reason value axis labels are not displayed. This is example: https://jsfiddle.net/stj7yzgd/1/.
In fact they can be displayed by adding:
"panelsSettings": {
"marginLeft": 40,
}
or by setting display option to:
"valueAxesSettings": {
"inside": false
}
Adding static margin seems not to be a good solution to me, because it is not working with every number. If value axis label will be a huge number, then it's label will be cropped.
Also, I dont wan't to display labels inside graph, because it is not looking well.
Is there any better solution to display that?
Upvotes: 1
Views: 558
Reputation: 16012
You can set autoMargins
to true in your panelsSettings
to have it auto-size the panel; it's not documented but nearly every StockPanel-level setting can be set in panelsSettings and unfortunately it is not called out that this is turned off in the Settings object.
panelsSettings: {
// ...
autoMargins: true,
// ...
}
Demo below:
var chart;
function generateChart(dataProvider) {
chart = AmCharts.makeChart("chartdiv", {
"type": "stock",
"dataSets": [{
"fieldMappings": [{
"fromField": "visits",
"toField": "visits"
}],
"categoryField": "date",
"dataProvider": dataProvider,
}],
"categoryAxesSettings": {
"alwaysGroup": true,
"groupToPeriods": ["hh"],
},
"panels": [{
"stockGraphs": [{
"type": "column",
"valueField": "visits",
"periodValue": "Sum",
}]
}],
"valueAxesSettings": {
"inside": false,
"minimum": 0,
},
"panelsSettings": {
"autoMargins": true
}
});
}
function generateChartData() {
var chartData = [];
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 5);
for (var i = 0; i < 15; i++) {
var newDate = new Date(firstDate);
newDate.setHours(newDate.getHours() + i);
chartData.push({
"date": newDate,
"visits": Math.floor(Math.random() * 100) + 1
});
}
return chartData;
}
generateChart(generateChartData());
#chartdiv {
width: 100%;
height: 500px;
}
<div id="chartdiv"> </div>
<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/amstock.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
Upvotes: 1