Combo (dual-axis) chart
Chart styletype: "chart"Generate combo (bar + line) chart images with a secondary axis — revenue bars plus a growth-rate line, price plus volume, and more. Fresh data per API call, free.
Design JSON — “Combo (dual-axis)” 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": "combo",
"data": [],
"labels": [
"Jan",
"Feb",
"Mar",
"Apr",
"May"
],
"colors": [],
"orientation": "vertical",
"showAxis": true,
"showGrid": true,
"showValues": false,
"valueFormat": "number",
"opacity": 1,
"series": [
{
"name": "Revenue",
"data": [
120,
150,
140,
185,
210
],
"type": "bar",
"axis": "left",
"color": "#6366F1"
},
{
"name": "Growth %",
"data": [
8,
25,
-7,
32,
14
],
"type": "line",
"axis": "right",
"color": "#F59E0B"
}
],
"showLegend": true,
"legendPosition": "bottom"
}
}
]
}Chart examples
Real renders of the combo (dual-axis) chart — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.
Revenue & growth rate
Monthly revenue as bars (left) with the growth-% line on a secondary axis.
API overrides for this example
{
"sales.chartType": "combo",
"sales.data": [],
"sales.series": [
{
"name": "Revenue",
"data": [
82,
96,
91,
118,
134
],
"type": "bar",
"axis": "left",
"color": "#4F46E5"
},
{
"name": "Growth",
"data": [
12,
17,
-5,
30,
14
],
"type": "line",
"axis": "right",
"color": "#10B981"
}
],
"sales.labels": [
"Jan",
"Feb",
"Mar",
"Apr",
"May"
],
"sales.showLegend": true,
"sales.legendPosition": "bottom"
}Signups & conversion
Signup volume bars with a conversion-rate line reading off the right axis.
API overrides for this example
{
"sales.chartType": "combo",
"sales.data": [],
"sales.series": [
{
"name": "Signups",
"data": [
420,
510,
480,
620
],
"type": "bar",
"axis": "left",
"color": "#0EA5E9"
},
{
"name": "Conversion",
"data": [
3.1,
3.6,
3.2,
4.4
],
"type": "line",
"axis": "right",
"color": "#EF4444"
}
],
"sales.labels": [
"W1",
"W2",
"W3",
"W4"
],
"sales.showLegend": true,
"sales.legendPosition": "bottom"
}When to use the combo (dual-axis) style
- Revenue bars + growth-rate line for investor updates
- Price bars + volume line for market recaps
- Signups bars + conversion-% line for growth 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": "combo",
"sales.data": [],
"sales.labels": [
"Jan",
"Feb",
"Mar",
"Apr",
"May"
],
"sales.colors": [],
"sales.orientation": "vertical",
"sales.showAxis": true,
"sales.showGrid": true,
"sales.showValues": false,
"sales.valueFormat": "number",
"sales.opacity": 1,
"sales.series": [
{
"name": "Revenue",
"data": [
120,
150,
140,
185,
210
],
"type": "bar",
"axis": "left",
"color": "#6366F1"
},
{
"name": "Growth %",
"data": [
8,
25,
-7,
32,
14
],
"type": "line",
"axis": "right",
"color": "#F59E0B"
}
],
"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.