AChartEngine: Align bar chart in the center

Question

I am using the great library AChartEngine to display different charts in my app but I am facing 2 issues:

1. Display the bar chart in the center

Here a picture of the result I want :

and here my current status :

I am using a XYMultipleSeriesRenderer to render my series with 1 serie per bar in order to colorized them.

I already try the method mRenderer.setBarSpacing(0.5); (with different parameters, but it doesn't change a lot....). I also tried to extend the BarChart class and the Renderer without success.

2. I would center the label and values

• The labels are by default write above the grid lines. How can I move it to the center ?
• How can I override the draw of the ChartValues in order to add the ( ) and put them in white. I would also display them in the bottom-center of the bar, is that possible ?

Edit:

Here's a partial code to initiate the bar chart :

    mRenderer.setMargins(new int[]{30, Utils.dpToPx(16, getActivity()),
            -Utils.dpToPx(20, getActivity()), Utils.dpToPx(16, getActivity())});
    mRenderer.setMarginsColor(Color.TRANSPARENT);

    mRenderer.setLabelsColor(colorWhiteChart);
    mRenderer.setYLabelsColor(0, getResources().getColor(R.color.chart_background));
    mRenderer.setXLabelsPadding(-1 * Utils.dpToPx(120, getActivity()));
    mRenderer.setYLabelsAlign(Paint.Align.LEFT);
    mRenderer.setYLabelsPadding(Utils.dpToPx(20, getActivity()));
    mRenderer.setLabelsTextSize(Utils.dpToPx(10, getActivity()));
    
    mRenderer.setAxesColor(colorWhiteChart);
    mRenderer.setGridColor(colorWhiteChart);

    mRenderer.setYAxisMin(0);
    mRenderer.setXAxisMin(1);
    mRenderer.setXAxisMax(8);

    mRenderer.setZoomEnabled(false, false);
    mRenderer.setPanEnabled(false, false);

    mRenderer.setApplyBackgroundColor(true);
    mRenderer.setBackgroundColor(getResources().getColor(R.color.chart_background));

    mRenderer.setShowGrid(true);
    mRenderer.setShowGridX(false);
    mRenderer.setShowAxes(false);
    mRenderer.setShowLegend(false);



    mRenderer.setBarWidth(16);
    mRenderer.setBarSpacing(0.5);

    mRenderer.setXLabels(8);

    mRenderer.setMarginsColor(getResources().getColor(R.color.chart_background));
    mSeries = new ArrayList<XYSeries>();
    mSeries.add(new XYSeries("0"));
    mSeries.add(new XYSeries("1"));
    mSeries.add(new XYSeries("2"));
    mSeries.add(new XYSeries("3"));
    mSeries.add(new XYSeries("4"));
    mSeries.add(new XYSeries("5"));
    mSeries.add(new XYSeries("6"));
    mSeries.add(new XYSeries("7"));

    generateData(mSeries);

    XYSeriesRenderer renderer = new XYSeriesRendererCustomBar(0);
    XYSeriesRenderer renderer1 = new XYSeriesRendererCustomBar(1);
    XYSeriesRenderer renderer2 = new XYSeriesRendererCustomBar(2);
    XYSeriesRenderer renderer3 = new XYSeriesRendererCustomBar(3);
    XYSeriesRenderer renderer4 = new XYSeriesRendererCustomBar(4);
    XYSeriesRenderer renderer5 = new XYSeriesRendererCustomBar(5);
    XYSeriesRenderer renderer6 = new XYSeriesRendererCustomBar(6);
    XYSeriesRenderer renderer7 = new XYSeriesRendererCustomBar(7);



    mRenderer.addSeriesRenderer(renderer);
    mRenderer.addSeriesRenderer(renderer1);
    mRenderer.addSeriesRenderer(renderer2);
    mRenderer.addSeriesRenderer(renderer3);
    mRenderer.addSeriesRenderer(renderer4);
    mRenderer.addSeriesRenderer(renderer5);
    mRenderer.addSeriesRenderer(renderer6);
    mRenderer.addSeriesRenderer(renderer7);


    mChart = ChartFactory.getBarChartView(getActivity(), mDataset, mRenderer, BarChart.Type.DEFAULT);

And the class XYSeriesRendererCustomBar change the color and few details for the bars :

    private class XYSeriesRendererCustomBar extends XYSeriesRenderer {
    public XYSeriesRendererCustomBar(int i) {
        new XYSeriesRenderer();
        setColor(RatingWidget.COLORS[i]);
        setDisplayChartValues(true);
        setChartValuesTextAlign(Paint.Align.CENTER);

        setChartValuesTextSize(Utils.dpToPx(12, getActivity()));
    }
}

I also try with only one serie and render it with different colors, but the bars are not rendered in the center still... Any suggestion?

Answer 1

Use the Right instead of CENTER in this line(code):

Replace this below code:

 setChartValuesTextAlign(Paint.Align.CENTER);

with:

 setChartValuesTextAlign(Paint.Align.Right);

Enjoy dude :)