Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to change the colors for stacked column for Bar graph #291

Closed
Venkataramana0801 opened this issue Sep 19, 2024 · 4 comments
Closed

Comments

@Venkataramana0801
Copy link

In my application, I want to display the group data in the bar graph. So I am using the stacked column provided by High chart demo sample. I am able to display the graph successfully by using the below code

  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);

        HIXAxis xaxis = new HIXAxis();
        xaxis.setCategories(new ArrayList<>(Arrays.asList("Appled", "Oranges", "Pears", "Grapes", "Bananas")));
        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)));

        HILegend legend = new HILegend();
        legend.setAlign("right");
        legend.setX(-30);
        legend.setVerticalAlign("top");
        legend.setY(25);
        legend.setFloating(true);
        legend.setBackgroundColor(HIColor.initWithName("white"));
        legend.setBorderColor(HIColor.initWithHexValue("ccc"));
        legend.setBorderWidth(1);
//        legend.setShadow(false);
        options.setLegend(legend);

        HITooltip tooltip = new HITooltip();
        tooltip.setPointFormat("{series.name}: {point.y}<br/>Total: {point.stackTotal}");
        tooltip.setHeaderFormat("<b>{point.x}</b><br/>");
        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};
        String[] column1DataColor1 = new String[]{"#8B008B", "#8B008B", "#8B008B", "#8B008B", "#8B008B"};
        column1.setData(new ArrayList<>(Arrays.asList(column1Data)));
        column1.setColors(new ArrayList<>(Arrays.asList(column1DataColor1)));

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

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

Capture_stackedcolumn

Here I want to change the two colors of the graph, for that I am using the below code, but I am unable to change the colors

 String[] column1DataColor1 = new String[]{"#8B008B", "#8B008B", "#8B008B", "#8B008B", "#8B008B"};
column1.setColors(new ArrayList<>(Arrays.asList(column1DataColor1)));
  String[] column1DataColor2 = new String[]{"#5F9EA0", "#5F9EA0", "#5F9EA0", "#5F9EA0", "#5F9EA0"};
  column2.setColors(new ArrayList<>(Arrays.asList(column1DataColor2)));

Here I am able to change the one color for the graph by using the below code
options.setColors(new ArrayList<>(Arrays.asList(column1DataColor1)));

Here I want to change the two colors. how to change the graph for two colors.

Thanks In Advance.

@MikolajMichalczak
Copy link
Contributor

Hi @Venkataramana0801!

Apologies for the long wait, and thank you for your patience.
Could you please try the following solution?

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"));

@Venkataramana0801
Copy link
Author

working fine with the above code. thank you so much

@Venkataramana0801
Copy link
Author

Venkataramana0801 commented Oct 16, 2024

Here one more question, how to display both the values in tool tip, john and jane. I am able to display separately, But I want to display both the values in tool tip

image

Like below
image
Audi, VW and total, I am able to display the each value and total
But my requirement is, need to display the both values in tool tip
Appreciate your help

@MikolajMichalczak
Copy link
Contributor

This issue has been moved to #293. Please refer to the new issue for further updates.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants