100% stacked chart
Chart styletype: "chart"Generate 100% stacked bar chart images showing each series as a share of the category total — every column fills to 100%. Fresh data per API call, free.
Edit it — this is the actual editor panel
Design JSON — “100% stacked” 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": "bar",
"data": [],
"labels": [
"Q1",
"Q2",
"Q3",
"Q4"
],
"colors": [],
"orientation": "vertical",
"showAxis": true,
"showGrid": true,
"showValues": false,
"valueFormat": "number",
"opacity": 1,
"series": [
{
"name": "Mobile",
"data": [
40,
46,
52,
58
],
"color": "#6366F1"
},
{
"name": "Desktop",
"data": [
45,
40,
34,
30
],
"color": "#0EA5E9"
},
{
"name": "Tablet",
"data": [
15,
14,
14,
12
],
"color": "#10B981"
}
],
"stacked": true,
"stackType": "percent",
"showLegend": true,
"legendPosition": "bottom"
}
}
]
}Chart examples
Real renders of the 100% stacked chart — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.
Traffic source mix
Organic / paid / referral share of total sessions per month.
API overrides for this example
{
"sales.chartType": "bar",
"sales.data": [],
"sales.series": [
{
"name": "Organic",
"data": [
520,
560,
610,
640
],
"color": "#10B981"
},
{
"name": "Paid",
"data": [
300,
340,
320,
380
],
"color": "#F59E0B"
},
{
"name": "Referral",
"data": [
120,
140,
160,
150
],
"color": "#8B5CF6"
}
],
"sales.labels": [
"Jan",
"Feb",
"Mar",
"Apr"
],
"sales.stacked": true,
"sales.stackType": "percent",
"sales.showLegend": true,
"sales.legendPosition": "bottom"
}Plan mix over quarters
Free vs Pro vs Team as a share of the customer base each quarter.
API overrides for this example
{
"sales.chartType": "bar",
"sales.data": [],
"sales.series": [
{
"name": "Free",
"data": [
60,
55,
48,
42
],
"color": "#94A3B8"
},
{
"name": "Pro",
"data": [
30,
33,
38,
41
],
"color": "#6366F1"
},
{
"name": "Team",
"data": [
10,
12,
14,
17
],
"color": "#4F46E5"
}
],
"sales.labels": [
"Q1",
"Q2",
"Q3",
"Q4"
],
"sales.stacked": true,
"sales.stackType": "percent",
"sales.showLegend": true,
"sales.legendPosition": "bottom"
}When to use the 100% stacked style
- Market-share composition over time
- Budget allocation share per quarter
- Response-mix (survey/NPS) per wave
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": "bar",
"sales.data": [],
"sales.labels": [
"Q1",
"Q2",
"Q3",
"Q4"
],
"sales.colors": [],
"sales.orientation": "vertical",
"sales.showAxis": true,
"sales.showGrid": true,
"sales.showValues": false,
"sales.valueFormat": "number",
"sales.opacity": 1,
"sales.series": [
{
"name": "Mobile",
"data": [
40,
46,
52,
58
],
"color": "#6366F1"
},
{
"name": "Desktop",
"data": [
45,
40,
34,
30
],
"color": "#0EA5E9"
},
{
"name": "Tablet",
"data": [
15,
14,
14,
12
],
"color": "#10B981"
}
],
"sales.stacked": true,
"sales.stackType": "percent",
"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
DefaultLineAreaHorizontal barsStacked series100% stackedSparklineMulti-lineWaterfallLollipopStep lineSlopeCombo (dual-axis)
See the chart component page for the full property reference and FAQs.