April 09, 2026

2024 MeteoGarden (MG) MeteoAG Widget Customization Guide

April 09, 2026/ Jan Barani

MeteoAG Widget Customization Guide — BARANI DESIGN

MeteoAG Widget Customization Guide with Concrete Live Examples and Common Pitfalls

A comprehensive guide to embedding, sizing, styling, and customizing allMeteo weather widgets on your website.

1. Basic Widget Embed — The Minimal Setup

Every allMeteo widget starts with a <div class="allmeteo-widget"> inside a container, plus the widget script loaded once at the bottom of the page. The script auto-discovers all widget divs.

<!-- Container controls the size -->
<div style="width: 400px; min-height: 300px; border: 5px solid rgb(51, 81, 145);">
  <div class="allmeteo-widget" data-mg="YOUR_MG_ID"></div>
</div>

<!-- Load the script ONCE, at the bottom, AFTER all widget divs -->
<script type="text/javascript"
  src="https://weather.allmeteo.com/widget/allmeteo.widget.js">
</script>

Key rule: The <script> tag should appear only once on the page, after all widget divs. It will initialize every allmeteo-widget element automatically. Placing it inside individual widget divs or loading it multiple times can cause duplicate rendering.

2. Sizing — How to Make Widgets Bigger (Without Breaking Plots)

The most common customization request is making the widget larger so it is more readable. There are right and wrong ways to do this.

The Wrong Way: `transform: scale()`

Do not use CSS transform: scale() to enlarge widgets. This is the #1 cause of clipped plots. The transform visually scales the widget but does not change its layout dimensions. Combined with overflow: hidden on the container, the enlarged content gets clipped.

<!-- WRONG — plots will be clipped -->
<div style="width: 1200px; height: 750px; overflow: hidden;">
  <div class="allmeteo-widget" data-mg="4492"
       style="transform: scale(1.9); transform-origin: top left; width: 55%;">
  </div>
</div>

This approach causes three problems simultaneously:

transform: scale(1.9) visually enlarges the widget 1.9x, but the browser still thinks it occupies its original (unscaled) space.
overflow: hidden clips everything beyond the container boundary — which is where the scaled plots end up.
The scaled visual width (55% x 1200 x 1.9 = 1,254px) exceeds the 1200px container, clipping the right edge too.

The Right Way: Use Container Width

The widget is responsive to its container. Simply make the container wider and the widget will fill it naturally — plots, tables, labels, and all. Use min-height (not fixed height) so the widget can grow vertically.

<!-- CORRECT — widget scales naturally -->
<div style="width: 900px; min-height: 200px;
            border: 5px solid rgb(51, 81, 145);
            background: #fff; border-radius: 6px;">
  <div class="allmeteo-widget"
       data-mg="4492"
       measurands="10101,20101,51101,80100,90100"
       measurandsNames="AIR TEMPERATURE,HUMIDITY,PRECIPITATION ACCUM,WIND SPEED,WIND DIRECTION"
       expanded="10101,20101,51101,80100,90100"
       style="width: 100%;">
  </div>
</div>

<script type="text/javascript"
  src="https://weather.allmeteo.com/widget/allmeteo.widget.js">
</script>

Container Property	Recommendation	Why
`width`	Set to desired display width (e.g., 900px, 1200px, 100%)	Widget fills available width naturally
`height`	Do not use fixed `height`	Fixed height clips content when plots are expanded
`min-height`	Use `min-height: 200px` or similar	Allows the widget to grow as plots expand
`overflow`	Never use `overflow: hidden`	Clips plot labels and axis values at edges
`transform`	Do not use `transform: scale()`	Causes layout/clip mismatch (see above)

3. Font Weight — Do Not Override `font-weight`

It may be tempting to add font-weight: 700 !important or font-weight: 990 !important to the widget to make text bolder. Do not do this.

Overriding font-weight breaks the wind gust flag symbol. The widget uses a special icon font for the wind flag/pennant glyph next to gust readings. Forcing bold weight causes this symbol to render as stacked horizontal lines instead of the correct pennant shape.

<!-- WRONG — breaks the wind flag icon -->
<div class="allmeteo-widget" data-mg="4492"
     style="font-weight: 990 !important;">
