amcharts label positioning
problems
1) the labels (too little, best, too much) is placed to the center of each grid-end. If possible, I want to place it so that the labels don't stick out from the graph.
2) the "best" label (placed in the middle of the graph) gets lost/hidden when the graph width is reduced. The "too much" label also gets lost when the width is largely reduced..
is there any way to solve either of the problems?
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: 80px;
}
JavaScript
var chart = new AmCharts.AmSerialChart();
chart.category = "evaluation";
chart.autoMargins = false;
chart.marginTop = 10;
chart.marginLeft = 23;
chart.marginBottom = 25;
chart.marginRight = 28;
chart.dataProvider = [ {
"category": "Evaluation",
"excellent": 10,
"good": 10,
"average": 10,
"poor": 10,
"bad": 10,
"bullet": 65,
"last": 78
} ];
var va = new AmCharts.ValueAxis();
va.maximum = 100;
va.stackType = "100%";
va.gridAlpha = 0;
va.autoGridCount = false;
va.gridCount = 3;
//va.labelFrequency = 5;
va.labelFunction = formatValue;
//va.labelOffset = ;
va.position = "bottom";
va.inside = false;
chart.addValueAxis(va);
chart.categoryAxis.labelsEnabled = false;
chart.categoryAxis.showFirstLabel = false;
var badColor = "#fb7116";
var poorColor = "#f6d32b";
var averageColor = "#f4fb16";
var goodColor = "#b4dd1e";
var excellentColor = "#19d228";
var createNewColorGraph = function(col, valFie){
var newGraph = new AmCharts.AmGraph();
newGraph.fillAlphas = 0.8;
newGraph.lineColor = col;
newGraph.showBalloon = false;
newGraph.type = "column";
newGraph.valueField = valFie;
return newGraph;
}
var createNewPracticeDataGraph = function(valFie){
var practiceGraph = new AmCharts.AmGraph();
practiceGraph.clustered = false;
practiceGraph.columnWidth = 0.3;
practiceGraph.fillAlphas = 1;
practiceGraph.lineColor = "#000000";
practiceGraph.stackable = false;
practiceGraph.type = "column";
practiceGraph.valueField = valFie;
return practiceGraph;
}
var createNewLastDataGraph = function(valFie){
var lastGraph = new AmCharts.AmGraph();
lastGraph.columnWidth = 0.5;
lastGraph.lineThickness = 3;
lastGraph.lineColor = "#000000";
lastGraph.noStepRisers = true;
lastGraph.stackable = false;
lastGraph.type = "step";
lastGraph.valueField = valFie;
return lastGraph;
}
function formatValue(value, formattedValue, valueAxis){
if(value === 0){
return "too little";
}
else if(value == 50){
return "best";
...