Android Highchart条形图在条形下方添加文字

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.

Answer 1

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

    }]
});