</div>

<!-- CORRECT — let the widget handle its own font weights -->
<div class="allmeteo-widget" data-mg="4492"
     style="width: 100%;">
</div>

4. Font Sizes — Do Not Override SVG Text

Do not force font-size on SVG elements inside the widget. The plots render in a fixed-size SVG canvas, and increasing the text size causes axis labels (MAX, MIN, timestamps) to overflow and get clipped.

<!-- WRONG — causes right-side labels (MAX/MIN) to clip -->
<style>
  .allmeteo-widget svg text {
    font-size: 16px !important;
  }
</style>

<!-- CORRECT — make the container wider instead -->
<div style="width: 900px; min-height: 200px;">
  <div class="allmeteo-widget" data-mg="4492"
       style="width: 100%;"></div>
</div>

Rule of thumb: To make everything bigger, make the container wider. Do not override font-size or font-weight on the widget. The widget's internal CSS is designed to render correctly at its native font sizes within the SVG viewport.

5. Safe CSS Overrides — Table Fonts Only

While you should never override SVG text or font-weight, it is safe to increase the font size of the current-conditions table (the Measurand / Value / Height header and data rows at the top of each widget). These are standard HTML table elements, not SVG.

<style>
  /* SAFE — increases table header and data text by 50% */
  .allmeteo-widget table th { font-size: 150% !important; }
  .allmeteo-widget table td { font-size: 150% !important; }
</style>

Do NOT target these selectors:

.allmeteo-widget svg text — clips axis labels (MAX/MIN)
.allmeteo-widget * with font-weight — breaks wind flag icon font
.allmeteo-widget .wind-avg, .wind-gust, or similar wind rose readout classes — these are rendered in SVG/canvas and do not respond to CSS font-size overrides

6. Selecting Measurands and Custom Names

Use the measurands attribute to choose which parameters to display, and measurandsNames to set custom labels for each.

<div class="allmeteo-widget"
     data-mg="4492"
     measurands="10101,20101,51101,80100,90100"
     measurandsNames="AIR TEMPERATURE,HUMIDITY,PRECIPITATION ACCUM,WIND SPEED,WIND DIRECTION">
</div>

The order of IDs in measurands must match the order of names in measurandsNames. Both are comma-separated lists.

7. Expanding Plots by Default

By default, the widget shows the data table in a collapsed state. To show the time-series plots expanded (open) on page load, use the expanded attribute with a comma-separated list of measurand IDs.

<!-- All five plots open by default -->
<div class="allmeteo-widget"
     data-mg="4492"
     measurands="10101,20101,51101,80100,90100"
     expanded="10101,20101,51101,80100,90100">
</div>

8. Plot Background Colors Using `area`

The area attribute paints colored zones on the background of each plot. This is useful for visual differentiation between measurands or for highlighting value ranges (e.g., safe vs. danger zones).

Format

area="measurandID|startValue|endValue|colorWithAlpha"

Multiple zones are comma-separated. Use min and max as shorthand for the full Y-axis range.

Area boundaries must match threshold boundaries. If your thresholds are at |15 and |30, the area color zones must also change at 15 and 30. A mismatch (e.g., thresholds at |30 but area zones switching at |35) creates confusing visuals where the color boundary and the threshold line don't align.

Example: Pastel Background Per Measurand

Give each measurand its own subtle background tint for easy visual scanning:

<div class="allmeteo-widget"
     data-mg="4492"
     measurands="10101,20101,51101,80100,90100"
     measurandsNames="AIR TEMPERATURE,HUMIDITY,PRECIPITATION ACCUM,WIND SPEED,WIND DIRECTION"
     expanded="10101,20101,51101,80100,90100"
     area="10101|min|max|#fff0ef60,
           20101|min|max|#eff6ff60,
           51101|min|max|#e8f8f560,
           80100|min|max|#eefbee60,
           90100|min|max|#f4f0fa60"
     color-bg="white" color-text="black"
     color-line="black" color-axis="#333">
</div>

