Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

amcharts showing value inside bar

I'm using amCharts, and i want to show values inside bar

This is how it looks at the moment: Current state of the charts

and I want it to be like this: Expected state of the chart

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.

like image 658
Web Radiona Avatar asked Aug 12 '14 18:08

Web Radiona


1 Answers

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

like image 169
Web Radiona Avatar answered Oct 01 '22 23:10

Web Radiona