Chart Elements
This page shows how to use the chart element in json2doc.
Chart Properties & Defaults
Chart Element Properties
| Property | Type | Required | Description | Default |
|---|---|---|---|---|
type | string | ✓ | Element type: "chart" | - |
config | object | ✓ | Chart configuration (see nested properties below) | - |
width | number | ✗ | Rendered chart image width in pixels (10-2000). The actual width is always clamped to the available page width (page width minus margins and a small inner padding). | Auto (from Chart API output, clamped to page width) |
height | number | ✗ | Rendered chart image height in pixels (10-2000). When only width is set, height is derived from aspect ratio and clamped to a safe maximum. | Auto |
align | string | ✗ | Chart alignment: "left", "center", "right" | "left" |
spacing | object | ✗ | Custom spacing override (before / after in pt) | From defaults.spacing.chart |
Nested Config Properties
The config object is passed directly to the Chart API and must match the chartConfig schema. Important fields (using dot notation for nested properties):
| Property | Type | Required | Description |
|---|---|---|---|
config.type | string | ✓ | Chart type: line, bar, pie, doughnut, radar, polarArea, scatter, bubble |
config.width | number | ✗ | Internal canvas width in pixels for the Chart API (50-4000). If omitted, the API uses its own default. This does not override element width but can be used for more control over rendering resolution. |
config.height | number | ✗ | Internal canvas height in pixels for the Chart API (50-4000). |
config.backgroundColor | string | ✗ | Canvas background color (CSS color string) |
config.data.labels | array | ✗ | Labels for axes or segments (strings or numbers) |
config.data.datasets | array | ✓ | One or more datasets. Each dataset must at least define data and can contain any supported dataset properties for your chart configuration. |
config.data.datasets[].data | array | ✓ | Values or points. For scatter/bubble charts this can be an array of {x, y} or {x, y, r} objects. |
config.options | object | ✗ | Options object for the chart configuration (scales, legend, title, etc.). Additional properties are allowed and forwarded unchanged to the Chart API. |
Chart Color Defaults (defaults.chart)
You can configure default color palettes for all charts in a document under defaults.chart. The runner resolves colors in this order:
Built-in default palette (used when nothing else is set):
- Fill colors:
#003f5c,#444e86,#955196,#dd5182,#ff6e54,#ffa600 - Border colors:
#002b40,#343a6b,#773f78,#c13a6a,#e65b46,#cc8500
Defaults Example
{
"document": {
"type": "pdf",
},
"defaults": {
"chart": {
"colors": [
"#003f5c",
"#444e86",
"#955196",
"#dd5182",
"#ff6e54",
"#ffa600"
],
"borderColors": [
"#002b40",
"#343a6b",
"#773f78",
"#c13a6a",
"#e65b46",
"#cc8500"
]
}
},
"sections": []
}
Bar Chart
Bar Chart JSON
{
"document": {
"type": "pdf",
"filename": "chart-elements-bar-example",
"title": "Bar Chart Example"
},
"sections": [
{
"type": "flow",
"content": [
{
"type": "h1",
"text": "Bar Chart Example"
},
{
"type": "chart",
"align": "center",
"width": 600,
"height": 350,
"config": {
"type": "bar",
"data": {
"labels": ["Q1", "Q2", "Q3", "Q4"],
"datasets": [
{
"label": "Revenue (k$)",
"data": [125, 148, 162, 185]
}
]
},
"options": {
"plugins": {
"legend": { "display": true },
"title": {
"display": true,
"text": "Quarterly Revenue"
}
}
}
}
}
]
}
]
}
Line Chart
Line Chart JSON
{
"document": {
"type": "pdf",
"filename": "chart-elements-line-example",
"title": "Line Chart Example"
},
"sections": [
{
"type": "flow",
"content": [
{
"type": "h1",
"text": "Line Chart Example"
},
{
"type": "chart",
"align": "center",
"width": 600,
"height": 350,
"config": {
"type": "line",
"data": {
"labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
"datasets": [
{
"label": "Signups",
"data": [120, 150, 180, 210, 260, 300]
}
]
},
"options": {
"plugins": {
"legend": { "display": true },
"title": {
"display": true,
"text": "Monthly Signups"
}
}
}
}
}
]
}
]
}
Pie Chart
Pie Chart JSON
{
"document": {
"type": "pdf",
"filename": "chart-elements-pie-example",
"title": "Pie Chart Example"
},
"sections": [
{
"type": "flow",
"content": [
{
"type": "h1",
"text": "Pie Chart Example"
},
{
"type": "chart",
"align": "center",
"width": 500,
"config": {
"type": "pie",
"data": {
"labels": ["EMEA", "Americas", "APAC"],
"datasets": [
{
"label": "Revenue Share",
"data": [40, 35, 25]
}
]
},
"options": {
"plugins": {
"legend": { "display": true },
"title": {
"display": true,
"text": "Revenue Share by Region"
}
}
}
}
}
]
}
]
}
Doughnut Chart
Doughnut Chart JSON
{
"document": {
"type": "pdf",
"filename": "chart-elements-doughnut-example",
"title": "Doughnut Chart Example"
},
"sections": [
{
"type": "flow",
"content": [
{
"type": "h1",
"text": "Doughnut Chart Example"
},
{
"type": "chart",
"align": "center",
"width": 500,
"config": {
"type": "doughnut",
"data": {
"labels": ["Free", "Pro", "Enterprise"],
"datasets": [
{
"label": "Plan Distribution",
"data": [55, 35, 10]
}
]
},
"options": {
"plugins": {
"legend": { "display": true },
"title": {
"display": true,
"text": "Customers by Plan"
}
}
}
}
}
]
}
]
}
Radar Chart
Radar Chart JSON
{
"document": {
"type": "pdf",
"filename": "chart-elements-radar-example",
"title": "Radar Chart Example"
},
"sections": [
{
"type": "flow",
"content": [
{
"type": "h1",
"text": "Radar Chart Example"
},
{
"type": "chart",
"align": "center",
"width": 600,
"config": {
"type": "radar",
"data": {
"labels": ["Reliability", "Performance", "Features", "Support", "Price"],
"datasets": [
{
"label": "Product A",
"data": [4, 5, 4, 4, 3]
},
{
"label": "Product B",
"data": [3, 4, 5, 3, 4]
}
]
},
"options": {
"plugins": {
"legend": { "display": true },
"title": {
"display": true,
"text": "Product Comparison"
}
}
}
}
}
]
}
]
}
Polar Area Chart
Polar Area Chart JSON
{
"document": {
"type": "pdf",
"filename": "chart-elements-polararea-example",
"title": "Polar Area Chart Example"
},
"sections": [
{
"type": "flow",
"content": [
{
"type": "h1",
"text": "Polar Area Chart Example"
},
{
"type": "chart",
"align": "center",
"width": 500,
"config": {
"type": "polarArea",
"data": {
"labels": ["Engineering", "Sales", "Marketing", "Support"],
"datasets": [
{
"label": "Headcount",
"data": [40, 25, 15, 20]
}
]
},
"options": {
"plugins": {
"legend": { "display": true },
"title": {
"display": true,
"text": "Team Distribution"
}
}
}
}
}
]
}
]
}
Scatter Chart
Scatter Chart JSON
{
"document": {
"type": "pdf",
"filename": "chart-elements-scatter-example",
"title": "Scatter Chart Example"
},
"sections": [
{
"type": "flow",
"content": [
{
"type": "h1",
"text": "Scatter Chart Example"
},
{
"type": "chart",
"align": "center",
"width": 600,
"config": {
"type": "scatter",
"data": {
"datasets": [
{
"label": "Correlation",
"data": [
{ "x": 0.5, "y": 1.0 },
{ "x": 1.0, "y": 1.8 },
{ "x": 1.5, "y": 2.2 },
{ "x": 2.0, "y": 2.7 },
{ "x": 2.5, "y": 3.1 },
{ "x": 3.0, "y": 3.9 }
]
},
{
"label": "Correlation 1",
"data": [
{ "x": 5.5, "y": 6.2 },
{ "x": 6.0, "y": 5.4 },
{ "x": 6.5, "y": 7.1 },
{ "x": 7.0, "y": 6.3 },
{ "x": 7.5, "y": 7.8 }
]
}
]
},
"options": {
"plugins": {
"legend": { "display": true },
"title": {
"display": true,
"text": "Scatter Example"
}
},
"scales": {
"x": { "title": { "display": true, "text": "X" } },
"y": { "title": { "display": true, "text": "Y" } }
}
}
}
}
]
}
]
}
Bubble Chart
Bubble Chart JSON
{
"document": {
"type": "pdf",
"filename": "chart-elements-bubble-example",
"title": "Bubble Chart Example"
},
"sections": [
{
"type": "flow",
"content": [
{
"type": "h1",
"text": "Bubble Chart Example"
},
{
"type": "chart",
"align": "center",
"width": 600,
"config": {
"type": "bubble",
"data": {
"datasets": [
{
"label": "Low Probability / High Impact",
"data": [
{ "x": 0.1, "y": 90, "r": 6 },
{ "x": 0.2, "y": 80, "r": 10 },
{ "x": 0.3, "y": 70, "r": 8 },
{ "x": 0.4, "y": 85, "r": 12 },
{ "x": 0.5, "y": 95, "r": 14 }
]
},
{
"label": "Medium Probability / Medium Impact",
"data": [
{ "x": 0.4, "y": 60, "r": 5 },
{ "x": 0.5, "y": 55, "r": 7 },
{ "x": 0.6, "y": 50, "r": 6 },
{ "x": 0.7, "y": 65, "r": 9 },
{ "x": 0.8, "y": 58, "r": 8 }
]
},
{
"label": "High Probability / Low Impact",
"data": [
{ "x": 0.7, "y": 30, "r": 4 },
{ "x": 0.8, "y": 25, "r": 5 },
{ "x": 0.85, "y": 20, "r": 6 },
{ "x": 0.9, "y": 18, "r": 7 },
{ "x": 0.95, "y": 15, "r": 8 }
]
}
]
},
"options": {
"plugins": {
"legend": { "display": true },
"title": {
"display": true,
"text": "Bubble Example"
}
},
"scales": {
"x": { "title": { "display": true, "text": "Probability" } },
"y": { "title": { "display": true, "text": "Impact" } }
}
}
}
}
]
}
]
}