Measurand	Color	Hex with Alpha
Temperature	Soft warm pink	`#fff0ef60`
Humidity	Soft cool blue	`#eff6ff60`
Precipitation	Soft teal	`#e8f8f560`
Wind Speed	Soft green	`#eefbee60`
Wind Direction	Soft purple	`#f4f0fa60`

The last two hex digits control opacity: 60 is about 38% transparent, keeping plot lines visible.

Example: Stoplight Zones on Wind Direction

For environmental or air-quality monitoring, color the wind direction plot by directional risk zones. This example uses green, yellow, and red to indicate which wind directions carry clean air vs. industrial emissions:

<div class="allmeteo-widget"
     data-mg="4492"
     measurands="10101,20101,51101,80100,90100"
     expanded="10101,20101,51101,80100,90100"
     range="90100:0:360"
     thresholds="90100|79,90100|169,90100|259"
     area="10101|min|max|#fff0ef60,
           20101|min|max|#eff6ff60,
           51101|min|max|#e8f8f560,
           80100|min|max|#eefbee60,
           90100|0|79|#fef3cd50,
           90100|79|169|#d4edda50,
           90100|169|259|#f8d7da50,
           90100|259|max|#fef3cd50"
     color-bg="white" color-text="black"
     color-line="black" color-axis="#333"
     color-threshold="#cccccc">
</div>

Degrees	Color	Meaning
0° – 79°	Yellow	Caution — transitional wind direction
79° – 169°	Green	Clean air (e.g., monsoon from rural areas)
169° – 259°	Red	Industrial emissions zone
259° – 360°	Yellow	Caution — some transboundary dust

The range="90100:0:360" attribute forces the Y-axis to display the full 0°–360° compass range, and the thresholds attribute draws horizontal reference lines at each zone boundary.

9. Thresholds and Ranges

Thresholds (Horizontal Reference Lines)

thresholds="measurandID|value,measurandID|value"

Draws horizontal dashed lines at specified Y-axis values on a measurand's plot. Useful for marking limits, safe ranges, or zone boundaries.

<!-- Two threshold lines on soil moisture at 15 and 30 kPa -->
thresholds="320101|15,320101|30,235101|15,235101|30"

Ranges (Force Y-Axis Scale)

range="measurandID:min:max,measurandID:min:max"

Forces the Y-axis to a specific range rather than auto-scaling to the data.

Always specify both min AND max. Writing range="320101:0" (min only, no max) causes the Y-axis to auto-scale its upper bound to the data. If all values are above 15, the axis may start at 15 — hiding the lower color zones entirely. Always write the full form: range="320101:0:55".

<!-- WRONG — auto-scales max, may hide lower color zones -->
range="320101:0,235101:0"

<!-- CORRECT — fixed axis 0-55, all three color zones always visible -->
range="320101:0:55,235101:0:55"

<!-- Wind direction: full compass 0-360 -->
range="90100:0:360"

Recommended Ranges by Measurement Type

Measurement	Measurand IDs	Recommended Range
Soil water tension (kPa)	233101, 235101, 320101, 320100, 600101	`0:55`
Soil volumetric water content (%)	254100, 254101	`20:45`
Soil temperature (°C)	270100, 280100, 280101, 225100, 310100, 330100	`0:40`
Wind direction (°)	90100	`0:360`

10. Color Attributes

The widget supports several color attributes for global styling:

Attribute	Controls	Example
`color-bg`	Widget background	`color-bg="white"`
`color-text`	Table text and labels	`color-text="black"`
`color-line`	Plot line color	`color-line="black"`
`color-axis`	Axis lines and labels	`color-axis="#333"`
`color-threshold`	Threshold reference lines	`color-threshold="red"`

<div class="allmeteo-widget"
     data-mg="4492"
     color-bg="white"
     color-text="black"
     color-line="black"
     color-axis="black"
     color-threshold="red">
</div>

11. Inverted Measurands

The inverted attribute flips the Y-axis for a measurand so that higher values are at the bottom. This is commonly used for soil moisture measurements where increasing tension (drier soil) is shown downward, making it intuitive — wetter at top, drier at bottom.

<div class="allmeteo-widget"
     data-mg="2700"
     measurands="233101,235101"
     inverted="233101,235101"
     expanded="233101,235101">
