Examples

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 $)
- 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

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 grouped bar chart comparing Apple and Microsoft quarterly revenue for 2024.

Data:
- Labels: Q1, Q2, Q3, Q4
- Apple: 90.2B, 81.8B, 85.8B, 96.5B
- Microsoft: 69.8B, 74.6B, 76.7B, 86.3B

Use compact value format so billions display as "90.2B" instead of raw numbers. Title it "Big Tech Revenue 2024".

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 $)
- 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

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 it "Startup Funding Rounds".

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 $)
- 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

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 bar chart showing GDP of major EU countries in 2024.

Data:
- Germany: €4,120bn
- France: €2,780bn
- Italy: €2,050bn
- Spain: €1,420bn
- Netherlands: €1,010bn

Use currency value format with € symbol. Title it "EU GDP by Country 2024".

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 $)
- 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

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 of average apartment prices per sqm across Tokyo districts.

Data:
- Minato: ¥2,850,000
- Shibuya: ¥2,420,000
- Shinjuku: ¥1,980,000
- Chiyoda: ¥2,680,000
- Meguro: ¥1,760,000

Use compact value format. Title it "Tokyo Real Estate ¥/sqm".

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 $)
- 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

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 an area chart showing monthly recurring revenue growth for a SaaS startup.

Data:
- Jan: $48K
- Mar: $125K
- May: $310K
- Jul: $820K
- Sep: $1.45M
- Nov: $2.1M

Use compact value format. Title it "SaaS MRR Growth".

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 $)
- 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

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 bar chart comparing senior developer salaries across European cities.

Data:
- Zurich: €142,000
- London: €98,000
- Amsterdam: €82,000
- Berlin: €76,000
- Warsaw: €52,000

Use currency value format with € symbol. Title it "Senior Dev Salaries in Europe".

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 $)
- 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

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 donut chart showing cloud infrastructure market share in 2024.

Data:
- AWS: 31%
- Azure: 25%
- Google Cloud: 11%
- Others: 33%

Use percent value format. Title it "Cloud Market Share 2024".

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 $)
- 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

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 bar chart showing 24-hour trading volume across crypto exchanges.

Data:
- Binance: $18.2B
- Coinbase: $4.8B
- Bybit: $3.6B
- OKX: $2.9B
- Kraken: $1.2B

Use compact value format. Title it "Crypto Exchange Volume".

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 $)
- 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

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 line chart showing monthly website traffic growth.

Data:
- Jan: 42K visitors
- Feb: 58K
- Mar: 71K
- Apr: 95K
- May: 128K
- Jun: 186K
- Jul: 245K
- Aug: 310K

Use compact value format. Title it "Website Traffic".

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 $)
- 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

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 an area chart showing quarterly e-commerce revenue.

Data:
- Q1: $2.4M
- Q2: $3.1M
- Q3: $4.8M
- Q4: $6.2M

Use compact value format. Title it "E-commerce Revenue".

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 $)
- 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

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 comparing AI model benchmark scores.

Data:
- GPT-4o: 92%
- Claude 3.5: 89%
- Gemini Pro: 85%
- Llama 3: 78%
- Mistral Large: 76%

Use percent value format. Title it "AI Model Benchmarks".

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 $)
- 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

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 pie chart showing venture capital investment by sector in 2024.

Data:
- AI / ML: $62B
- Fintech: $28B
- Health: $19B
- Climate: $14B
- Cyber: $11B

Use compact value format. Title it "VC Investment by Sector 2024".