У меня сейчас график следующего вида:
![339e2c5c84a44b5686e3f538156eb220.png](https://habrastorage.org/files/339/e2c/5c8/339e2c5c84a44b5686e3f538156eb220.png)
Мне нужно, чтобы значения были наверху графика
![229ac5acc3564d65a6c5eb0cf05daec0.png](https://habrastorage.org/files/229/ac5/acc/229ac5acc3564d65a6c5eb0cf05daec0.png)
function makeChart() {
var lineChartData = [
{
title:"Январь",
value:0,
fromValue: 0,
toValue: 1403,
},
{
title:"Февраль",
value:1403,
fromValue: 1403,
toValue: 3509,
},
{
title:"Март",value:3509
},
{
title:"Апрель",value:4912
},
{
title:"Май",value:7018
},
{
title:"Июнь",value:9124
},
{
title:"Июль",value:10948
},
{
title:"Август",value:11931
},
{
title:"Сентябрь",value:12633
},
{
title:"Октябрь",value:14037
},
];
var chart = new AmCharts.AmSerialChart();
chart.responsive = {
"enabled": true
};
chart.dataProvider = lineChartData;
chart.showBalloon = false;
chart.categoryField = "title";
chart.valueField = "value";
chart.color = "#FFFFFF";
chart.fontFamily = "ProbaPro Medium";
chart.fontSize = 12;
chart.dataProvider = lineChartData;
// sometimes we need to set margins manually
// autoMargins should be set to false in order chart to use custom margin values
chart.autoMargins = false;
chart.marginRight = 0;
chart.marginLeft = 0;
chart.marginBottom = 40;
chart.marginTop = 20;
// AXES
// Это вертикальные линии
var categoryAxis = chart.categoryAxis;
categoryAxis.axisColor = "#a6a2ef";
categoryAxis.gridColor = "#6963e0";
categoryAxis.color = "#908de9";
categoryAxis.parseDates = false; // as our data is date-based, we set parseDates to true
categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD
categoryAxis.inside = false;
categoryAxis.gridAlpha = 1;
categoryAxis.tickLength = 1;
categoryAxis.axisAlpha = 1;
categoryAxis.dashLength = 1;
categoryAxis.fontSize = 11;
categoryAxis.titleColor = "#E2E2E2";
categoryAxis.fillColor = "#E2E2E2";
categoryAxis.offset = 10;
// value
//Это горизонтальные линии
var valueAxis = new AmCharts.ValueAxis();
valueAxis.dashLength = 1;
valueAxis.axisAlpha = 0;
valueAxis.fillAlpha = 0;
valueAxis.gridAlpha = 0;
valueAxis.position = "top";
valueAxis.axisColor = "transparent";
valueAxis.color = "transparent";
valueAxis.includeAllValues = true;
valueAxis.includeHidden = true;
valueAxis.inside = true;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph({
"showBalloon": false,
"valueAxes": [
{
"position": "top",
"axisAlpha": 1
}
],
"showAllValueLabels": true,
"showOnAxis": true,
});
graph.type = "line";
graph.valueField = "value";
graph.lineColor = "#f43d94";
graph.lineAlpha = 1;
graph.showBalloon = false;
graph.labelText = '[[value]]'; // this will insert values in labels
graph.labelPosition = 'top';
graph.labelOffset = 0;
graph.lineThickness = 3;
graph.customBullet = "images/bullet.png"; // bullet for all data points
graph.bulletSize = 20; // bullet image should be a rectangle (width = height)
graph.customBulletField = "customBullet"; // this will make the graph to display custom bullet (red star)
chart.addGraph(graph);
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.fullWidth = true;
chartCursor.cursorAlpha = 0.6;
chartCursor.valueLineEnabled = false;
chartCursor.cursorColor = "#7043cf";
chart.addChartCursor(chartCursor);
// WRITE
chart.write("chartdiv");
}
AmCharts.ready(function () {
makeChart();
});