</div>

12. Wind Rose Stoplight Widget

The wind rose widget shows a compass dial with color-coded directional zones (green, yellow, red) — ideal for airports, kite surfing, or air-quality applications.

<div style="width: 800px; min-height: 650px;
            border: 5px solid rgb(51, 81, 145);
            background: #fff; border-radius: 6px;">
  <div class="allmeteo-widget"
       data-mg="4492"
       wind
       kite-angles="79,169,169,259,439">
  </div>
</div>

Understanding `kite-angles`

The five values define four directional zones going clockwise:

kite-angles="optimalStart,optimalEnd,yellowEnd,yellowStart,optimalStart+360"

Zone	From → To	Color
Yellow (before green)	yellowStart → optimalStart	Yellow
Green (optimal)	optimalStart → optimalEnd	Green
Yellow (after green)	optimalEnd → yellowEnd	Yellow
Red (danger)	yellowEnd → yellowStart	Red

The fifth value is always optimalStart + 360 (for wrap-around calculation).

Example: Air Quality Stoplight for Sector 81, Faridabad

kite-angles="79,169,169,259,439"

Breakdown:
- 259 to 79 (through North): YELLOW — N/NW prevailing winds, some dust
- 79 to 169:                  GREEN  — clean E/SE monsoon air
- 169 to 169:                 (no second yellow — collapsed to zero)
- 169 to 259:                 RED    — S/SW industrial emissions

Tip: To eliminate one of the yellow zones (e.g., transition directly from green to red), set yellowEnd equal to optimalEnd. This collapses the second yellow zone to zero degrees.

Sizing the Wind Rose

The wind rose includes a gust readout in the bottom-right corner. If the container is too small, the gust values and flag symbol will be cut off. Use at least width: 700px; min-height: 550px for comfortable display, or 800px x 650px for large dashboards.

Wind Rose Font Limitations

Wind rose text is SVG-rendered and cannot be resized with CSS. The cardinal directions (N, NE, E, etc.), compass values, and avg/gust readouts at the bottom of the wind rose are rendered inside SVG or canvas. CSS selectors like .allmeteo-widget .wind-avg or .allmeteo-widget [class*="avg"] will have no effect on these elements. The only way to make the wind rose text larger is to increase the wind rose container size — the internal text scales proportionally with the circle diameter.

13. Advanced Example: Soil Moisture with Stoplight Zones

This example shows soil water tension monitoring with three colored zones — blue for wet, green for optimal, and brown for dry. The inverted attribute flips the Y-axis so wetter soil (lower kPa) is at the top.

<div style="background-color: #C0FACB; width: 400px;
            min-height: 300px; border: 5px solid rgb(51, 81, 145);">
  <div class="allmeteo-widget"
       data-mg="2700"
       measurands="233101,235101"
       inverted="233101,235101"
       expanded="233101,235101"
       thresholds="233101|15,233101|30,235101|15,235101|30"
       range="233101:0:55,235101:0:55"
       area="233101|0|15|#568a9980,
             233101|15|30|#6daa5d80,
             233101|30|max|#a4801d80,
             235101|0|15|#568a9980,
             235101|15|30|#6daa5d80,
             235101|30|max|#a4801d80"
       color-bg="white" color-text="black"
       color-line="black" color-axis="black"
       color-threshold="white">
  </div>
</div>

Zone (kPa)	Color	Hex	Meaning
0 – 15	Blue/Teal	`#568a9980`	Wet — soil is saturated
15 – 30	Green	`#6daa5d80`	Optimal — good moisture level
30+	Brown	`#a4801d80`	Dry — irrigation needed

Consistency rule: The threshold values, area zone boundaries, and range must all align. In this example, thresholds draw lines at 15 and 30, area zones change color at 15 and 30, and the range is fixed to 0:55 so all three zones are always visible. If any of these are mismatched, the visual result will be confusing.

Adding Soil VWC and Temperature

Some stations include additional sensors for volumetric water content (VWC) and soil temperature. Add them to the same widget with their own ranges:

