@amcharts/amcharts5-mcp 1.0.0

package/amcharts5-skill/amcharts5-skill/references/venn.md

@@ -0,0 +1,368 @@
+# Venn Diagram
+
+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`).
+
+## Imports
+
+### ES modules / TypeScript
+```ts
+import * as am5 from "@amcharts/amcharts5";
+import * as am5venn from "@amcharts/amcharts5/venn";
+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
+```
+
+### CDN / script tags
+```html
+<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
+<script src="https://cdn.amcharts.com/lib/5/venn.js"></script>
+<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
+```
+
+## Setup
+
+**IMPORTANT:** There is no `am5venn.VennDiagram` class. The `am5venn.Venn` object IS the chart — push it directly into a container.
+
+```js
+const root = am5.Root.new("chartdiv");
+root.setThemes([am5themes_Animated.new(root)]);
+
+// Create a wrapper container (optional, useful for adding legend)
+const container = root.container.children.push(am5.Container.new(root, {
+  width: am5.p100,
+  height: am5.p100,
+  layout: root.verticalLayout
+}));
+
+// Venn is pushed directly into the container — NOT into chart.series
+const series = container.children.push(
+  am5venn.Venn.new(root, {
+    categoryField: "name",
+    valueField: "value",
+    intersectionsField: "sets",   // field that holds parent set names
+  })
+);
+```
+
+## Data structure
+
+Venn data contains two types of entries:
+
+### 1. Sets (circles)
+
+Each set defines a circle. `value` controls the circle's area.
+
+```js
+{ name: "Set A", value: 100 }
+```
+
+### 2. Intersections (overlaps)
+
+Intersections reference their parent sets by name via the `sets` array. `value` controls the overlap area.
+
+```js
+{ name: "A ∩ B", value: 30, sets: ["Set A", "Set B"] }
+```
+
+### Complete example data
+
+```js
+series.data.setAll([
+  // Individual sets (circles)
+  { name: "Set A", value: 100 },
+  { name: "Set B", value: 80 },
+  { name: "Set C", value: 60 },
+
+  // Two-set intersections
+  { name: "A ∩ B", value: 30, sets: ["Set A", "Set B"] },
+  { name: "B ∩ C", value: 20, sets: ["Set B", "Set C"] },
+  { name: "A ∩ C", value: 15, sets: ["Set A", "Set C"] },
+
+  // Three-set intersection
+  { name: "A ∩ B ∩ C", value: 10, sets: ["Set A", "Set B", "Set C"] }
+]);
+```
+
+**Important:** The `sets` array values must exactly match the `name` field of the parent sets.
+
+## Customizing appearance
+
+### Slices (circles)
+
+```js
+series.slices.template.setAll({
+  fillOpacity: 0.6,
+  strokeWidth: 2,
+  stroke: am5.color(0xffffff),
+  tooltipText: "{category}: {value}"
+});
+
+// Hover state
+series.slices.template.states.create("hover", {
+  fillOpacity: 0.8,
+  scale: 1.02
+});
+```
+
+### Labels
+
+```js
+series.labels.template.setAll({
+  text: "{category}",
+  fontSize: 16,
+  fill: am5.color(0x000000),
+  textAlign: "center",
+  oversizedBehavior: "truncate"   // "truncate" | "wrap" | "none"
+});
+```
+
+### Custom colors
+
+```js
+// Per-set colors from data
+series.data.setAll([
+  { name: "Frontend", value: 100, fill: am5.color(0x264653) },
+  { name: "Backend", value: 80, fill: am5.color(0x2a9d8f) },
+  // ...
+]);
+
+// Use fillField to map colors from data
+am5venn.Venn.new(root, {
+  categoryField: "name",
+  valueField: "value",
+  intersectionsField: "sets",
+  fillField: "fill"
+})
+```
+
+### Hide labels on intersections
+
+```js
+series.labels.template.adapters.add("text", function(text, target) {
+  if (target.dataItem && target.dataItem.dataContext.sets) {
+    return "";  // hide label on intersections
+  }
+  return text;
+});
+```
+
+## Click events
+
+```js
+series.slices.template.events.on("click", function(ev) {
+  var dataItem = ev.target.dataItem;
+  console.log("Clicked:", dataItem.get("category"));
+});
+```
+
+## Legend
+
+```js
+// Add legend to the same container as the Venn series
+const legend = container.children.push(am5.Legend.new(root, {
+  centerX: am5.percent(50),
+  x: am5.percent(50),
+  layout: root.horizontalLayout
+}));
+
+// Only show legend for main sets, not intersections
+legend.data.setAll(series.dataItems.filter(function(di) {
+  return !di.dataContext.sets;
+}));
+```
+
+## Two-set Venn example
+
+```js
+series.data.setAll([
+  { name: "Frontend", value: 300 },
+  { name: "Backend", value: 250 },
+  { name: "Frontend ∩ Backend", value: 80, sets: ["Frontend", "Backend"] }  // intersection — name must be unique
+]);
+```
+
+## Notes on sizing and positioning
+
+- Circle sizes are proportional to `value`
+- Intersection overlap is **approximate** — amCharts positions circles to visually suggest the declared intersection values, but exact area-proportional overlap is not guaranteed
+- For best results, keep intersection values smaller than either parent set value
+- Very small intersections relative to set sizes may not be visible
+
+---
+
+## Example: Technology skills Venn diagram
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Venn Diagram</title>
+  <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
+  <script src="https://cdn.amcharts.com/lib/5/venn.js"></script>
+  <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
+  <style>
+    #chartdiv { width: 100%; height: 500px; }
+  </style>
+</head>
+<body>
+  <div id="chartdiv"></div>
+  <script>
+    var root = am5.Root.new("chartdiv");
+    root.setThemes([am5themes_Animated.new(root)]);
+
+    var container = root.container.children.push(am5.Container.new(root, {
+      width: am5.p100,
+      height: am5.p100,
+      layout: root.verticalLayout
+    }));
+
+    var series = container.children.push(
+      am5venn.Venn.new(root, {
+        categoryField: "name",
+        valueField: "value",
+        intersectionsField: "sets"
+      })
+    );
+
+    // Slice styling
+    series.slices.template.setAll({
+      fillOpacity: 0.6,
+      strokeWidth: 2,
+      stroke: am5.color(0xffffff),
+      tooltipText: "{category}: {value}"
+    });
+
+    series.slices.template.states.create("hover", {
+      fillOpacity: 0.8
+    });
+
+    // Label styling
+    series.labels.template.setAll({
+      text: "{category}",
+      fontSize: 14,
+      fill: am5.color(0x000000)
+    });
+
+    // Data
+    series.data.setAll([
+      { name: "Frontend", value: 120 },
+      { name: "Backend", value: 100 },
+      { name: "DevOps", value: 70 },
+      { name: "Frontend ∩ Backend", value: 40, sets: ["Frontend", "Backend"] },
+      { name: "Backend ∩ DevOps", value: 25, sets: ["Backend", "DevOps"] },
+      { name: "Frontend ∩ DevOps", value: 15, sets: ["Frontend", "DevOps"] },
+      { name: "Full Stack", value: 10, sets: ["Frontend", "Backend", "DevOps"] }
+    ]);
+
+    // Legend — only main sets
+    var legend = container.children.push(am5.Legend.new(root, {
+      centerX: am5.percent(50),
+      x: am5.percent(50)
+    }));
+    legend.data.setAll(series.dataItems.filter(function(di) {
+      return !di.dataContext.sets;
+    }));
+
+    series.appear(1000);
+    // Note: no chart.appear() needed — Venn is not a chart, just a series
+  </script>
+</body>
+</html>
+```
+
+## Example 2: Two-set Venn with custom colors and click handler
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Two-Set Venn</title>
+  <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
+  <script src="https://cdn.amcharts.com/lib/5/venn.js"></script>
+  <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
+  <style>
+    #chartdiv { width: 100%; height: 500px; }
+  </style>
+</head>
+<body>
+  <div id="chartdiv"></div>
+  <script>
+    var root = am5.Root.new("chartdiv");
+    root.setThemes([am5themes_Animated.new(root)]);
+
+    var container = root.container.children.push(am5.Container.new(root, {
+      width: am5.p100,
+      height: am5.p100,
+      layout: root.verticalLayout
+    }));
+
+    var series = container.children.push(
+      am5venn.Venn.new(root, {
+        categoryField: "name",
+        valueField: "value",
+        intersectionsField: "sets",
+        fillField: "fill"
+      })
+    );
+
+    // Styling
+    series.slices.template.setAll({
+      fillOpacity: 0.65,
+      strokeWidth: 3,
+      stroke: am5.color(0xffffff),
+      tooltipText: "{category}: {value}"
+    });
+
+    series.slices.template.states.create("hover", {
+      fillOpacity: 0.85,
+      scale: 1.03
+    });
+
+    series.labels.template.setAll({
+      text: "{category}\n[bold]{value}[/]",
+      fontSize: 15,
+      fill: am5.color(0xffffff),
+      textAlign: "center"
+    });
+
+    // Hide labels on intersection
+    series.labels.template.adapters.add("text", function(text, target) {
+      if (target.dataItem && target.dataItem.dataContext.sets) {
+        return "[bold]{value}[/]";
+      }
+      return text;
+    });
+
+    // Click handler
+    series.slices.template.events.on("click", function(ev) {
+      var di = ev.target.dataItem;
+      alert(di.get("category") + ": " + di.get("value"));
+    });
+
+    // Data
+    series.data.setAll([
+      { name: "Mobile Users", value: 450, fill: am5.color(0x2196f3) },
+      { name: "Desktop Users", value: 380, fill: am5.color(0x4caf50) },
+      { name: "Both Platforms", value: 120, sets: ["Mobile Users", "Desktop Users"], fill: am5.color(0x9c27b0) }
+    ]);
+
+    // Legend — main sets only
+    var legend = container.children.push(am5.Legend.new(root, {
+      centerX: am5.percent(50),
+      x: am5.percent(50),
+      y: am5.percent(95),
+      centerY: am5.percent(100)
+    }));
+    legend.data.setAll(series.dataItems.filter(function(di) {
+      return !di.dataContext.sets;
+    }));
+
+    series.appear(1000);
+    // Note: no chart.appear() needed — Venn is not a chart, just a series
+  </script>
+</body>
+</html>
+```

package/amcharts5-skill/amcharts5-skill/references/wordcloud.md

@@ -0,0 +1,339 @@
+# Word Cloud
+
+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).
+
+## Imports
+
+### ES modules / TypeScript
+```ts
+import * as am5 from "@amcharts/amcharts5";
+import * as am5wc from "@amcharts/amcharts5/wc";
+import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
+```
+
+### CDN / script tags
+```html
+<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
+<script src="https://cdn.amcharts.com/lib/5/wc.js"></script>
+<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
+```
+
+## Setup
+
+```js
+const root = am5.Root.new("chartdiv");
+root.setThemes([am5themes_Animated.new(root)]);
+
+// WordCloud is pushed directly — no chart wrapper
+const series = root.container.children.push(
+  am5wc.WordCloud.new(root, {
+    categoryField: "tag",
+    valueField: "weight",
+    maxFontSize: am5.percent(15),   // relative to container
+    minFontSize: am5.percent(3),
+  })
+);
+
+// Data — LAST
+series.data.setAll([
+  { tag: "JavaScript", weight: 64 },
+  { tag: "Python", weight: 48 },
+  { tag: "TypeScript", weight: 35 },
+  { tag: "Java", weight: 30 },
+  { tag: "React", weight: 28 },
+  { tag: "Node.js", weight: 22 },
+  { tag: "CSS", weight: 18 },
+  { tag: "SQL", weight: 15 }
+]);
+
+series.appear(1000);
+```
+
+## Settings
+
+| Setting | Type | Default | Description |
+|---------|------|---------|-------------|
+| `categoryField` | string | — | Data field for word text (required) |
+| `valueField` | string | — | Data field for word weight/size (required) |
+| `maxFontSize` | percent/number | `am5.percent(20)` | Maximum font size |
+| `minFontSize` | percent/number | `am5.percent(2)` | Minimum font size |
+| `angles` | number[] | `[0, -90]` | Allowed rotation angles for words |
+| `randomness` | number (0–1) | `0.2` | Layout randomness (0 = ordered by value, 1 = fully random) |
+| `minWordLength` | number | `1` | Skip words shorter than this |
+| `maxCount` | number | — | Maximum number of words to display |
+| `excludeWords` | string[] | `[]` | Words to exclude |
+| `text` | string | — | Raw text to parse — words are extracted and weighted by frequency automatically |
+| `colors` | ColorSet | — | Color set for words |
+
+### excludeWords example
+
+```js
+am5wc.WordCloud.new(root, {
+  categoryField: "word",
+  valueField: "count",
+  excludeWords: ["the", "a", "an", "and", "or", "but", "in", "on", "at", "to", "is", "it"]
+});
+```
+
+**Note:** amCharts WordCloud does not support mask/shape rendering (words constrained to a custom shape). Words are arranged in a rectangular area.
+
+## Customizing labels
+
+```js
+series.labels.template.setAll({
+  fontFamily: "Courier New",
+  fontWeight: "bold",
+  paddingTop: 5,
+  paddingBottom: 5,
+  paddingLeft: 5,
+  paddingRight: 5,
+  tooltipText: "{category}: {value}",
+  cursorOverStyle: "pointer"
+});
+```
+
+## Click events
+
+```js
+series.labels.template.events.on("click", function(ev) {
+  var dataItem = ev.target.dataItem;
+  console.log("Clicked:", dataItem.get("category"), dataItem.get("value"));
+});
+```
+
+## Custom colors
+
+```js
+// From a fixed list
+series.set("colors", am5.ColorSet.new(root, {
+  colors: [
+    am5.color(0x095256),
+    am5.color(0x087f8c),
+    am5.color(0x5aaa95),
+    am5.color(0x86a873),
+    am5.color(0xbb9f06)
+  ]
+}));
+
+// Or use color from data
+series.labels.template.adapters.add("fill", function(fill, target) {
+  if (target.dataItem) {
+    return am5.color(target.dataItem.dataContext.color);
+  }
+  return fill;
+});
+```
+
+## Sentence Cloud
+
+Instead of individual words, you can display phrases by using multi-word category values:
+
+```js
+series.data.setAll([
+  { tag: "Machine Learning", weight: 40 },
+  { tag: "Data Science", weight: 35 },
+  { tag: "Web Development", weight: 30 }
+]);
+```
+
+## Changing data dynamically
+
+```js
+// Replace all data
+series.data.setAll(newData);
+
+// Add items
+series.data.push({ tag: "Rust", weight: 20 });
+
+// Remove by index
+series.data.removeIndex(0);
+```
+
+---
+
+## Example: Interactive word cloud
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Word Cloud</title>
+  <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
+  <script src="https://cdn.amcharts.com/lib/5/wc.js"></script>
+  <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
+  <style>
+    #chartdiv { width: 100%; height: 500px; }
+  </style>
+</head>
+<body>
+  <div id="chartdiv"></div>
+  <script>
+    var root = am5.Root.new("chartdiv");
+    root.setThemes([am5themes_Animated.new(root)]);
+
+    var series = root.container.children.push(
+      am5wc.WordCloud.new(root, {
+        categoryField: "tag",
+        valueField: "weight",
+        maxFontSize: am5.percent(15),
+        minFontSize: am5.percent(3),
+        angles: [0, -45, -90],
+        randomness: 0.3
+      })
+    );
+
+    // Custom colors
+    series.set("colors", am5.ColorSet.new(root, {
+      colors: [
+        am5.color(0x264653),
+        am5.color(0x2a9d8f),
+        am5.color(0xe9c46a),
+        am5.color(0xf4a261),
+        am5.color(0xe76f51)
+      ]
+    }));
+
+    // Label styling
+    series.labels.template.setAll({
+      fontFamily: "Arial",
+      tooltipText: "{category}: [bold]{value}[/]",
+      cursorOverStyle: "pointer"
+    });
+
+    // Click handler
+    series.labels.template.events.on("click", function(ev) {
+      var category = ev.target.dataItem.get("category");
+      alert("You clicked: " + category);
+    });
+
+    series.data.setAll([
+      { tag: "JavaScript", weight: 64 },
+      { tag: "Python", weight: 48 },
+      { tag: "TypeScript", weight: 35 },
+      { tag: "Java", weight: 30 },
+      { tag: "React", weight: 28 },
+      { tag: "Angular", weight: 22 },
+      { tag: "Vue", weight: 20 },
+      { tag: "Node.js", weight: 22 },
+      { tag: "CSS", weight: 18 },
+      { tag: "SQL", weight: 15 },
+      { tag: "Go", weight: 14 },
+      { tag: "Rust", weight: 12 },
+      { tag: "PHP", weight: 11 },
+      { tag: "Swift", weight: 10 },
+      { tag: "Kotlin", weight: 9 },
+      { tag: "Ruby", weight: 8 },
+      { tag: "C#", weight: 25 },
+      { tag: "C++", weight: 20 },
+      { tag: "Docker", weight: 16 },
+      { tag: "Kubernetes", weight: 14 }
+    ]);
+
+    series.appear(1000);
+  </script>
+</body>
+</html>
+```
+
+## Example 2: Sentence cloud with excludeWords and dynamic update
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Sentence Cloud</title>
+  <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
+  <script src="https://cdn.amcharts.com/lib/5/wc.js"></script>
+  <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
+  <style>
+    #chartdiv { width: 100%; height: 450px; }
+    button { margin: 5px; padding: 8px 16px; cursor: pointer; }
+  </style>
+</head>
+<body>
+  <div>
+    <button onclick="showTech()">Tech Skills</button>
+    <button onclick="showBusiness()">Business Skills</button>
+  </div>
+  <div id="chartdiv"></div>
+  <script>
+    var root = am5.Root.new("chartdiv");
+    root.setThemes([am5themes_Animated.new(root)]);
+
+    var series = root.container.children.push(
+      am5wc.WordCloud.new(root, {
+        categoryField: "phrase",
+        valueField: "weight",
+        maxFontSize: am5.percent(12),
+        minFontSize: am5.percent(3),
+        angles: [0, -45, 45],
+        randomness: 0.4,
+        minWordLength: 2,
+        excludeWords: ["and", "the", "with", "for"]
+      })
+    );
+
+    // Custom color set
+    series.set("colors", am5.ColorSet.new(root, {
+      colors: [
+        am5.color(0x1a535c),
+        am5.color(0x4ecdc4),
+        am5.color(0xf7fff7),
+        am5.color(0xff6b6b),
+        am5.color(0xffe66d)
+      ]
+    }));
+
+    series.labels.template.setAll({
+      fontFamily: "Georgia, serif",
+      tooltipText: "{category}: [bold]{value}[/]",
+      cursorOverStyle: "pointer"
+    });
+
+    var techData = [
+      { phrase: "Machine Learning", weight: 50 },
+      { phrase: "Cloud Computing", weight: 45 },
+      { phrase: "Data Engineering", weight: 40 },
+      { phrase: "DevOps", weight: 35 },
+      { phrase: "Cybersecurity", weight: 33 },
+      { phrase: "API Design", weight: 28 },
+      { phrase: "Microservices", weight: 25 },
+      { phrase: "Containerization", weight: 22 },
+      { phrase: "CI/CD Pipelines", weight: 20 },
+      { phrase: "Edge Computing", weight: 18 },
+      { phrase: "Serverless", weight: 16 },
+      { phrase: "GraphQL", weight: 14 },
+      { phrase: "WebAssembly", weight: 12 },
+      { phrase: "Blockchain", weight: 10 }
+    ];
+
+    var businessData = [
+      { phrase: "Product Strategy", weight: 48 },
+      { phrase: "User Research", weight: 42 },
+      { phrase: "Agile Management", weight: 38 },
+      { phrase: "Stakeholder Communication", weight: 35 },
+      { phrase: "OKR Planning", weight: 30 },
+      { phrase: "Risk Assessment", weight: 27 },
+      { phrase: "Customer Journey", weight: 24 },
+      { phrase: "Market Analysis", weight: 22 },
+      { phrase: "Revenue Modeling", weight: 20 },
+      { phrase: "Team Leadership", weight: 18 },
+      { phrase: "Design Thinking", weight: 16 },
+      { phrase: "Data-Driven Decisions", weight: 14 }
+    ];
+
+    // Dynamic data swap functions
+    window.showTech = function() { series.data.setAll(techData); };
+    window.showBusiness = function() { series.data.setAll(businessData); };
+
+    // Initial data
+    series.data.setAll(techData);
+    series.appear(1000);
+  </script>
+</body>
+</html>
+```