@amcharts/amcharts5-mcp 1.9.0 → 1.9.2

package/extended/examples/json-configs/gauge-bands.md

@@ -0,0 +1,379 @@
+---
+title: "Gauge with Bands (JSON config)"
+category: "json-configs"
+source: "@amcharts/amcharts5@5.21.4: examples/gauge-bands/config.json"
+---
+
+# Gauge with Bands (JSON config)
+
+A gauge with labelled color bands, where the hand and the value label take the color of the band the hand is in.
+
+Chart family: radar · Tags: gauge, bands, axis ranges, clock hand, animation
+
+A complete amCharts 5 JSON config, as shipped in the `@amcharts/amcharts5` npm package (examples/gauge-bands/config.json, version 5.21.4). 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/xy.js
+- https://cdn.amcharts.com/lib/5/radar.js
+- https://cdn.amcharts.com/lib/5/themes/Animated.js (theme, applied separately)
+
+## JSON config
+
+```json
+{
+  "type": "RadarChart",
+  "settings": {
+    "panX": false,
+    "panY": false,
+    "startAngle": 160,
+    "endAngle": 380,
+    "autoAppear": true,
+    "appearDuration": 1000,
+    "appearDelay": 100
+  },
+  "properties": {
+    "xAxes": [
+      "#axis-0"
+    ],
+    "radarContainer": {
+      "children": [
+        {
+          "type": "Label",
+          "settings": {
+            "fill": {
+              "type": "Color",
+              "value": "#ffffff"
+            },
+            "centerX": {
+              "type": "Percent",
+              "value": 50
+            },
+            "centerY": {
+              "type": "Percent",
+              "value": 50
+            },
+            "textAlign": "center",
+            "fontSize": "3em",
+            "text": "82"
+          }
+        }
+      ]
+    }
+  },
+  "refs": [
+    {
+      "axis-0": {
+        "type": "ValueAxis",
+        "settings": {
+          "maxDeviation": 0,
+          "min": -40,
+          "max": 100,
+          "strictMinMax": true,
+          "renderer": {
+            "type": "AxisRendererCircular",
+            "settings": {
+              "innerRadius": -40
+            },
+            "properties": {
+              "grid": {
+                "properties": {
+                  "template": {
+                    "settings": {
+                      "stroke": {
+                        "type": "Color",
+                        "value": "#ffffff"
+                      },
+                      "visible": true,
+                      "strokeOpacity": 0.8,
+                      "strokeWidth": 2,
+                      "crisp": false
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      "axisRange-0": {
+        "axis": "#axis-0",
+        "settings": {
+          "above": true,
+          "value": -40,
+          "endValue": -20,
+          "label": {
+            "type": "AxisLabelRadial",
+            "settings": {
+              "radius": 15,
+              "inside": true,
+              "fontSize": "0.9em",
+              "fill": {
+                "type": "Color",
+                "value": "#ffffff"
+              },
+              "text": "Unsustainable"
+            }
+          },
+          "axisFill": {
+            "type": "Slice",
+            "settings": {
+              "visible": true,
+              "fill": {
+                "type": "Color",
+                "value": "#ee1f25"
+              },
+              "fillOpacity": 0.8
+            }
+          }
+        },
+        "__parseLogic": "axisRange"
+      }
+    },
+    {
+      "axisRange-1": {
+        "axis": "#axis-0",
+        "settings": {
+          "above": true,
+          "value": -20,
+          "endValue": 0,
+          "label": {
+            "type": "AxisLabelRadial",
+            "settings": {
+              "radius": 15,
+              "inside": true,
+              "fontSize": "0.9em",
+              "fill": {
+                "type": "Color",
+                "value": "#ffffff"
+              },
+              "text": "Volatile"
+            }
+          },
+          "axisFill": {
+            "type": "Slice",
+            "settings": {
+              "visible": true,
+              "fill": {
+                "type": "Color",
+                "value": "#f04922"
+              },
+              "fillOpacity": 0.8
+            }
+          }
+        },
+        "__parseLogic": "axisRange"
+      }
+    },
+    {
+      "axisRange-2": {
+        "axis": "#axis-0",
+        "settings": {
+          "above": true,
+          "value": 0,
+          "endValue": 20,
+          "label": {
+            "type": "AxisLabelRadial",
+            "settings": {
+              "radius": 15,
+              "inside": true,
+              "fontSize": "0.9em",
+              "fill": {
+                "type": "Color",
+                "value": "#ffffff"
+              },
+              "text": "Foundational"
+            }
+          },
+          "axisFill": {
+            "type": "Slice",
+            "settings": {
+              "visible": true,
+              "fill": {
+                "type": "Color",
+                "value": "#fdae19"
+              },
+              "fillOpacity": 0.8
+            }
+          }
+        },
+        "__parseLogic": "axisRange"
+      }
+    },
+    {
+      "axisRange-3": {
+        "axis": "#axis-0",
+        "settings": {
+          "above": true,
+          "value": 20,
+          "endValue": 40,
+          "label": {
+            "type": "AxisLabelRadial",
+            "settings": {
+              "radius": 15,
+              "inside": true,
+              "fontSize": "0.9em",
+              "fill": {
+                "type": "Color",
+                "value": "#ffffff"
+              },
+              "text": "Developing"
+            }
+          },
+          "axisFill": {
+            "type": "Slice",
+            "settings": {
+              "visible": true,
+              "fill": {
+                "type": "Color",
+                "value": "#f3eb0c"
+              },
+              "fillOpacity": 0.8
+            }
+          }
+        },
+        "__parseLogic": "axisRange"
+      }
+    },
+    {
+      "axisRange-4": {
+        "axis": "#axis-0",
+        "settings": {
+          "above": true,
+          "value": 40,
+          "endValue": 60,
+          "label": {
+            "type": "AxisLabelRadial",
+            "settings": {
+              "radius": 15,
+              "inside": true,
+              "fontSize": "0.9em",
+              "fill": {
+                "type": "Color",
+                "value": "#ffffff"
+              },
+              "text": "Maturing"
+            }
+          },
+          "axisFill": {
+            "type": "Slice",
+            "settings": {
+              "visible": true,
+              "fill": {
+                "type": "Color",
+                "value": "#b0d136"
+              },
+              "fillOpacity": 0.8
+            }
+          }
+        },
+        "__parseLogic": "axisRange"
+      }
+    },
+    {
+      "axisRange-5": {
+        "axis": "#axis-0",
+        "settings": {
+          "above": true,
+          "value": 60,
+          "endValue": 80,
+          "label": {
+            "type": "AxisLabelRadial",
+            "settings": {
+              "radius": 15,
+              "inside": true,
+              "fontSize": "0.9em",
+              "fill": {
+                "type": "Color",
+                "value": "#ffffff"
+              },
+              "text": "Sustainable"
+            }
+          },
+          "axisFill": {
+            "type": "Slice",
+            "settings": {
+              "visible": true,
+              "fill": {
+                "type": "Color",
+                "value": "#54b947"
+              },
+              "fillOpacity": 0.8
+            }
+          }
+        },
+        "__parseLogic": "axisRange"
+      }
+    },
+    {
+      "axisRange-6": {
+        "axis": "#axis-0",
+        "settings": {
+          "above": true,
+          "value": 80,
+          "endValue": 100,
+          "label": {
+            "type": "AxisLabelRadial",
+            "settings": {
+              "radius": 15,
+              "inside": true,
+              "fontSize": "0.9em",
+              "fill": {
+                "type": "Color",
+                "value": "#ffffff"
+              },
+              "text": "High Performing"
+            }
+          },
+          "axisFill": {
+            "type": "Slice",
+            "settings": {
+              "visible": true,
+              "fill": {
+                "type": "Color",
+                "value": "#0f9747"
+              },
+              "fillOpacity": 0.8
+            }
+          }
+        },
+        "__parseLogic": "axisRange"
+      }
+    },
+    {
+      "axisRange-7": {
+        "axis": "#axis-0",
+        "settings": {
+          "value": 82.43356914899199,
+          "bullet": {
+            "type": "AxisBullet",
+            "settings": {
+              "sprite": {
+                "type": "ClockHand",
+                "settings": {
+                  "pinRadius": {
+                    "type": "Percent",
+                    "value": 20
+                  },
+                  "radius": {
+                    "type": "Percent",
+                    "value": 100
+                  },
+                  "bottomWidth": 40
+                }
+              }
+            }
+          }
+        },
+        "__parseLogic": "axisRange"
+      }
+    }
+  ]
+}
+```

