OiO.lk Blog Android How to display Grouped stacked column chart with tooltip for each stack in Android
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.

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

Exit mobile version