m.plots: allow to specify plot width also.

diff --git a/doc/plugins/plots-and-graphs.rst b/doc/plugins/plots-and-graphs.rst
index 9d8a97a6cb0409d77955dda0501a65ace127e120..a334cf134c73a942361293081810f69ca1c4dfc6 100644 (file)
--- a/doc/plugins/plots-and-graphs.rst
+++ b/doc/plugins/plots-and-graphs.rst
@@ -126,7 +126,9 @@ configure bar colors using :rst:`:colors:`. The colors correspond to m.css
 `color classes <{filename}/css/components.rst#colors>`_ and you can either
 use one color for all or one for each value, separated by whitespace. Bar chart
 height is calculated automatically based on amount of values, you can adjust
-the bar height using :rst:`:bar-height:`. Default value is :py:`0.4`.
+the bar height using :rst:`:bar-height:`. Default value is :py:`0.4`. Similarly
+it's possible to specify graph width using :rst:`:plot-width:`, the default
+:py:`8` is tuned for a page-wide plot.
 
 It's possible to add an extra line of labels using :rst:`:labels-extra:`.
 Again, there should be as many entries as primary labels and values. To omit an

diff --git a/plugins/m/plots.py b/plugins/m/plots.py
index c3072a1f086beac47c52f1b51dc4e15d917e50c8..834299052bdd5eaee302caaa5e0200c954da1374 100644 (file)
--- a/plugins/m/plots.py
+++ b/plugins/m/plots.py
@@ -142,6 +142,7 @@ class Plot(rst.Directive):
                    'values': directives.unchanged_required,
                    'errors': directives.unchanged,
                    'colors': directives.unchanged,
+                   'plot-width': directives.unchanged,
                    'bar-height': directives.unchanged,
                    # Legacy options with ugly underscores instead of dashes
                    'labels_extra': directives.unchanged,
@@ -214,7 +215,7 @@ class Plot(rst.Directive):
         # Setup the graph
         fig, ax = plt.subplots()
         # TODO: let matplotlib calculate the height somehow
-        fig.set_size_inches(8, 0.78 + len(labels)*bar_height)
+        fig.set_size_inches(float(self.options.get('plot-width', 8)), 0.78 + len(labels)*bar_height)
         yticks = np.arange(len(labels))
         left = np.array([0.0]*len(labels))
         for i in range(len(value_sets)):

diff --git a/plugins/m/test/plots/page-py35.html b/plugins/m/test/plots/page-py35.html
index 3e53854503112ac1fbdac237378e2f205e0cd2b1..3fa7caf924f0cca37cb8219252edd76f70ba4e24 100644 (file)
--- a/plugins/m/test/plots/page-py35.html
+++ b/plugins/m/test/plots/page-py35.html
@@ -160,8 +160,10 @@ div.m-plot svg { font-family: DejaVu Sans; }
  </defs>
 </svg>
 </div>
+<div class="m-col-m-6 m-center-m">
+<p>A plot with separate colors, extra labels, error bars and custom width + height</p>
 <div class="m-plot">
-<svg viewBox="0 0 576 218.16">
+<svg viewBox="0 0 324 218.16">
  <defs>
   <style type="text/css">
 *{stroke-linecap:butt;stroke-linejoin:round;}
@@ -170,16 +172,16 @@ div.m-plot svg { font-family: DejaVu Sans; }
  <g id="figure_1">
   <g id="axes_1">
    <g id="patch_1">
-    <path d="M 76.642031 173.988125 L 558.482422 173.988125 L 558.482422 27.757969 L 76.642031 27.757969 z" class="m-background"/>
+    <path d="M 76.642031 173.988125 L 308.62 173.988125 L 308.62 27.757969 L 76.642031 27.757969 z" class="m-background"/>
    </g>
    <g id="plot2-value0-0"><title>3.0 ± 0.1 Mondays</title>
