100% stacked bar chart

[lorenacaf]

How can I build 100% stacked bar chart?

[ScottR]

https://docs.retool.com/docs/build-charts-graphs

[alex]

Hey @lorenacaf - thanks for your question and welcome to the Retool forum!

You will need to manually adjust the Layout JSON property of the Plotly Chart component. The properties that you will need to add are:

{
  "barmode":"stack",
  "barnorm":"percent",
  ...
}

This will normalized the bar chart to 100% of the height of the chart.

I've found that the best place to look for examples and code snippets are in Plotly's docs:

• Example bar charts: Bar charts in JavaScript
• barmode prop reference: Layout in JavaScript
• barnorm prop reference: Layout in JavaScript

Here's an example of this in use in an app: