Display Total Value on Stacked Bar Charts

App Building
,
1

I am trying to show the total of all stacks on top of the stacked bar chart for quite some time. But cant seem to resolve this issue.

This is what i have (Top half on image):

imgonline-com-ua-twotoone-iW9hXUq1W8Ry25cO
imgonline-com-ua-twotoone-iW9hXUq1W8Ry25cO1162×775 43.1 KB

What i want is to show 7 on top of bar ("textposition": "outside").

The other way i have tried is use jsquery to create an array to pass it in plotly json as
"text": {{query.value}}. But this seems to create the issue as shown in bottom half of the image.
It moves all the values to first bar.

Any help is appreciated. TIA.

2

Hi @rai_umad thanks for your question and welcome to the Retool commuity!

It looks like you can supply an annotations array in the layout JSON to add the labels for group of stacked bars. Here's an example I found on codepen as well as a reference in Plotly's docs.

Let me know if this works!

image
image3084×1482 193 KB

An example of how the resulting layout JSON could look something like this in Retool:

{
  "title": "Attempt at Plotly.js Stacked Bar Individual Labels",
  "annotations": [
    {
      "x": "January",
      "y": "5/2",
      "text": "$5",
      "xanchor": "center",
      "yanchor": "bottom",
      "showarrow": false
    },
    {
      "x": "January",
      "y": "5+(8/2)",
      "text": "$8",
      "xanchor": "center",
      "yanchor": "bottom",
      "showarrow": false
    },
    {
      "x": "January",
      "y": "5+8+(9/2)",
      "text": "$9",
      "xanchor": "center",
      "yanchor": "bottom",
      "showarrow": false
    },
    {
      "x": "January",
      "y": "5+8+9",
      "text": "Total $22",
      "xanchor": "center",
      "yanchor": "bottom",
      "showarrow": false
    },
    {
      "x": "February",
      "y": "10/2",
      "text": "$10",
      "xanchor": "center",
      "yanchor": "bottom",
      "showarrow": false
    },
    {
      "x": "February",
      "y": "10+(4/2)",
      "text": "$4",
      "xanchor": "center",
      "yanchor": "bottom",
      "showarrow": false
    },
    {
      "x": "February",
      "y": "10+4+(14/2)",
      "text": "$14",
      "xanchor": "center",
      "yanchor": "bottom",
      "showarrow": false
    },
    {
      "x": "February",
      "y": "10+4+14",
      "text": "Total $28",
      "xanchor": "center",
      "yanchor": "bottom",
      "showarrow": false
    }
  ],
  "showlegend": true,
  "barmode": "stack",
  "bargap": 0.618
}
3

Hi Alex, Thank you so much for reply.

I have had a look at it before but was not sure about layout in JSON, which i tried as per you mentioned and it works quite good but when i hard code the values in annotations.

But i have date picker which can vary over multiple months (1 month = 1 bar) and also Multi-select component to allow user to filter down categories(stacks). Can't seem to figure out how should i tackle it.

4

Hmm I'm not sure I follow this exactly. Can you share a screenshot?

Are you saying that the chart is dynamic depending on the date range selected? If that's the case, you will probably need to create the annotations array dynamically in a Transformer. Then pass that value to the Plotly chart Layout object like this:

{
  "title": "Attempt at Plotly.js Stacked Bar Individual Labels",
  "annotations": {{transformer1.value}},
  "showlegend": true,
  "barmode": "stack",
  "bargap": 0.618
}
5

Hello @alex, It works now, i have created a transformer to create annotations array dynamically and use it in Layout JSON and it works like a charm. :smiling_face_with_three_hearts:

Previously, I started with same approach but I created JS query and was working with text property in data but it didnt work out.

I have one more question, I created transformer while I was renaming it I mis-clicked and it vanished, now I only see it in global variable. But i don't know how to remove it from there.

6

Hey @rai_umad, glad that it's working now!

Can you share a screenshot of the transformer in the global variable area? That is definitely not expected behavior.

7

Hi @alex, I dont have it anymore, after restarting retool it disappeared.

8

Ok, no worries. Please keep an eye out in case it comes back, but it sounds like this was a fleeting issue that resolved itself.

9

Will do it for sure.