Android Highchart bar chart add a text below a bar

Question

I am displaying a bar chart in my android app with data labels. The highchart excepts only numeric value, although I have tried to use string as values the chart doesn't render. Below is my code

 public void golyChartView(Number prev,Number curr)
{
    HIOptions options = new HIOptions();
    HIChart chart = new HIChart();
    chart.setType("bar");
    options.setChart(chart);


    HITitle title = new HITitle();
    title.setText("GOLY");
    options.setTitle(title);

    HISubtitle subtitle = new HISubtitle();
    subtitle.setText("Growth Over Last Year");
    options.setSubtitle(subtitle);

    HIXAxis xaxis = new HIXAxis();
    String[] categories = new String[] { "2020", "2021"};
    xaxis.setCategories(new ArrayList<>(Arrays.asList(categories)));
    options.setXAxis(new ArrayList<HIXAxis>(){{add(xaxis);}});

    HIYAxis yaxis = new HIYAxis();
    yaxis.setMin(0);
    yaxis.setTitle(new HITitle());
    yaxis.getTitle().setText("Sale Amount");
    yaxis.getTitle().setAlign("high");
    yaxis.setLabels(new HILabels());
    yaxis.getLabels().setOverflow("justify");
    options.setYAxis(new ArrayList<HIYAxis>(){{add(yaxis);}});

    HITooltip tooltip = new HITooltip();

    options.setTooltip(tooltip);

    HILegend legend = new HILegend();
    legend.setLayout("vertical");
    legend.setAlign("right");
    legend.setVerticalAlign("top");
    legend.setX(-30);
    legend.setY(40);
    legend.setFloating(true);
    legend.setBorderWidth(1);
    legend.setBackgroundColor(HIColor.initWithHexValue("FFFFFF"));
    legend.setShadow(true);
    options.setLegend(legend);

    HICredits credits = new HICredits();
    credits.setEnabled(false);
    options.setCredits(credits);

    HIBar bar1 = new HIBar();
    bar1.setName("Sale Value");
    Number[] bar1Data = new Number[]{prev,curr};
    bar1.setColorByPoint(true);
    bar1.setData(new ArrayList<>(Arrays.asList(bar1Data)));

    float numb = (((float)curr - (float)prev)/(float)prev)*100;

    String percentage = String.valueOf(numb);

    HIDataLabels dataLabels = new HIDataLabels();
    dataLabels.setEnabled(true);


    ArrayList<HIDataLabels> dataLabelsList = new ArrayList<>();
    dataLabelsList.add(dataLabels);
    bar1.setDataLabels(dataLabelsList);

    HIDataLabels hiDataLabels = new HIDataLabels();
    hiDataLabels.setEnabled(true);

    HILegend hiLegend = new HILegend();
    hiLegend.setEnabled(false);
    options.setLegend(hiLegend);


    options.setSeries(new ArrayList<>(Collections.singletonList(bar1)));

    HIExporting exporting = new HIExporting();
    exporting.setEnabled(false);

    options.setExporting(exporting);

    golyChart.setOptions(options);
    golyChart.update(options,true,false);



}

Output

What I want to do?

As shown in the above code I have a string of percentage, that I want to add below the second bar Like below

I am stuck to it and don't know what to do

Any help would be highly appreciated.

You can find a similar topic here that may be helpful: https://www.highcharts.com/forum/viewtopic.php?f=9&t=46629 — madepiet, Jun 04 '21 at 06:09

score 0 · Answer 1 · answered May 29 '21 at 23:50

You could use text Renderer to add text next to the bar.

I don't know android-highcharts but in javascript here an example

let customLabel,
    labelInit = false;

Highcharts.chart('container', {
    chart: {
        type: 'bar',
        events: {
            render: function () {

                const chart = this,
              point = chart.series[0].data[1];

                // prevent multiple label creation if used in render event but useless in "load" event
                if (labelInit) customLabel.destroy();

                customLabel = chart.renderer.text('+25 %', point.shapeArgs.height, point.tooltipPos[1] + chart.series[0].itemWidth + 10)
                    .add()
                    .attr({
                        zIndex: 3
                    });
                labelInit = true;

            }
        }
    },
    title:{
        text: "GOLY"
    },
    plotOptions: {
        bar: {
            grouping: false
        }
    },
    xAxis: {
        type: "category",
        categories: ["2020", "2021"]
    },
    series: [{
        data: [200, 400],
        colorByPoint: true

    }]
});

Android Highchart bar chart add a text below a bar

1 Answers1

Linked