-    <path clip-path="url(#p284e84a89d)" d="M 76.642031 34.404794 L 302.328397 34.404794 L 302.328397 72.386653 L 76.642031 72.386653 z" class="m-bar m-success"/>
+    <path clip-path="url(#p951bbe7ab0)" d="M 76.642031 34.404794 L 185.296818 34.404794 L 185.296818 72.386653 L 76.642031 72.386653 z" class="m-bar m-success"/>
    </g>
    <g id="plot2-value0-1"><title>4.0 ± 2.1 Mondays</title>
-    <path clip-path="url(#p284e84a89d)" d="M 76.642031 81.882117 L 377.557185 81.882117 L 377.557185 119.863976 L 76.642031 119.863976 z" class="m-bar m-info"/>
+    <path clip-path="url(#p951bbe7ab0)" d="M 76.642031 81.882117 L 221.51508 81.882117 L 221.51508 119.863976 L 76.642031 119.863976 z" class="m-bar m-info"/>
    </g>
    <g id="plot2-value0-2"><title>5.0 ± 1.0 Mondays</title>
-    <path clip-path="url(#p284e84a89d)" d="M 76.642031 129.359441 L 452.785974 129.359441 L 452.785974 167.3413 L 76.642031 167.3413 z" class="m-bar m-danger"/>
+    <path clip-path="url(#p951bbe7ab0)" d="M 76.642031 129.359441 L 257.733342 129.359441 L 257.733342 167.3413 L 76.642031 167.3413 z" class="m-bar m-danger"/>
    </g>
    <g id="matplotlib.axis_1">
     <g id="xtick_1">
@@ -198,65 +200,65 @@ div.m-plot svg { font-family: DejaVu Sans; }
     <g id="xtick_2">
      <g id="line2d_2">
       <g>
-       <use x="151.87082" xlink:href="#m7a9c636c50" y="173.988125"/>
+       <use x="112.860293" xlink:href="#m7a9c636c50" y="173.988125"/>
       </g>
      </g>
      <g id="text_2">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 151.87082, 189.346406)" x="151.87082" y="189.346406">1</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 112.860293, 189.346406)" x="112.860293" y="189.346406">1</text>
      </g>
     </g>
     <g id="xtick_3">
      <g id="line2d_3">
       <g>
-       <use x="227.099608" xlink:href="#m7a9c636c50" y="173.988125"/>
+       <use x="149.078555" xlink:href="#m7a9c636c50" y="173.988125"/>
       </g>
      </g>
      <g id="text_3">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 227.099608, 189.346406)" x="227.099608" y="189.346406">2</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 149.078555, 189.346406)" x="149.078555" y="189.346406">2</text>
      </g>
     </g>
     <g id="xtick_4">
      <g id="line2d_4">
       <g>
-       <use x="302.328397" xlink:href="#m7a9c636c50" y="173.988125"/>
+       <use x="185.296818" xlink:href="#m7a9c636c50" y="173.988125"/>
       </g>
      </g>
      <g id="text_4">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 302.328397, 189.346406)" x="302.328397" y="189.346406">3</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 185.296818, 189.346406)" x="185.296818" y="189.346406">3</text>
      </g>
     </g>
     <g id="xtick_5">
      <g id="line2d_5">
       <g>
-       <use x="377.557185" xlink:href="#m7a9c636c50" y="173.988125"/>
+       <use x="221.51508" xlink:href="#m7a9c636c50" y="173.988125"/>
       </g>
      </g>
      <g id="text_5">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 377.557185, 189.346406)" x="377.557185" y="189.346406">4</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 221.51508, 189.346406)" x="221.51508" y="189.346406">4</text>
      </g>
     </g>
     <g id="xtick_6">
      <g id="line2d_6">
       <g>
-       <use x="452.785974" xlink:href="#m7a9c636c50" y="173.988125"/>
+       <use x="257.733342" xlink:href="#m7a9c636c50" y="173.988125"/>
       </g>
      </g>
      <g id="text_6">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 452.785974, 189.346406)" x="452.785974" y="189.346406">5</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 257.733342, 189.346406)" x="257.733342" y="189.346406">5</text>
      </g>
     </g>
     <g id="xtick_7">
      <g id="line2d_7">
       <g>
