@amcharts/amcharts5-mcp 1.9.0 → 1.9.1

package/content/radar.md

@@ -1,5 +1,7 @@
 # Radar & Gauge Charts
 
+> **As a JSON config:** see `references/json.md`. The settings below go into each object's `"settings"` there.
+
 
 ## Required imports
 

package/content/stock.md

@@ -1,4 +1,7 @@
 # Stock & Financial Charts
+
+> **As a JSON config:** see `references/json.md`. The settings below go into each object's `"settings"` there.
+
 Build financial stock charts with panels, indicators, and toolbar.
 
 

package/content/timeline.md

@@ -1,5 +1,7 @@
 # Timeline Charts — Curve, Serpentine, Spiral
 
+> **As a JSON config:** see `references/json.md`. The settings below go into each object's `"settings"` there.
+
 Docs: https://www.amcharts.com/docs/v5/charts/timeline/
 
 Timeline charts are "curved XY charts" — they use XY-style axes and series but bend the chart into serpentine, spiral, or custom shapes. Added in amCharts 5.12.0.

package/content/venn.md

@@ -1,5 +1,7 @@
 # Venn Diagram
 
+> **As a JSON config:** see `references/json.md`. The settings below go into each object's `"settings"` there.
+
 Docs: https://www.amcharts.com/docs/v5/charts/venn/
 
 Venn diagrams show overlapping relationships between sets. There is NO `VennDiagram` chart class — `am5venn.Venn` is both the series and the visual container, pushed directly into `root.container.children` (or any `Container`).

package/content/wordcloud.md

@@ -1,5 +1,7 @@
 # Word Cloud
 
+> **As a JSON config:** see `references/json.md`. The settings below go into each object's `"settings"` there.
+
 Docs: https://www.amcharts.com/docs/v5/charts/word-cloud/
 
 Word Cloud displays words/tags sized by their value/weight. It's a "container-less" chart — the series is pushed directly to `root.container.children` (no wrapper chart object).

package/content/xy.md

@@ -1,5 +1,7 @@
 # XY Charts — Line, Area, Bar, Column, Candlestick, Scatter
 
+> **As a JSON config:** see `references/json.md`. The settings below go into each object's `"settings"` there.
+
 
 ## Required imports
 
