mekko example

Author: nicolaskruchten

Diff for: doc/python/bar-charts.md

@@ -287,6 +287,56 @@ fig = go.Figure(data=[go.Bar(
 fig.show()
 ```
 
+Bar charts with custom widths can be used to make mekko charts (also known as marimekko charts, mosaic plots, or variwide charts).
+
+```python
+import plotly.graph_objects as go
+import numpy as np
+
+labels = ["apples","oranges","pears","bananas"]
+widths = np.array([10,20,20,50])
+
+data = {
+    "South": [50,80,60,70],
+    "North": [50,20,40,30]
+}
+
+fig = go.Figure()
+for key in data:
+    fig.add_trace(go.Bar(
+        name=key,
+        y=data[key],
+        x=np.cumsum(widths)-widths,
+        width=widths,
+        offset=0,
+        customdata=np.transpose([labels, widths*data[key]]),
+        texttemplate="%{y} x %{width} =<br>%{customdata[1]}",
+        textposition="inside",
+        textangle=0,
+        textfont_color="white",
+        hovertemplate="<br>".join([
+            "label: %{customdata[0]}",
+            "width: %{width}",
+            "height: %{y}",
+            "area: %{customdata[1]}",
+        ])
+    ))
+
+fig.update_xaxes( 
+    tickvals=np.cumsum(widths)-widths/2, 
+    ticktext= ["%s<br>%d" % (l, w) for l, w in zip(labels, widths)]
+)
+
+fig.update_xaxes(range=[0,100])
+fig.update_yaxes(range=[0,100])
+
+fig.update_layout(
+    title_text="Marimekko Chart",
+    barmode="stack",
+    uniformtext=dict(mode="hide", minsize=10),
+)
+```
+
 ### Customizing Individual Bar Base
 
 ```python