-       <use x="528.014763" xlink:href="#m7a9c636c50" y="173.988125"/>
+       <use x="293.951604" xlink:href="#m7a9c636c50" y="173.988125"/>
       </g>
      </g>
      <g id="text_7">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 528.014763, 189.346406)" x="528.014763" y="189.346406">6</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 293.951604, 189.346406)" x="293.951604" y="189.346406">6</text>
      </g>
     </g>
     <g id="text_8">
-     <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 317.562227, 203.992344)" x="317.562227" y="203.992344">Mondays</text>
+     <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 192.631016, 203.992344)" x="192.631016" y="203.992344">Mondays</text>
     </g>
    </g>
    <g id="matplotlib.axis_2">
@@ -297,25 +299,25 @@ div.m-plot svg { font-family: DejaVu Sans; }
     </g>
    </g>
    <g id="LineCollection_1">
-    <path clip-path="url(#p284e84a89d)" d="M 294.805518 53.395723 L 309.851276 53.395723" class="m-error"/>
-    <path clip-path="url(#p284e84a89d)" d="M 219.576729 100.873047 L 535.537641 100.873047" class="m-error"/>
-    <path clip-path="url(#p284e84a89d)" d="M 377.557185 148.35037 L 528.014763 148.35037" class="m-error"/>
+    <path clip-path="url(#p951bbe7ab0)" d="M 181.674991 53.395723 L 188.918644 53.395723" class="m-error"/>
+    <path clip-path="url(#p951bbe7ab0)" d="M 145.456729 100.873047 L 297.57343 100.873047" class="m-error"/>
+    <path clip-path="url(#p951bbe7ab0)" d="M 221.51508 148.35037 L 293.951604 148.35037" class="m-error"/>
    </g>
    <g id="line2d_11">
     <defs>
      <path d="M 0 9.375 L 0 -9.375" id="m63fa77ade3" class="m-error"/>
     </defs>
-    <g clip-path="url(#p284e84a89d)">
-     <use x="294.805518" xlink:href="#m63fa77ade3" y="53.395723"/>
-     <use x="219.576729" xlink:href="#m63fa77ade3" y="100.873047"/>
-     <use x="377.557185" xlink:href="#m63fa77ade3" y="148.35037"/>
+    <g clip-path="url(#p951bbe7ab0)">
+     <use x="181.674991" xlink:href="#m63fa77ade3" y="53.395723"/>
+     <use x="145.456729" xlink:href="#m63fa77ade3" y="100.873047"/>
+     <use x="221.51508" xlink:href="#m63fa77ade3" y="148.35037"/>
     </g>
    </g>
    <g id="line2d_12">
-    <g clip-path="url(#p284e84a89d)">
-     <use x="309.851276" xlink:href="#m63fa77ade3" y="53.395723"/>
-     <use x="535.537641" xlink:href="#m63fa77ade3" y="100.873047"/>
-     <use x="528.014763" xlink:href="#m63fa77ade3" y="148.35037"/>
+    <g clip-path="url(#p951bbe7ab0)">
+     <use x="188.918644" xlink:href="#m63fa77ade3" y="53.395723"/>
+     <use x="297.57343" xlink:href="#m63fa77ade3" y="100.873047"/>
+     <use x="293.951604" xlink:href="#m63fa77ade3" y="148.35037"/>
     </g>
    </g>
    <g id="text_12">
@@ -327,17 +329,18 @@ div.m-plot svg { font-family: DejaVu Sans; }
     <text class="m-label m-dim" transform="translate(45.380156 159.918346)">hell!</text>
    </g>
    <g id="text_14">
-    <text class="m-title" style="text-anchor:middle;" transform="rotate(-0, 317.562227, 21.757969)" x="317.562227" y="21.757969">A plot with separate colors, extra labels, error bars and custom height</text>
+    <text class="m-title" style="text-anchor:middle;" transform="rotate(-0, 192.631016, 21.757969)" x="192.631016" y="21.757969">Yes.</text>
    </g>
   </g>
  </g>
  <defs>