<div class="allmeteo-widget"
     data-mg="3052"
     measurands="320101,235101,254100"
     inverted="320101,235101,254100"
     expanded="320101,235101,254100"
     thresholds="320101|15,320101|30,235101|15,235101|30,254100|28,254100|40"
     range="320101:0:55,235101:0:55,254100:20:45"
     area="320101|0|15|#568a9980,320101|15|30|#6daa5d80,320101|30|max|#a4801d80,
           235101|0|15|#568a9980,235101|15|30|#6daa5d80,235101|30|max|#a4801d80,
           254100|40|max|#568a9980,254100|28|40|#6daa5d80,254100|0|28|#a4801d80"
     color-bg="white" color-text="black"
     color-line="black" color-axis="black"
     color-threshold="white">
</div>

14. Complete Dashboard Example

A full dashboard page combining a data widget with expanded, color-coded plots and a wind rose stoplight:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Weather Dashboard</title>
<style>
  body { font-family: Arial, sans-serif; margin: 20px; background: #f0f0f0; }
  .dashboard {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* Safe table font override — 50% bigger */
  .allmeteo-widget table th { font-size: 150% !important; }
  .allmeteo-widget table td { font-size: 150% !important; }
</style>
</head>
<body>

<div class="dashboard">

  <!-- Data widget with colored plot backgrounds -->
  <div style="width: 900px; min-height: 200px;
              border: 5px solid rgb(51, 81, 145);
              background: #fff; border-radius: 6px;
              margin-bottom: 20px;">
    <div class="allmeteo-widget"
         data-mg="4492"
         measurands="10101,20101,51101,80100,90100"
         measurandsNames="AIR TEMPERATURE,HUMIDITY,PRECIPITATION ACCUM,WIND SPEED,WIND DIRECTION"
         expanded="10101,20101,51101,80100,90100"
         range="90100:0:360"
         thresholds="90100|79,90100|169,90100|259"
         area="10101|min|max|#fff0ef60,
               20101|min|max|#eff6ff60,
               51101|min|max|#e8f8f560,
               80100|min|max|#eefbee60,
               90100|0|79|#fef3cd50,
               90100|79|169|#d4edda50,
               90100|169|259|#f8d7da50,
               90100|259|max|#fef3cd50"
         color-bg="white" color-text="black"
         color-line="black" color-axis="#333"
         color-threshold="#cccccc"
         style="width: 100%;">
    </div>
  </div>

  <!-- Wind Rose Stoplight -->
  <div style="width: 800px; min-height: 650px;
              border: 5px solid rgb(51, 81, 145);
              background: #fff; border-radius: 6px;">
    <div class="allmeteo-widget"
         data-mg="4492"
         wind
         kite-angles="79,169,169,259,439">
    </div>
  </div>

</div>

<!-- Script loaded ONCE at the end -->
<script type="text/javascript"
  src="https://weather.allmeteo.com/widget/allmeteo.widget.js">
</script>
</body>
</html>

15. Multiple Widgets on One Page

You can place as many widget divs as needed on a single page. Use a table or flexbox layout to arrange them. The script at the bottom initializes all of them.

<!-- Side-by-side layout with a table -->
<table>
<tr>
  <td>
    Wind Rose
    <div style="width: 500px; min-height: 400px;
                border: 5px solid rgb(51, 81, 145);">
      <div class="allmeteo-widget"
           data-mg="4492" wind kite-angles="79,169,169,259,439">
      </div>
    </div>
  </td>
  <td>
    All Parameters
    <div style="width: 500px; min-height: 400px;
                border: 5px solid rgb(51, 81, 145);">
      <div class="allmeteo-widget" data-mg="4492"></div>
    </div>
  </td>
</tr>
</table>

<!-- Load ONCE after all widgets -->
<script type="text/javascript"
  src="https://weather.allmeteo.com/widget/allmeteo.widget.js">
</script>

Important: When placing the large data widget inside a table, always put it in a <td> cell. A <div> placed directly inside a <tr> without a <td> is invalid HTML and will render unpredictably across browsers.

16. Quick Reference: All Widget Attributes

Attribute	Description	Example
`data-mg`	Measurement group ID (required)	`data-mg="4492"`
`data-ws`	Weather station ID (alternative to data-mg)	`data-ws="2407LH072"`
`measurands`	Comma-separated measurand IDs to display	`measurands="10101,20101"`
`measurandsNames`	Custom names for each measurand	`measurandsNames="TEMP,HUMID"`
`expanded`	Measurand IDs to show with plots open	`expanded="10101,20101"`
`inverted`	Measurand IDs with flipped Y-axis	`inverted="320101,235101"`
`range`	Force Y-axis range (always specify min:max)	`range="320101:0:55"`
`thresholds`	Horizontal reference lines	`thresholds="320101\|15,320101\|30"`
`area`	Colored background zones on plots	`area="320101\|0\|15\|#568a9980"`
`wind`	Enables wind rose display (no value needed)	`wind`
`kite-angles`	Stoplight zones for wind rose (5 values)	`kite-angles="79,169,169,259,439"`
`color-bg`	Widget background color	`color-bg="white"`
`color-text`	Text color	`color-text="black"`
`color-line`	Plot line color	`color-line="black"`
`color-axis`	Axis line and label color	`color-axis="#333"`
`color-threshold`	Threshold line color	`color-threshold="red"`

17. Common HTML Pitfalls in Widget Pages

When building pages with many widgets (especially in table layouts), watch for these common HTML errors that cause rendering issues:

Duplicate Element IDs

Every id attribute on the page must be unique. If you copy-paste widget containers, make sure to rename the IDs. Duplicate IDs cause JavaScript to target the wrong element.

<!-- WRONG — both divs have id="widget15" -->
<div id="widget15" class="allmeteo-widget" data-ws="2008SH035"></div>
...
<div id="widget15" class="allmeteo-widget" data-ws="2103SH030"></div>

<!-- CORRECT — unique IDs -->
<div id="widget-dl-2008" class="allmeteo-widget" data-ws="2008SH035"></div>
...
<div id="widget-dl-2103" class="allmeteo-widget" data-ws="2103SH030"></div>

Missing `solid` in Border Shorthand

The CSS border shorthand requires three parts: width, style, and color. Omitting the style keyword causes the border to be invisible.

<!-- WRONG — border won't render (missing "solid") -->
<div style="border: 5px #3879ce;">

<!-- CORRECT -->
<div style="border: 5px solid #3879ce;">

Fixed `height` Instead of `min-height`

Using height: 300px instead of min-height: 300px clips the widget content when plots are expanded. Always use min-height.

Unclosed Table Rows

When arranging widgets in <table> layouts, make sure every <tr> has a matching </tr>. Missing closing tags cause layout shifts where widgets appear in the wrong row.

18. Troubleshooting

Plots are clipped or cut off

Remove overflow: hidden from the container
Replace fixed height with min-height
Remove any transform: scale()
Make sure the container is wide enough for the content

Right-side labels (MAX/MIN) are truncated

Remove any font-size CSS overrides on .allmeteo-widget svg text
Remove font-weight overrides (bold text takes more horizontal space)
Increase the container width to give plots more room

Color zones are missing or only partially visible

Make sure the range attribute specifies both min AND max (e.g., 320101:0:55 not just 320101:0)
Verify that area zone boundaries match thresholds values — e.g., if thresholds are at |15 and |30, area zones must also change at 15 and 30
Check that zones cover the full range without gaps: 0|15, 15|30, 30|max

Wind gust flag symbol shows as horizontal lines (macOS)

This is a cross-platform font rendering issue — the gust pennant glyph exists in Windows system fonts but not macOS
Remove any font-weight overrides, which make the issue worse
A permanent fix requires updating the widget JavaScript to use an SVG icon or web font instead of a platform-dependent character

Wind rose text too small

CSS font-size overrides do not affect wind rose text — it is rendered in SVG/canvas
The only way to increase cardinal directions, compass values, and avg/gust readouts is to make the wind rose container larger (the text scales proportionally with the circle size)

Widget not loading

Make sure the script tag is present and loads https://weather.allmeteo.com/widget/allmeteo.widget.js
Load the script only once, after all widget divs
Verify your data-mg or data-ws ID is correct

Widgets rendering twice or duplicated

Check that the script tag is not included multiple times (e.g., once inside a widget div and once at the bottom)