@@ -811,6 +813,34 @@ series.fills.template.set("fillGradient", am5.LinearGradient.new(root, {
 
 `RadialGradient` is centered on map polygons, line and area fills and bullets since 5.21.1 (with `target` set, on the target). 5.21.1 put one with pixel `x`/`y` off-center on radar fills and similar shapes; 5.21.2 fixes that.
 
+## Different pattern per column
+
+To tell columns apart without color (print, grayscale, color-blind readers), give each one a fill pattern through its data row. The full example is `column-bar/column-chart-with-patterns`.
+
+```js
+series.columns.template.setAll({
+  fill: am5.color(0xffffff),       // shows in the gaps between the pattern's shapes
+  stroke: am5.color(0x000000),
+  templateField: "columnSettings"  // on the columns' template, not on the series
+});
+
+const black = am5.color(0x000000);
+const data = [
+  { source: "Search", visits: 4200, columnSettings: { fillPattern: am5.LinePattern.new(root, { color: black, angle: 45, strokeWidth: 2, gap: 6 }) } },
+  { source: "Social", visits: 2600, columnSettings: { fillPattern: am5.CirclePattern.new(root, { color: black, radius: 2, gap: 5 }) } },
+  { source: "Email",  visits: 1500, columnSettings: { fillPattern: am5.RectanglePattern.new(root, { color: black, maxWidth: 5, maxHeight: 5, gap: 5, checkered: true }) } },
+  { source: "Direct", visits: 3100, columnSettings: { fillPattern: am5.LinePattern.new(root, { color: black, angle: 90, strokeWidth: 2, gap: 6 }) } }
+];
+xAxis.data.setAll(data);
+series.data.setAll(data);
+```
+
+- `templateField` is a setting of `series.columns.template`. Set on the series, it does nothing and the columns stay plain.
+- A pattern's `color` is the color of its lines, dots or squares. The gaps show the column's `fill`, or the pattern's own `fill` (with `fillOpacity`) when it has one. A `color` equal to what shows in the gaps makes the column look solid. Always set `color`: without one, the shapes are black whatever the column's colors (5.21.3).
+- `LinePattern`: set the line direction with `angle` (5.14+; 0 is horizontal, 90 upright). `rotation` turns the whole tile instead, and at 45° the tile edges show as broken lines.
+- Make each pattern once, as above. An adapter that returns `am5.LinePattern.new(…)` makes a new pattern every time the setting is read.
+- In a JSON config, a row that holds a pattern needs `"__parse": true`, and so does its settings object (`references/json.md`, rule 3): `{ "source": "Search", "visits": 4200, "columnSettings": { "fillPattern": { "type": "LinePattern", "settings": { "color": { "type": "Color", "value": "#000000" }, "angle": 45 } }, "__parse": true }, "__parse": true }`.
+
 ## Changing fields and axes after creation (5.20.0)
 
 ```js

package/extended/examples/column-bar/column-chart-with-patterns.md

@@ -0,0 +1,170 @@
+---
+title: "Column Chart with Patterns"
+source: "amcharts5-mcp: written for the skill, checked in a browser with amCharts 5.21.3"
+category: "column-bar"
+---
+
+A column chart where every column has a fill pattern of its own: diagonal lines, dots, a checkerboard and vertical lines (LinePattern, CirclePattern, RectanglePattern), in black on white, so it reads printed in black and white.
+
+When patterns beat colors: patterns tell columns apart without relying on color, which helps readers with color blindness and survives grayscale printing. Each column gets its pattern through its data row, with a template field on the columns' template. Keep to a handful: past six or seven, patterns get busy.
+
+Good for:
+- Charts that must read in print or grayscale
+- Accessible charts for color-blind readers
+- Marking special columns: forecast, estimate, incomplete
+
+Think twice when:
+- Many columns: patterns get busy, use colors and a legend
+- Thin columns: patterns need room to show
+
+Things that go wrong:
+- `templateField` set on the series instead of on `series.columns.template`: the series ignores it, and the columns stay plain.
+- A pattern `color` equal to the fill behind it: the stripes vanish and the column looks solid. The gaps show the column's `fill`, or the pattern's own `fill` if it has one.
+- No pattern `color`: the shapes are drawn black whatever the column's colors (5.21.3).
+- `rotation` on a LinePattern turns the whole tile, and at 45° its edges show as broken lines. Set the line direction with `angle`.
+
+Prompt: Create a column chart of website visits by traffic source (Search, Social, Email, Direct), with a different black-and-white fill pattern in each column and the value above it. Use the amCharts 5 library.
+
+## JavaScript
+
+```javascript
+// Create root and chart
+var root = am5.Root.new("chartdiv");
+
+// Set themes
+root.setThemes([
+  am5themes_Animated.new(root)
+]);
+
+var chart = root.container.children.push(am5xy.XYChart.new(root, {
+  panX: false,
+  panY: false,
+  paddingLeft: 0
+}));
+
+// Create axes
+// https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
+var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
+  categoryField: "source",
+  renderer: am5xy.AxisRendererX.new(root, { minGridDistance: 30 })
+}));
+
+var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
+  min: 0,
+  renderer: am5xy.AxisRendererY.new(root, {})
+}));
+
+// Create series
+// https://www.amcharts.com/docs/v5/charts/xy-chart/series/
+var series = chart.series.push(am5xy.ColumnSeries.new(root, {
+  name: "Visits",
+  xAxis: xAxis,
+  yAxis: yAxis,
+  valueYField: "visits",
+  categoryXField: "source",
+  tooltip: am5.Tooltip.new(root, { labelText: "{categoryX}: {valueY}" })
+}));
+
+var black = am5.color(0x000000);
+
+series.columns.template.setAll({
+  width: am5.percent(70),
+  fill: am5.color(0xffffff), // white: shows in the gaps between the pattern's shapes
+  stroke: black,             // a black outline
+  strokeWidth: 2,
+  // each column's pattern comes from "columnSettings" in its data row;
+  // templateField goes on the columns' template, not on the series
+  templateField: "columnSettings"
+});
+
+// Value labels above the columns
+series.bullets.push(function () {
+  return am5.Bullet.new(root, {
+    locationY: 1,
+    sprite: am5.Label.new(root, {
+      text: "{valueY}",
+      fill: black,
+      centerX: am5.p50,
+      centerY: am5.p100,
+      populateText: true
+    })
+  });
+});
+
+// One pattern per column, made once here. Each pattern's color is black,
+// which contrasts with the white column fill behind it.
+var data = [{
+  source: "Search",
+  visits: 4200,
+  columnSettings: {
+    fillPattern: am5.LinePattern.new(root, { // lines...
+      color: black,  // ...in black...
+      angle: 45,     // ...at 45 degrees: angle turns the lines, not the tile...
+      strokeWidth: 2,
+      gap: 6         // ...6px apart
+    })
+  }
+}, {
+  source: "Social",
+  visits: 2600,
+  columnSettings: {
+    fillPattern: am5.CirclePattern.new(root, { // dots...
+      color: black, // ...in black...
+      radius: 2,    // ...with a 2px radius...
+      gap: 5        // ...5px apart
+    })
+  }
+}, {
+  source: "Email",
+  visits: 1500,
+  columnSettings: {
+    fillPattern: am5.RectanglePattern.new(root, { // squares...
+      color: black,  // ...in black...
+      maxWidth: 5,   // ...5px wide...
+      maxHeight: 5,  // ...and 5px high...
+      gap: 5,        // ...5px apart...
+      checkered: true // ...every second one, like a checkerboard
+    })
+  }
+}, {
+  source: "Direct",
+  visits: 3100,
+  columnSettings: {
+    fillPattern: am5.LinePattern.new(root, { // lines...
+      color: black,  // ...in black...
+      angle: 90,     // ...upright...
+      strokeWidth: 2,
+      gap: 6         // ...6px apart
+    })
+  }
+}];
+
+xAxis.data.setAll(data);
+series.data.setAll(data);
+
+// Make stuff animate on load
+// https://www.amcharts.com/docs/v5/concepts/animations/
+series.appear(1000);
+chart.appear(1000, 100);
+```
+
+## HTML
+
+```html
+<div id="chartdiv"></div>
+```
+
+## CSS
+
+```css
+#chartdiv {
+  width: 100%;
+  height: 500px;
+}
+```
+
+## Required resources
+
+- https://cdn.amcharts.com/lib/5/index.js
+- https://cdn.amcharts.com/lib/5/xy.js
+- https://cdn.amcharts.com/lib/5/themes/Animated.js

package/extended/examples/json-configs/flow-arc-diagram.md

@@ -0,0 +1,198 @@
+---
+title: "Arc Diagram (JSON config)"
+category: "json-configs"
+source: "@amcharts/amcharts5@5.21.3: examples/flow-arc-diagram/config.json"
+---
+
+# Arc Diagram (JSON config)
+
+An arc diagram: nodes in a row, sized by their total, with arcs for the links between them and a label under each node.
+
+Chart family: flow · Tags: arc diagram, flow, links, labels
+
+A complete amCharts 5 JSON config, as shipped in the `@amcharts/amcharts5` npm package (examples/flow-arc-diagram/config.json, version 5.21.3). It works with `am5plugins_json.JsonParser`, the `<am5-chart>` element, the framework packages' `config` prop, and Chart Maker links. The rules for writing one are in the skill's JSON reference (get_chart_reference("json")).
+
+Themes are not part of a config. The example is meant for: Animated, set with `root.setThemes()`, the element's `themes` attribute, or a Chart Maker link's `theme`.
+
+## Required resources
+
+- https://cdn.amcharts.com/lib/5/index.js
+- https://cdn.amcharts.com/lib/5/plugins/json.js
+- https://cdn.amcharts.com/lib/5/flow.js
+- https://cdn.amcharts.com/lib/5/themes/Animated.js (theme, applied separately)
+
+## JSON config
+
+```json
+{
+  "type": "ArcDiagram",
+  "settings": {
+    "sourceIdField": "source",
+    "targetIdField": "target",
+    "valueField": "value",
+    "orientation": "horizontal",
+    "paddingBottom": 70,
+    "autoAppear": true,
+    "appearDuration": 1000,
+    "appearDelay": 100
+  },
+  "properties": {
+    "data": "#data-0",
+    "nodes": {
+      "properties": {
+        "labels": {
+          "properties": {
+            "template": {
+              "settings": {
+                "fontSize": "0.85em",
+                "position": "absolute",
+                "y": {
+                  "type": "Percent",
+                  "value": 50
+                },
+                "paddingRight": 6
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "refs": [
+    {
+      "data-0": [
+        {
+          "source": "Monica",
+          "target": "Rachel",
+          "value": 4
+        },
+        {
+          "source": "Monica",
+          "target": "Chandler",
+          "value": 63
+        },
+        {
+          "source": "Monica",
+          "target": "Ross",
+          "value": 16
+        },
+        {
+          "source": "Monica",
+          "target": "Joey",
+          "value": 9
+        },
+        {
+          "source": "Monica",
+          "target": "Phoebe",
+          "value": 3
+        },
+        {
+          "source": "Monica",
+          "target": "Pete",
+          "value": 10
+        },
+        {
+          "source": "Rachel",
+          "target": "Chandler",
+          "value": 7
+        },
+        {
+          "source": "Rachel",
+          "target": "Ross",
+          "value": 80
+        },
+        {
+          "source": "Rachel",
+          "target": "Joey",
+          "value": 30
+        },
+        {
+          "source": "Rachel",
+          "target": "Phoebe",
+          "value": 6
+        },
+        {
+          "source": "Rachel",
+          "target": "Tag",
+          "value": 4
+        },
+        {
+          "source": "Chandler",
+          "target": "Joey",
+          "value": 1
+        },
+        {
+          "source": "Chandler",
+          "target": "Phoebe",
+          "value": 7
+        },
+        {
+          "source": "Chandler",
+          "target": "Janice",
+          "value": 11
+        },
+        {
+          "source": "Chandler",
+          "target": "Kathy",
+          "value": 7
+        },
+        {
+          "source": "Ross",
+          "target": "Joey",
+          "value": 3
+        },
+        {
+          "source": "Ross",
+          "target": "Phoebe",
+          "value": 18
+        },
+        {
+          "source": "Ross",
+          "target": "Carol",
+          "value": 10
+        },
+        {
+          "source": "Ross",
+          "target": "Emily",
+          "value": 12
+        },
+        {
+          "source": "Ross",
+          "target": "Mona",
+          "value": 11
+        },
+        {
+          "source": "Ross",
+          "target": "Charlie",
+          "value": 10
+        },
+        {
+          "source": "Joey",
+          "target": "Phoebe",
+          "value": 6
+        },
+        {
+          "source": "Joey",
+          "target": "Janine",
+          "value": 9
+        },
+        {
+          "source": "Joey",
+          "target": "Charlie",
+          "value": 3
+        },
+        {
+          "source": "Phoebe",
+          "target": "David",
+          "value": 14
+        },
+        {
+          "source": "Phoebe",
+          "target": "Mike",
+          "value": 18
+        }
+      ]
+    }
+  ]
+}
+```

package/extended/examples/json-configs/flow-chord-directed.md

@@ -0,0 +1,211 @@
+---
+title: "Directed Chord Diagram (JSON config)"
+category: "json-configs"
+source: "@amcharts/amcharts5@5.21.3: examples/flow-chord-directed/config.json"
+---
+
+# Directed Chord Diagram (JSON config)
+
+A chord diagram whose links end in arrowheads, so each one shows its direction.
+
+Chart family: flow · Tags: chord, directed, flow, radial labels
+
+A complete amCharts 5 JSON config, as shipped in the `@amcharts/amcharts5` npm package (examples/flow-chord-directed/config.json, version 5.21.3). It works with `am5plugins_json.JsonParser`, the `<am5-chart>` element, the framework packages' `config` prop, and Chart Maker links. The rules for writing one are in the skill's JSON reference (get_chart_reference("json")).
+
+Themes are not part of a config. The example is meant for: Animated, set with `root.setThemes()`, the element's `themes` attribute, or a Chart Maker link's `theme`.
+
+## Required resources
+
+- https://cdn.amcharts.com/lib/5/index.js
+- https://cdn.amcharts.com/lib/5/plugins/json.js
+- https://cdn.amcharts.com/lib/5/flow.js
+- https://cdn.amcharts.com/lib/5/themes/Animated.js (theme, applied separately)
+
+## JSON config
+
+```json
+{
+  "type": "ChordDirected",
+  "settings": {
+    "sourceIdField": "source",
+    "targetIdField": "target",
+    "valueField": "value",
+    "radius": {
+      "type": "Percent",
+      "value": 75
+    },
+    "startAngle": 80,
+    "autoAppear": true,
+    "appearDuration": 1000,
+    "appearDelay": 100
+  },
+  "properties": {
+    "data": "#data-0",
+    "links": {
+      "properties": {
+        "template": {
+          "settings": {
+            "fillStyle": "source"
+          }
+        }
+      }
+    },
+    "nodes": {
+      "properties": {
+        "labels": {
+          "properties": {
+            "template": {
+              "settings": {
+                "textType": "radial",
+                "centerX": 0,
+                "fontSize": "0.8em"
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "refs": [
+    {
+      "data-0": [
+        {
+          "source": "Monica",
+          "target": "Rachel",
+          "value": 4
+        },
+        {
+          "source": "Monica",
+          "target": "Chandler",
+          "value": 113
+        },
+        {
+          "source": "Monica",
+          "target": "Ross",
+          "value": 16
+        },
+        {
+          "source": "Monica",
+          "target": "Joey",
+          "value": 9
+        },
+        {
+          "source": "Monica",
+          "target": "Phoebe",
+          "value": 3
+        },
+        {
+          "source": "Monica",
+          "target": "Richard",
+          "value": 16
+        },
+        {
+          "source": "Monica",
+          "target": "Pete",
+          "value": 10
+        },
+        {
+          "source": "Rachel",
+          "target": "Chandler",
+          "value": 7
+        },
+        {
+          "source": "Rachel",
+          "target": "Ross",
+          "value": 80
+        },
+        {
+          "source": "Rachel",
+          "target": "Joey",
+          "value": 30
+        },
+        {
+          "source": "Rachel",
+          "target": "Phoebe",
+          "value": 6
+        },
+        {
+          "source": "Chandler",
+          "target": "Joey",
+          "value": 1
+        },
+        {
+          "source": "Chandler",
+          "target": "Phoebe",
+          "value": 7
+        },
+        {
+          "source": "Chandler",
+          "target": "Janice",
+          "value": 11
+        },
+        {
+          "source": "Chandler",
+          "target": "Kathy",
+          "value": 7
+        },
+        {
+          "source": "Ross",
+          "target": "Joey",
+          "value": 3
+        },
+        {
+          "source": "Ross",
+          "target": "Phoebe",
+          "value": 18
+        },
+        {
+          "source": "Ross",
+          "target": "Carol",
+          "value": 10
+        },
+        {
+          "source": "Ross",
+          "target": "Emily",
+          "value": 12
+        },
+        {
+          "source": "Ross",
+          "target": "Elizabeth",
+          "value": 8
+        },
+        {
+          "source": "Ross",
+          "target": "Mona",
+          "value": 11
+        },
+        {
+          "source": "Ross",
+          "target": "Charlie",
+          "value": 10
+        },
+        {
+          "source": "Joey",
+          "target": "Phoebe",
+          "value": 6
+        },
+        {
+          "source": "Joey",
+          "target": "Janine",
+          "value": 9
+        },
+        {
+          "source": "Phoebe",
+          "target": "David",
+          "value": 14
+        },
+        {
+          "source": "Phoebe",
+          "target": "Gary",
+          "value": 7
+        },
+        {
+          "source": "Phoebe",
+          "target": "Mike",
+          "value": 18
+        }
+      ]
+    }
+  ]
+}
+```