hello-mcp

Return a valid Highcharts options object as JSON.

Critical Rules:

1. Data format must match chart type:
   • Bar/Column with categories: `xAxis.categories` + simple numeric array
   • Scatter/Bubble: Array of objects with {x, y, name} properties
   • Line/Time: Datetime xAxis + [[timestamp, value]] pairs
2. Never mix simple arrays and object notation in same series
3. JSON must be syntactically valid (no trailing commas, proper quotes/braces)
4. Follow the charting principles and data format rules provided.

Important: Return valid JSON. A screenshot will be automatically captured for your review.

{
  "chart": {
    "type": "bubble",
    "plotBorderWidth": 1,
    "zoomType": "xy"
  },
  "legend": {
    "enabled": false
  },
  "title": {
    "text": "Relationship Between Diet and Obesity across countries"
  },
  "subtitle": {
    "text": "Daily fat and sugar intake compared to adult obesity rates across 15 nations"
  },
  "xAxis": {
    "gridLineWidth": 1,
    "title": {
      "text": "Daily fat intake"
    },
    "labels": {
      "format": "{value} gr"
    },
    "plotLines": [
      {
        "color": "black",
        "dashStyle": "dot",
        "width": 2,
        "value": 65,
        "label": {
          "rotation": 0,
          "y": 15,
          "style": {
            "fontStyle": "italic"
          },
          "text": "Safe fat intake 65g/day"
        },
        "zIndex": 3
      }
    ]
  },
  "yAxis": {
    "startOnTick": false,
    "endOnTick": false,
    "title": {
      "text": "Daily sugar intake"
    },
    "labels": {
      "format": "{value} gr"
    },
    "maxPadding": 0.2,
    "plotLines": [
      {
        "color": "black",
        "dashStyle": "dot",
        "width": 2,
        "value": 50,
        "label": {
          "align": "right",
          "style": {
            "fontStyle": "italic"
          },
          "text": "Safe sugar intake 50g/day",
          "x": -10
        },
        "zIndex": 3
      }
    ]
  },
  "tooltip": {
    "useHTML": true,
    "formatter": "function() { return this.value + '%'; }",
    "headerFormat": "<table>",
    "pointFormat": "<tr><th colspan=\\"2\\"><h3>{point.country}</h3></th></tr><tr><th>Fat intake:</th><td>{point.x}g</td></tr><tr><th>Sugar intake:</th><td>{point.y}g</td></tr><tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>",
    "footerFormat": "</table>",
    "followPointer": true
  },
  "plotOptions": {
    "series": {
      "dataLabels": {
        "enabled": true,
        "format": "{point.name}"
      }
    }
  },
  "series": [
    {
      "data": [
        {"x": 95, "y": 95, "z": 13.8, "name": "BE", "country": "Belgium"},
        {"x": 86.5, "y": 102.9, "z": 14.7, "name": "DE", "country": "Germany"},
        {"x": 80.8, "y": 91.5, "z": 15.8, "name": "FI", "country": "Finland"},
        {"x": 80.4, "y": 102.5, "z": 12, "name": "NL", "country": "Netherlands"},
        {"x": 80.3, "y": 86.1, "z": 11.8, "name": "SE", "country": "Sweden"},
        {"x": 78.4, "y": 70.1, "z": 16.6, "name": "ES", "country": "Spain"},
        {"x": 74.2, "y": 68.5, "z": 14.5, "name": "FR", "country": "France"},
        {"x": 73.5, "y": 83.1, "z": 10, "name": "NO", "country": "Norway"},
        {"x": 71, "y": 93.2, "z": 24.7, "name": "UK", "country": "United Kingdom"},
        {"x": 69.2, "y": 57.6, "z": 10.4, "name": "IT", "country": "Italy"},
        {"x": 68.6, "y": 20, "z": 16, "name": "RU", "country": "Russia"},
        {"x": 65.5, "y": 126.4, "z": 35.3, "name": "US", "country": "United States"},
        {"x": 65.4, "y": 50.8, "z": 28.5, "name": "HU", "country": "Hungary"},
        {"x": 63.4, "y": 51.8, "z": 15.4, "name": "PT", "country": "Portugal"},
        {"x": 64, "y": 82.9, "z": 31.3, "name": "NZ", "country": "New Zealand"}
      ],
      "colorByPoint": true
    }
  ]
}

