October 22, 2024
Chicago 12, Melborne City, USA
Android

How to display Grouped stacked column chart with tooltip for each stack in Android


In my application I am using the Grouped stacked column chart. I am successfully loaded the graph with the sample provided.

 chartView.theme = "grid-light";

        HIOptions options = new HIOptions();

        HITitle title = new HITitle();
        title.setText("Stacked column chart");
        options.setTitle(title);

        HISubtitle subtitle = new HISubtitle();
        subtitle.setText("Plain");
        options.setSubtitle(subtitle);

        //map to list of usagemodel
        List<String> dateFormatList = new ArrayList<>();
        List<Float> usageListReg1 = new ArrayList<>();
        List<Float> usageListReg2 = new ArrayList<>();

        HIXAxis xaxis = new HIXAxis();
        xaxis.setCategories(new ArrayList<>(Arrays.asList("Appled", "Oranges", "Pears", "Grapes", "Bananas")));
        xaxis.setCategories(new ArrayList<>(dateFormatList));
        options.setXAxis(new ArrayList<>(Collections.singletonList(xaxis)));

        HIYAxis yaxis = new HIYAxis();
        yaxis.setMin(0);
        yaxis.setTitle(new HITitle());
        yaxis.getTitle().setText("Total fruit consumption");
        yaxis.setStackLabels(new HIStackLabels());
        yaxis.getStackLabels().setEnabled(true);
        yaxis.getStackLabels().setStyle(new HICSSObject());
        yaxis.getStackLabels().getStyle().setFontWeight("bold");
        yaxis.getStackLabels().getStyle().setColor("gray");
        options.setYAxis(new ArrayList<>(Collections.singletonList(yaxis)));

        HITooltip tooltip = new HITooltip();
        tooltip.setPointFormat("{series.name}: {point.y}<br/>Total: {point.stackTotal}");
        tooltip.setHeaderFormat("<b>{point.x}</b><br/>");
        tooltip.setBackgroundColor(HIColor.initWithHexValue("eb4034"));
        options.setTooltip(tooltip);

        HIPlotOptions plotoptions = new HIPlotOptions();
        plotoptions.setColumn(new HIColumn());
        plotoptions.getColumn().setStacking("normal");
        options.setPlotOptions(plotoptions);

        HIColumn column1 = new HIColumn();
        column1.setName("John");
        Number[] column1Data = new Number[]{5, 3, 4, 7, 2};
        column1.setData(new ArrayList<>(Arrays.asList(column1Data)));
        column1.setColor(HIColor.initWithHexValue("8B008B"));

        HIColumn column2 = new HIColumn();
        column2.setName("Jane");
        Number[] column2Data = new Number[]{2, 2, 3, 2, 1};
        column2.setData(new ArrayList<>(Arrays.asList(column2Data)));
        column2.setColor(HIColor.initWithHexValue("5F9EA0"));

        options.setSeries(new ArrayList<>(Arrays.asList(column1, column2)));
        chartView.setOptions(options);

Here my question is how to display both values in tooltip. By using the below code, I am able to display the individual data John and Jane separately. like below screenshot.

enter image description here

But I want to display the each stack value in tooltip John and Jane line by line

Thanks



You need to sign in to view this answers

Leave feedback about this

  • Quality
  • Price
  • Service

PROS

+
Add Field

CONS

+
Add Field
Choose Image
Choose Video