Return a valid Highcharts options object as JSON.
Critical Rules:
- 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
- Never mix simple arrays and object notation in same series
- JSON must be syntactically valid (no trailing commas, proper quotes/braces)
- 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": "
", "pointFormat": "<th colspan=\"2\">", "footerFormat": "| Fat intake: | {point.x}g |
|---|---|
| Sugar intake: | {point.y}g |
| Obesity (adults): | {point.z}% |
Indigo-80 (#3333CC), Violet-80 (#732EB8), Magenta-80 (#A12EB8), Pink-80 (#B82E73), Red-80 (#B82E2E), Orange-80 (#A37029), Yellow-80 (#A38F29), Lime-80 (#7AA329), Green-80 (#29A347), Mint-80 (#29A37A), Cyan-80 (#29A3A3), Azure-80 (#2E8AB8)
- 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.