• For bar/column charts: series.data should be a simple numeric array when xAxis.categories are defined.
• Bar/Column: `xAxis.categories` with simple numeric array in series.data
• Scatter/Bubble: Objects with x, y properties: `{x: 10, y: 20, name: "Point"}`
• Line/Time series: Datetime xAxis with `[[timestamp, value], ...]` format

Axis Configuration for Bar Charts

• For HORIZONTAL bar charts (type: 'bar'):
  • xAxis = categories (treatment names, etc.)
  • yAxis = values (metrics, measurements)
• For VERTICAL bar charts (type: 'column'):
  • xAxis = categories (treatment names, etc.)
  • yAxis = values (metrics, measurements)

Critical: Do NOT swap xAxis and yAxis definitions when switching chart types. Whether using type: 'bar' (horizontal) or type: 'column' (vertical), ALWAYS configure: xAxis.categories = your dimension/grouping (e.g., treatment names) yAxis.title = your metric name (e.g., 'Brand Lift') series.data = numeric values Highcharts automatically handles the visual rotation—only the chart type changes, not the axis definitions.

Bar/Column with categories:

{
  "xAxis": {"categories": ["A", "B", "C"]},
  "series": [{"data": [10, 20, 30]}]  // Simple array
}

Bar/Column with custom properties:

{
  "xAxis": {"type": "category"},
  "series": [{
    "data": [
      {"y": 10, "name": "A", "color": "#fff"},
      {"y": 20, "name": "B", "color": "#fff"}
    ]
  }]
}

Scatter/Bubble with multiple values:

{
  "series": [{
    "data": [
      {"x": 10, "y": 20, "z": 30, "customProp": "value"}
    ]
  }]
}

Formatter Functions: When using Highcharts formatters (e.g., tooltip.formatter, dataLabels.formatter), output the function as a STRING. For example:

"dataLabels": {
  "enabled": true,
  "formatter": "function() { return (this.y >= 0 ? '+' : '') + this.y.toFixed(1) + ' p.p.'; }"
}

Format Strings vs. Formatters: Do NOT use printf-style format strings like {y:+.1f} in the format property—this is not valid Highcharts syntax. Use format ONLY for simple Highcharts format syntax like {value}, {point.name}, or {point.custom}. For complex number formatting, use a formatter function as a string instead.

• ❌ Mixing simple arrays with object notation in same series
• ❌ Defining xAxis.categories AND using "x" properties in data points
• ❌ Adding custom properties to data without corresponding tooltip formatter
• ❌ Using custom properties in formatters without quotes/brackets
• ❌ Using legends when showing a single series
• ❌ Showing data labels on axes when data labels are present on data points (redundant axis labels)
• ✅ When categories exist, map data by position (index), not by property
• Confusing format: "{y:+.1f} p.p." (invalid) with formatter: "function() { return (this.y >= 0 ? '+' : '') + this.y.toFixed(1) + ' p.p.'; }" (valid).

• Use the largest feasible font sizes so the chart is readable easily.
• Use charting principles from Edward Tufte and Gene Zelazny

• Prefer data labels on the data points rather than the legend, unless the chart is too crowded.
• Grid lines should be very light, and dotted.
• Axis titles should be clear, and include the unit of measurement.
• If you are plotting multiple charts, align the axes to the same scale.

• For marketing funnel analysis, use funnel chart type.
• For comparisons of treatment effects, use bar chart type.