-  <clipPath id="p284e84a89d">
-   <rect height="146.230156" width="481.840391" x="76.642031" y="27.757969"/>
+  <clipPath id="p951bbe7ab0">
+   <rect height="146.230156" width="231.977969" x="76.642031" y="27.757969"/>
   </clipPath>
  </defs>
 </svg>
 </div>
+</div>
 <div class="m-plot">
 <svg viewBox="0 0 576 142.56">
  <defs>

diff --git a/plugins/m/test/plots/page.html b/plugins/m/test/plots/page.html
index f8ab90ad3f43f4b4f6cd509c37fe30aa525a85b0..4ece1575dff672eed5d86cf532f82968cb8d9dea 100644 (file)
--- a/plugins/m/test/plots/page.html
+++ b/plugins/m/test/plots/page.html
@@ -160,8 +160,10 @@ div.m-plot svg { font-family: DejaVu Sans; }
  </defs>
 </svg>
 </div>
+<div class="m-col-m-6 m-center-m">
+<p>A plot with separate colors, extra labels, error bars and custom width + height</p>
 <div class="m-plot">
-<svg viewBox="0 0 576 218.16">
+<svg viewBox="0 0 324 218.16">
  <defs>
   <style type="text/css">
 *{stroke-linecap:butt;stroke-linejoin:round;}
@@ -170,16 +172,16 @@ div.m-plot svg { font-family: DejaVu Sans; }
  <g id="figure_1">
   <g id="axes_1">
    <g id="patch_1">
-    <path d="M 76.642031 173.988125 L 558.852109 173.988125 L 558.852109 27.757969 L 76.642031 27.757969 z" class="m-background"/>
+    <path d="M 76.642031 173.988125 L 312.12 173.988125 L 312.12 27.757969 L 76.642031 27.757969 z" class="m-background"/>
    </g>
    <g id="plot2-value0-0"><title>3.0 ± 0.1 Mondays</title>
-    <path clip-path="url(#p48a6285d36)" d="M 76.642031 34.404794 L 302.501553 34.404794 L 302.501553 72.386653 L 76.642031 72.386653 z" class="m-bar m-success"/>
+    <path clip-path="url(#p573f44456e)" d="M 76.642031 34.404794 L 186.936162 34.404794 L 186.936162 72.386653 L 76.642031 72.386653 z" class="m-bar m-success"/>
    </g>
    <g id="plot2-value0-1"><title>4.0 ± 2.1 Mondays</title>
-    <path clip-path="url(#p48a6285d36)" d="M 76.642031 81.882117 L 377.78806 81.882117 L 377.78806 119.863976 L 76.642031 119.863976 z" class="m-bar m-info"/>
+    <path clip-path="url(#p573f44456e)" d="M 76.642031 81.882117 L 223.700872 81.882117 L 223.700872 119.863976 L 76.642031 119.863976 z" class="m-bar m-info"/>
    </g>
    <g id="plot2-value0-2"><title>5.0 ± 1.0 Mondays</title>
-    <path clip-path="url(#p48a6285d36)" d="M 76.642031 129.359441 L 453.074567 129.359441 L 453.074567 167.3413 L 76.642031 167.3413 z" class="m-bar m-danger"/>
+    <path clip-path="url(#p573f44456e)" d="M 76.642031 129.359441 L 260.465582 129.359441 L 260.465582 167.3413 L 76.642031 167.3413 z" class="m-bar m-danger"/>
    </g>
    <g id="matplotlib.axis_1">
     <g id="xtick_1">
@@ -198,65 +200,65 @@ div.m-plot svg { font-family: DejaVu Sans; }
     <g id="xtick_2">
      <g id="line2d_2">
       <g>
-       <use x="151.928538" xlink:href="#m7a9c636c50" y="173.988125"/>
+       <use x="113.406741" xlink:href="#m7a9c636c50" y="173.988125"/>
       </g>
      </g>
      <g id="text_2">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 151.928538, 189.346406)" x="151.928538" y="189.346406">1</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 113.406741, 189.346406)" x="113.406741" y="189.346406">1</text>
      </g>
     </g>
     <g id="xtick_3">
      <g id="line2d_3">
       <g>
