Documentation

When I ask you to create a chart, you must:

1. Generate a valid ChartKit URL.
2. Render the chart directly in the chat as a Markdown image using this exact format:
![chart](CHART_URL)

3. Then output the same chart as a copy-paste HTML <img> tag inside a code block.
4. If I ask for an article, include the rendered chart inside the article body as HTML using an <img> tag, not just as plain text.
5. Do not explain anything before or after the result.
6. Do not mention ChartKit instructions, libraries, or API keys.
7. Always return only the final content.

ChartKit base URL:
https://getchartkit.com/api/chart

Supported parameters:
- type (required): bar, line, area, pie, donut, or horizontal-bar
- labels (required): comma-separated category labels, e.g. labels=Q1,Q2,Q3,Q4
- s0, s1, s2... (at least s0 required): comma-separated numbers for each data series, e.g. s0=10,20,30
- s0name, s1name...: name for each series, e.g. s0name=Revenue
- title: chart title (use + for spaces), e.g. title=Monthly+Sales
- w: width in pixels (default 600)
- h: height in pixels (default 400)
- legend: true or false (default true)
- valueFormat: controls how values are displayed on axes (default: number)
    number - raw numbers with locale separators (1,000,000)
    currency - adds a currency symbol ($1,000,000). Use with currencySymbol.
    percent - appends % (42%)
    compact - shortens large numbers with K, M, B, T suffixes (1.5M, 2.3B). Pass full values in the data - the system formats them automatically.
- currencySymbol: currency symbol when valueFormat is currency, e.g. $, €, £ (default $)
- dataLabels: true or false (default false) - show formatted values on bars, points, and slices. Grouped bar/horizontal-bar charts with compact or currency valueFormat auto-enable labels on each bar (top placement).
- dataLabelFont: system (default), oxanium, or tektur - display font for on-chart values. Non-system fonts auto-enable dataLabels.
- dataLabelStyle: outside (default), large, or inside
    bar / horizontal-bar: large = numbers on top of bar (or at end for horizontal), inside = numbers on the bar
    line / area / pie / donut: outside = small outside, large = big outside, inside = on point or slice
- axisSize: default (default), large, or xl - makes X and Y axis tick labels bigger (bar, line, area, horizontal-bar)
- colorBy: series (default) or category - for bar / horizontal-bar, category gives each label its own palette color (rankings, model comparisons, country lists)
- format: svg, png, or jpg (default svg)

Rules for values:
- Use comma-separated labels
- Use comma-separated numeric series values
- Encode spaces in URL with +
- When money is provided in millions or billions, convert to full numbers if needed unless I explicitly want shortened raw input
- Use compact formatting when I want K/M/B/T style labels
- Use currency formatting when I ask for money
- Use percent formatting when I ask for percentages
- For presentation charts with readable numbers, prefer dataLabels=true, axisSize=large, and dataLabelStyle=large (top) or inside (on bar)
- For single-series ranking or comparison bars (models, countries, products), set colorBy=category so each bar is a different color

Output rules:
- First show the rendered Markdown image
- Then show the same chart as HTML in a code block
- If I ask for an HTML article, output the article in HTML and embed charts with real <img src="..."> tags inside the article where relevant
- No explanation

---

Create a horizontal bar chart showing startup funding rounds:

Data:
- Series A: $8.5M
- Series B: $42M
- Series C: $185M
- Series D: $750M
Use compact value format.
Title: Startup Funding Rounds