package/extended/examples/json-configs/gauge.md

@@ -0,0 +1,94 @@
+---
+title: "Gauge with Clock Hand (JSON config)"
+category: "json-configs"
+source: "@amcharts/amcharts5@5.21.4: examples/gauge/config.json"
+---
+
+# Gauge with Clock Hand (JSON config)
+
+A gauge made from a radar chart: a half-circle value axis and a clock hand that points at a value.
+
+Chart family: radar · Tags: gauge, radar, clock hand, axis range
+
+A complete amCharts 5 JSON config, as shipped in the `@amcharts/amcharts5` npm package (examples/gauge/config.json, version 5.21.4). 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/xy.js
+- https://cdn.amcharts.com/lib/5/radar.js
+- https://cdn.amcharts.com/lib/5/themes/Animated.js (theme, applied separately)
+
+## JSON config
+
+```json
+{
+  "type": "RadarChart",
+  "settings": {
+    "panX": false,
+    "panY": false,
+    "startAngle": 180,
+    "endAngle": 360,
+    "autoAppear": true,
+    "appearDuration": 1000,
+    "appearDelay": 100
+  },
+  "properties": {
+    "xAxes": [
+      "#axis-0"
+    ]
+  },
+  "refs": [
+    {
+      "axis-0": {
+        "type": "ValueAxis",
+        "settings": {
+          "maxDeviation": 0,
+          "min": 0,
+          "max": 100,
+          "strictMinMax": true,
+          "renderer": {
+            "type": "AxisRendererCircular",
+            "settings": {
+              "innerRadius": -10,
+              "strokeOpacity": 0.1
+            }
+          }
+        }
+      }
+    },
+    {
+      "axisRange-0": {
+        "axis": "#axis-0",
+        "settings": {
+          "value": 65,
+          "bullet": {
+            "type": "AxisBullet",
+            "settings": {
+              "sprite": {
+                "type": "ClockHand",
+                "settings": {
+                  "radius": {
+                    "type": "Percent",
+                    "value": 99
+                  }
+                }
+              }
+            }
+          },
+          "grid": {
+            "type": "Grid",
+            "settings": {
+              "visible": false
+            }
+          }
+        },
+        "__parseLogic": "axisRange"
+      }
+    }
+  ]
+}
+```

