I'm using amCharts, and i want to show values inside bar
This is how it looks at the moment:
and I want it to be like this:
This is my code to display chart:
AmCharts.ready(function() {
generateWidgetData('week');
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.dataProvider = graphData;
chart.categoryField = 'date';
chart.startDuration = 1;
chart.columnWidth = 0.60;
chart.dataDateFormat = 'YYYY-MM-DD';
chart.startEffect = 'easeInSine';
chart.stackType = 'regular';
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.parseDates = true;
categoryAxis.minPeriod = 'DD';
categoryAxis.plotAreaBorderAlpha = 0.01;
categoryAxis.labelRotation = 90;
categoryAxis.axisThickness = 0;
categoryAxis.stackType = 'regular';
categoryAxis.gridThickness = 0;
categoryAxis.inside = false;
//categoryAxis.gridPosition = 'start';
//categoryAxis.startDate = '2014-05-08';
// value
// in case you don't want to change default settings of value axis,
// you don't need to create it, as one value axis is created automatically.
// GRAPH
var graph = new AmCharts.AmGraph();
graph.maxColumns = 1;
graph.valueField = 'Self-entered';
graph.balloonText = '[[category]]: <b>[[value]]</b>';
graph.type = 'column';
graph.lineAlpha = 0;
graph.labelText = '[[value]]';
graph.fillAlphas = 0.8;
graph.stackType = 'regular';
chart.addGraph(graph);
graph.cornerRadiusTop = 8;
// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorAlpha = 0;
chartCursor.zoomable = false;
chartCursor.categoryBalloonEnabled = false;
chart.addChartCursor(chartCursor);
chart.creditsPosition = 'top-right';
chart.write('stepschart');
});
Thanks in advance.
I fixed this so i will post answer, maybe it will help to someone
its really simple all you need to do is to add 2 lines of code:
graph.labelText = '[[value]]'; // this will insert values in labels
graph.labelPosition = 'inside'; // and with this we put our label inside bar
Hope this will help to someone who also need to do same thing