-       <use x="227.215045" xlink:href="#m7a9c636c50" y="173.988125"/>
+       <use x="150.171452" xlink:href="#m7a9c636c50" y="173.988125"/>
       </g>
      </g>
      <g id="text_3">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 227.215045, 189.346406)" x="227.215045" y="189.346406">2</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 150.171452, 189.346406)" x="150.171452" y="189.346406">2</text>
      </g>
     </g>
     <g id="xtick_4">
      <g id="line2d_4">
       <g>
-       <use x="302.501553" xlink:href="#m7a9c636c50" y="173.988125"/>
+       <use x="186.936162" xlink:href="#m7a9c636c50" y="173.988125"/>
       </g>
      </g>
      <g id="text_4">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 302.501553, 189.346406)" x="302.501553" y="189.346406">3</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 186.936162, 189.346406)" x="186.936162" y="189.346406">3</text>
      </g>
     </g>
     <g id="xtick_5">
      <g id="line2d_5">
       <g>
-       <use x="377.78806" xlink:href="#m7a9c636c50" y="173.988125"/>
+       <use x="223.700872" xlink:href="#m7a9c636c50" y="173.988125"/>
       </g>
      </g>
      <g id="text_5">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 377.78806, 189.346406)" x="377.78806" y="189.346406">4</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 223.700872, 189.346406)" x="223.700872" y="189.346406">4</text>
      </g>
     </g>
     <g id="xtick_6">
      <g id="line2d_6">
       <g>
-       <use x="453.074567" xlink:href="#m7a9c636c50" y="173.988125"/>
+       <use x="260.465582" xlink:href="#m7a9c636c50" y="173.988125"/>
       </g>
      </g>
      <g id="text_6">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 453.074567, 189.346406)" x="453.074567" y="189.346406">5</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 260.465582, 189.346406)" x="260.465582" y="189.346406">5</text>
      </g>
     </g>
     <g id="xtick_7">
      <g id="line2d_7">
       <g>
-       <use x="528.361074" xlink:href="#m7a9c636c50" y="173.988125"/>
+       <use x="297.230292" xlink:href="#m7a9c636c50" y="173.988125"/>
       </g>
      </g>
      <g id="text_7">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 528.361074, 189.346406)" x="528.361074" y="189.346406">6</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 297.230292, 189.346406)" x="297.230292" y="189.346406">6</text>
      </g>
     </g>
     <g id="text_8">
-     <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 317.74707, 203.992344)" x="317.74707" y="203.992344">Mondays</text>
+     <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 194.381016, 203.992344)" x="194.381016" y="203.992344">Mondays</text>
     </g>
    </g>
    <g id="matplotlib.axis_2">
@@ -297,25 +299,25 @@ div.m-plot svg { font-family: DejaVu Sans; }
     </g>
    </g>
    <g id="LineCollection_1">
-    <path clip-path="url(#p48a6285d36)" d="M 294.972902 53.395723 L 310.030203 53.395723" class="m-error"/>
-    <path clip-path="url(#p48a6285d36)" d="M 219.686395 100.873047 L 535.889725 100.873047" class="m-error"/>
-    <path clip-path="url(#p48a6285d36)" d="M 377.78806 148.35037 L 528.361074 148.35037" class="m-error"/>
+    <path clip-path="url(#p573f44456e)" d="M 183.259691 53.395723 L 190.612633 53.395723" class="m-error"/>
+    <path clip-path="url(#p573f44456e)" d="M 146.494981 100.873047 L 300.906763 100.873047" class="m-error"/>
+    <path clip-path="url(#p573f44456e)" d="M 223.700872 148.35037 L 297.230292 148.35037" class="m-error"/>
    </g>
    <g id="line2d_11">
     <defs>
      <path d="M 0 9.375 L 0 -9.375" id="m63fa77ade3" class="m-error"/>
     </defs>