package/extended/examples/json-configs/hierarchy-force-directed.md

@@ -0,0 +1,131 @@
+---
+title: "Force-Directed Tree (JSON config)"
+category: "json-configs"
+source: "@amcharts/amcharts5@5.21.4: examples/hierarchy-force-directed/config.json"
+---
+
+# Force-Directed Tree (JSON config)
+
+A force-directed tree: nested data as linked circles that arrange themselves and open on click.
+
+Chart family: hierarchy · Tags: force directed, hierarchy, nested data
+
+A complete amCharts 5 JSON config, as shipped in the `@amcharts/amcharts5` npm package (examples/hierarchy-force-directed/config.json, version 5.21.4). 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/hierarchy.js
+- https://cdn.amcharts.com/lib/5/themes/Animated.js (theme, applied separately)
+
+## JSON config
+
+```json
+{
+  "type": "ForceDirected",
+  "settings": {
+    "minRadius": 25,
+    "maxRadius": 55,
+    "nodePadding": 10,
+    "valueField": "value",
+    "categoryField": "name",
+    "childDataField": "children",
+    "selectedDataItem": "@self.dataItems.0",
+    "autoAppear": true,
+    "appearDuration": 1000,
+    "appearDelay": 100
+  },
+  "properties": {
+    "data": "#data-0"
+  },
+  "refs": [
+    {
+      "data-0": [
+        {
+          "name": "Music",
+          "children": [
+            {
+              "name": "Rock",
+              "children": [
+                {
+                  "name": "Classic Rock",
+                  "value": 64
+                },
+                {
+                  "name": "Punk",
+                  "value": 28
+                },
+                {
+                  "name": "Metal",
+                  "children": [
+                    {
+                      "name": "Heavy Metal",
+                      "value": 35
+                    },
+                    {
+                      "name": "Thrash",
+                      "value": 17
+                    }
+                  ],
+                  "__parse": true
+                }
+              ],
+              "__parse": true
+            },
+            {
+              "name": "Electronic",
+              "children": [
+                {
+                  "name": "House",
+                  "value": 42
+                },
+                {
+                  "name": "Techno",
+                  "value": 31
+                },
+                {
+                  "name": "Ambient",
+                  "value": 19
+                }
+              ],
+              "__parse": true
+            },
+            {
+              "name": "Jazz",
+              "children": [
+                {
+                  "name": "Swing",
+                  "value": 24
+                },
+                {
+                  "name": "Bebop",
+                  "value": 33
+                },
+                {
+                  "name": "Fusion",
+                  "children": [
+                    {
+                      "name": "Jazz Rock",
+                      "value": 14
+                    },
+                    {
+                      "name": "Latin Jazz",
+                      "value": 21
+                    }
+                  ],
+                  "__parse": true
+                }
+              ],
+              "__parse": true
+            }
+          ],
+          "__parse": true
+        }
+      ]
+    }
+  ]
+}
+```