Multi-line chart
Chart styletype: "chart"Plot several lines on one chart with a legend to compare series side by side — all data swapped per API call. Generate multi-line chart images free.
Design JSON — “Multi-line” variant
{
"title": "Chart sample",
"description": "A dynamic bar chart",
"dimensions": {
"width": 800,
"height": 420
},
"background": {
"color": "#ffffff"
},
"components": [
{
"id": "sample-chart",
"key": "sales",
"type": "chart",
"position": {
"x": 140,
"y": 60
},
"rotation": 0,
"size": {
"width": 520,
"height": 300
},
"dynamic": true,
"properties": {
"chartType": "line",
"data": [],
"labels": [
"Mon",
"Tue",
"Wed",
"Thu",
"Fri"
],
"colors": [],
"orientation": "vertical",
"showAxis": true,
"showGrid": true,
"showValues": false,
"valueFormat": "number",
"opacity": 1,
"lineWidth": 3,
"series": [
{
"name": "This month",
"data": [
14,
22,
19,
28,
34
],
"color": "#6366F1"
},
{
"name": "Last month",
"data": [
10,
16,
18,
21,
24
],
"color": "#94A3B8"
}
],
"showLegend": true,
"legendPosition": "bottom"
}
}
]
}Chart examples
Real renders of the multi-line chart — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.
A/B test conversion over time
Variant A vs variant B conversion rate per day, percent-formatted.
API overrides for this example
{
"sales.chartType": "line",
"sales.lineWidth": 3,
"sales.data": [],
"sales.series": [
{
"name": "Variant A",
"data": [
3.1,
3.4,
3.9,
4.2,
4.8
],
"color": "#10B981"
},
{
"name": "Variant B",
"data": [
3,
3.2,
3.1,
3.4,
3.3
],
"color": "#F59E0B"
}
],
"sales.showLegend": true,
"sales.legendPosition": "bottom",
"sales.labels": [
"Day 1",
"Day 2",
"Day 3",
"Day 4",
"Day 5"
],
"sales.valueFormat": "percent"
}Usage vs plan limit
API calls against the plan ceiling — an at-a-glance quota trend.
API overrides for this example
{
"sales.chartType": "line",
"sales.lineWidth": 3,
"sales.data": [],
"sales.series": [
{
"name": "Usage",
"data": [
420,
610,
580,
790,
930
],
"color": "#6366F1"
},
{
"name": "Limit",
"data": [
1000,
1000,
1000,
1000,
1000
],
"color": "#EF4444"
}
],
"sales.showLegend": true,
"sales.legendPosition": "bottom",
"sales.labels": [
"W1",
"W2",
"W3",
"W4",
"W5"
],
"sales.valueFormat": "compact"
}When to use the multi-line style
- This-month vs last-month metric comparisons
- A/B test performance over time
- Plan usage vs limit trend reports
Use it dynamically via the API
Feed fresh numbers via '<key>.data' (or '<key>.series' for multi-series), and swap '<key>.labels' or '<key>.chartType' per render.
Full API request with this variant's current values — the playground above sends only the properties you change
curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
"sales.chartType": "line",
"sales.data": [],
"sales.labels": [
"Mon",
"Tue",
"Wed",
"Thu",
"Fri"
],
"sales.colors": [],
"sales.orientation": "vertical",
"sales.showAxis": true,
"sales.showGrid": true,
"sales.showValues": false,
"sales.valueFormat": "number",
"sales.opacity": 1,
"sales.lineWidth": 3,
"sales.series": [
{
"name": "This month",
"data": [
14,
22,
19,
28,
34
],
"color": "#6366F1"
},
{
"name": "Last month",
"data": [
10,
16,
18,
21,
24
],
"color": "#94A3B8"
}
],
"sales.showLegend": true,
"sales.legendPosition": "bottom"
}'Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.
Other chart styles
See the chart component page for the full property reference and FAQs.