-    <g clip-path="url(#p48a6285d36)">
-     <use x="294.972902" xlink:href="#m63fa77ade3" y="53.395723"/>
-     <use x="219.686395" xlink:href="#m63fa77ade3" y="100.873047"/>
-     <use x="377.78806" xlink:href="#m63fa77ade3" y="148.35037"/>
+    <g clip-path="url(#p573f44456e)">
+     <use x="183.259691" xlink:href="#m63fa77ade3" y="53.395723"/>
+     <use x="146.494981" xlink:href="#m63fa77ade3" y="100.873047"/>
+     <use x="223.700872" xlink:href="#m63fa77ade3" y="148.35037"/>
     </g>
    </g>
    <g id="line2d_12">
-    <g clip-path="url(#p48a6285d36)">
-     <use x="310.030203" xlink:href="#m63fa77ade3" y="53.395723"/>
-     <use x="535.889725" xlink:href="#m63fa77ade3" y="100.873047"/>
-     <use x="528.361074" xlink:href="#m63fa77ade3" y="148.35037"/>
+    <g clip-path="url(#p573f44456e)">
+     <use x="190.612633" xlink:href="#m63fa77ade3" y="53.395723"/>
+     <use x="300.906763" xlink:href="#m63fa77ade3" y="100.873047"/>
+     <use x="297.230292" xlink:href="#m63fa77ade3" y="148.35037"/>
     </g>
    </g>
    <g id="text_12">
@@ -327,17 +329,18 @@ div.m-plot svg { font-family: DejaVu Sans; }
     <text class="m-label m-dim" transform="translate(45.380156 159.918346)">hell!</text>
    </g>
    <g id="text_14">
-    <text class="m-title" style="text-anchor:middle;" transform="rotate(-0, 317.74707, 21.757969)" x="317.74707" y="21.757969">A plot with separate colors, extra labels, error bars and custom height</text>
+    <text class="m-title" style="text-anchor:middle;" transform="rotate(-0, 194.381016, 21.757969)" x="194.381016" y="21.757969">Yes.</text>
    </g>
   </g>
  </g>
  <defs>
-  <clipPath id="p48a6285d36">
-   <rect height="146.230156" width="482.210078" x="76.642031" y="27.757969"/>
+  <clipPath id="p573f44456e">
+   <rect height="146.230156" width="235.477969" x="76.642031" y="27.757969"/>
   </clipPath>
  </defs>
 </svg>
 </div>
+</div>
 <div class="m-plot">
 <svg viewBox="0 0 576 142.56">
  <defs>

diff --git a/plugins/m/test/plots/page.rst b/plugins/m/test/plots/page.rst
index 480d070e37eb2f248ff3b666ffbbbda2cac7fd7c..fcf81193966014c15337cd820df30ec4b30ce17e 100644 (file)
--- a/plugins/m/test/plots/page.rst
+++ b/plugins/m/test/plots/page.rst
@@ -19,21 +19,29 @@ predictable rendering on the CIs.
     :values: 15 30
     :colors: success
 
-.. plot:: A plot with separate colors, extra labels, error bars and custom height
-    :type: barh
-    :labels:
-        January
-        February
-        March
-    :labels_extra:
-        a paradise
-        ..
-        hell!
-    :units: Mondays
-    :values: 3 4 5
-    :errors: 0.1 2.1 1.0
-    :colors: success info danger
-    :bar_height: 0.75
+.. using legacy underscored options below to test the compatibility (the dashed
+    options are used on the site, which should be enough to verify those work)
+
+.. container:: m-col-m-6 m-center-m
+
+    A plot with separate colors, extra labels, error bars and custom width + height
+
+    .. plot:: Yes.
+        :type: barh
+        :labels:
+            January
+            February
+            March
+        :labels_extra:
+            a paradise
+            ..
+            hell!
+        :units: Mondays
+        :values: 3 4 5
+        :errors: 0.1 2.1 1.0
+        :colors: success info danger
+        :plot-width: 4.5
+        :bar_height: 0.75
 
 .. plot:: Stacked plot
     :type: barh