DocOps Charts

1. DocOps Bar Charts

1.1. Introduction

The DocOps Bar Chart Extension allows you to create visually appealing bar charts in your AsciiDoctor documents. Bar charts are useful for comparing data across categories and visualizing trends over time.

This guide will help you understand the basic concepts of bar charts, how to include them in your AsciiDoctor documents, and provide examples of different types of bar charts.

1.2. Basic Concepts

1.2.1. What are Bar Charts?

Bar charts in the DocOps extension are SVG-based graphical elements that can be included in your AsciiDoctor documents. Each bar chart has:

  • A title (the main heading of the chart)

  • X and Y axis labels

  • A series of data points (bars)

  • Optional display settings for customizing the appearance

The extension supports two main types of bar charts:

  • Regular Bar Charts - For comparing individual data points

  • Grouped Bar Charts - For comparing multiple data series across categories

Each type can be displayed in various styles, including:

  • Horizontal bars

  • Vertical bars

  • Cylinder-style bars

  • Dark mode charts

1.2.2. Bar Chart Components

Regular Bar Charts

A regular bar chart includes:

  • A title

  • X and Y axis labels

  • A series of data points, each with a label and value

  • Display settings for visual appearance

Grouped Bar Charts

A grouped bar chart includes:

  • A title

  • X and Y axis labels

  • Multiple groups, each containing a series of data points

  • Display settings for visual appearance

1.3. AsciiDoctor Syntax for Bar Charts

To include bar charts in your AsciiDoctor document, you use a special macro syntax. Here’s the basic format:

[docops,bar]
----
title=Chart Title
yLabel=Y-Axis Label
xLabel=X-Axis Label
baseColor=#4361ee
vBar=false
useDark=false
type=R
---
Category 1 | 120.0
Category 2 | 334.0
// More data points...
----

For grouped bar charts, use the following format:

[docops,bargroup]
----
title=Chart Title
yLabel=Y-Axis Label
xLabel=X-Axis Label
baseColor=#D988B9
vBar=false
condensed=false
useDark=false
---
Group 1 | Category 1 | 5000.0
Group 1 | Category 2 | 7000.0
// More data points...
Group 2 | Category 1 | 6000.0
Group 2 | Category 2 | 8000.0
// More data points...
// More groups...
----

The macro processes the configuration and data and generates an SVG representation of the bar chart that is embedded in your document.

1.3.1. Regular Bar Chart Properties

Configuration Properties

  • title (required): The main heading of the chart

  • yLabel (optional): The label for the Y-axis

  • xLabel (optional): The label for the X-axis

  • baseColor (optional): The base color for the bars (default: "#FE7A36")

  • type (optional): The style of the bars ("R" for regular, "C" for cylinder)

  • vBar (optional): Whether to display vertical bars (default: false)

  • useDark (optional): Whether to use dark mode (default: false)

  • sorted (optional): Whether to sort the bars by value (default: false)

  • scale (optional): A scaling factor for the chart (default: 1.0)

Data Format

After the configuration section and the separator line (---), each line represents a data point with the following format:

Label | Value [| Color]

  • Label (required): The category label for the data point

  • Value (required): The numerical value for the data point

  • Color (optional): A custom color for this specific data point

1.3.2. Grouped Bar Chart Properties

Configuration Properties

  • title (required): The main heading of the chart

  • yLabel (optional): The label for the Y-axis

  • xLabel (optional): The label for the X-axis

  • baseColor (optional): The base color for the chart (default: "#D988B9")

  • lineColor (optional): The color for grid lines (default: "#FFBB5C")

  • vBar (optional): Whether to display vertical bars (default: false)

  • condensed (optional): Whether to use condensed mode (default: false)

  • useDark (optional): Whether to use dark mode (default: false)

  • scale (optional): A scaling factor for the chart (default: 1.0)

Data Format

After the configuration section and the separator line (---), each line represents a data point with the following format:

Group | Label | Value [| Color]

  • Group (required): The name of the group

  • Label (required): The category label for the data point

  • Value (required): The numerical value for the data point

  • Color (optional): A custom color for this specific data point

1.4. Examples

1.4.1. Basic Bar Chart Example

Here’s a simple example of a horizontal bar chart:

[docops,bar]
----
title=Monthly Sales Performance
yLabel=Revenue ($)
xLabel=Month
baseColor=#4cc9f0
type=R
---
January | 120.0
February | 334.0
March | 455.0
April | 244.0
May | 256.0
June | 223.0
----
DocOps.ioMIT Licensehttps://docops.io2025-06-13Generated by DocOps.io - Licensed under MIT License0255075100Revenue ($)January120February334March455April244May256June223MonthMonthly Sales Performance

1.4.2. Vertical Bar Chart Example

You can create vertical bar charts by setting the vBar property to true:

[docops,bar]
----
title=Berry Picking by Month 2024
yLabel=Number of Sales
xLabel=Month
baseColor=#4361ee
vBar=true
---
Jan | 120.0
Feb | 334.0
Mar | 455.0
Apr | 244.0
May | 256.0
Jun | 223.0
----
DocOps.ioMIT Licensehttps://docops.io2025-06-13Generated by DocOps.io - Licensed under MIT License0255075100Number of SalesJan120Feb334Mar455Apr244May256Jun223MonthBerry Picking by Month 2024

1.4.3. Cylinder-Style Bar Chart Example

You can create cylinder-style bar charts by setting the type property to "C":

[docops,bar]
----
title=Quarterly Performance
yLabel=Revenue ($)
xLabel=Quarter
baseColor=#f72585
type=C
---
Q1 | 320.0
Q2 | 480.0
Q3 | 290.0
Q4 | 410.0
----
320 Q1 480 Q2 290 Q3 410 Q4 Revenue ($) Quarter Quarterly Performance Revenue ($) 260 280 300 320 340 360 380 400 420 440Quarter

1.4.4. Dark Mode Bar Chart Example

You can create dark mode bar charts by setting the useDark property to true:

[docops,bar]
----
title=Monthly Sales Performance (Dark Mode)
yLabel=Revenue ($)
xLabel=Month
baseColor=#4cc9f0
useDark=true
type=R
---
January | 120.0
February | 334.0
March | 455.0
April | 244.0
May | 256.0
June | 223.0
----
DocOps.ioMIT Licensehttps://docops.io2025-06-13Generated by DocOps.io - Licensed under MIT License0255075100Revenue ($)January120February334March455April244May256June223MonthMonthly Sales Performance (Dark Mode)

1.4.5. Grouped Bar Chart Example

Here’s an example of a grouped bar chart:

[docops,bargroup]
----
title=Annual Product Sales Report
yLabel=Sales (USD)
xLabel=Quarters
lineColor=#921A40
baseColor=#F3EDED
---
Product A | Q1 | 5000.0
Product A | Q2 | 7000.0
Product A | Q3 | 8000.0
Product A | Q4 | 6000.0
Product B | Q1 | 6000.0
Product B | Q2 | 8000.0
Product B | Q3 | 7000.0
Product B | Q4 | 9000.0
----
DocOps.ioMIT Licensehttps://docops.io2025-06-13Generated by DocOps.io - Licensed under MIT LicenseAnnual Product Sales ReportQuartersSales (USD)5.0k7.0k8.0k6.0kProductA6.0k8.0k7.0k9.0kProductB 5.0k 5.5k 6.0k 6.5k 7.0k 7.5k 8.0k 8.5kQ1Q2Q3Q4

1.4.6. Vertical Grouped Bar Chart Example

You can create vertical grouped bar charts by setting the vBar property to true:

[docops,bargroup]
----
title=Annual Product Sales Report
yLabel=Sales (USD)
xLabel=Quarters
lineColor=#921A40
baseColor=#F3EDED
vBar=true
---
Product A | Q1 | 5000.0
Product A | Q2 | 7000.0
Product A | Q3 | 8000.0
Product A | Q4 | 6000.0
Product B | Q1 | 6000.0
Product B | Q2 | 8000.0
Product B | Q3 | 7000.0
Product B | Q4 | 9000.0
----
DocOps.ioMIT Licensehttps://docops.io2025-06-13Generated by DocOps.io - Licensed under MIT LicenseAnnual Product Sales ReportQuartersSales (USD)Product A5.0kQ17.0kQ28.0kQ36.0kQ4Product B6.0kQ18.0kQ27.0kQ39.0kQ4LegendQ1Q2Q3Q4

1.4.7. Condensed Grouped Bar Chart Example

You can create condensed grouped bar charts by setting the condensed property to true:

[docops,bargroup]
----
title=Annual Product Sales Report
yLabel=Sales (USD)
xLabel=Quarters
lineColor=#921A40
baseColor=#F3EDED
condensed=true
---
Product A | Q1 | 5000.0
Product A | Q2 | 7000.0
Product A | Q3 | 8000.0
Product A | Q4 | 6000.0
Product B | Q1 | 6000.0
Product B | Q2 | 8000.0
Product B | Q3 | 7000.0
Product B | Q4 | 9000.0
----
DocOps.ioMIT Licensehttps://docops.io2025-06-13Generated by DocOps.io - Licensed under MIT LicenseAnnual Product Sales Report QuartersSales (USD)7501.5k2.3k3.0k3.8k4.5k5.3k6.0kProduct A5.0k7.0k8.0k6.0kProduct B6.0k8.0k7.0k9.0kLegend Q1Q2Q3Q4

1.5. Conclusion

The DocOps Bar Chart Extension provides a powerful way to enhance your AsciiDoctor documents with visually appealing bar charts. By using the simple key-value configuration format and pipe-separated data, you can create customized charts that match your document’s style and purpose.

The extension supports both regular and grouped bar charts, with various display options including horizontal/vertical orientation, cylinder style, dark mode, and condensed mode for grouped charts.

2. DocOps Line Charts

2.1. Introduction

The DocOps Line Chart Extension allows you to create visually appealing line charts in your AsciiDoctor documents. Line charts are useful for visualizing trends over time, comparing multiple data series, and identifying patterns in your data.

This guide will help you understand the basic concepts of line charts, how to include them in your AsciiDoctor documents, and provide examples of different types of line charts.

2.2. Basic Concepts

2.2.1. What are Line Charts?

Line charts in the DocOps extension are SVG-based graphical elements that can be included in your AsciiDoctor documents. Each line chart has:

  • A title (the main heading of the chart)

  • One or more data series (lines)

  • Data points for each series

  • X-axis labels (typically time periods)

  • Y-axis values

  • Optional display settings for customizing the appearance

The extension supports various styles of line charts, including:

  • Multiple data series on a single chart

  • Smooth curved lines or straight line segments

  • Interactive tooltips on hover

  • Customizable colors and backgrounds

  • Dark mode support for better visibility in dark-themed documents

2.2.2. Line Chart Components

A line chart includes:

  • A title

  • One or more data series, each with:

    • A series label (shown in the legend)

    • A set of data points, each with an x-label and y-value

  • A legend showing all data series

  • Grid lines and axis ticks

  • Display settings for visual appearance

2.3. AsciiDoctor Syntax for Line Charts

To include line charts in your AsciiDoctor document, you use a special macro syntax. The DocOps extension now supports a simpler tabular format for line charts:

[docops,line]
----
title=Chart Title
width=900
darkMode=false
---
Series 1 | Jan | 40
Series 1 | Feb | 70
Series 1 | Mar | 90
Series 2 | Jan | 22
Series 2 | Feb | 33
Series 2 | Mar | 44
----

The macro processes this tabular data and generates an SVG representation of the line chart that is embedded in your document.

2.3.1. Line Chart Configuration

The configuration parameters are specified at the beginning of the content, followed by a separator line (---), and then the actual chart data.

Configuration Parameters

  • title (optional): The main heading of the chart (default: "Line Chart")

  • width (optional): The width of the chart in pixels (default: 500)

  • height (optional): The height of the chart in pixels (default: 500)

  • legend (optional): Whether to display a legend (default: true)

  • hover (optional): Whether to enable hover effects (default: true)

  • smooth (optional): Whether to display smooth curved lines (true) or straight line segments (false) (default: true)

  • points (optional): Whether to display data points (default: true)

  • grid (optional): Whether to display grid lines (default: true)

  • xAxisLabel (optional): Label for the x-axis

  • yAxisLabel (optional): Label for the y-axis

  • darkMode (optional): Whether to use dark mode styling (default: false)

  • colors (optional): A comma-separated list of custom colors for the chart

Data Format

The data for the line chart is specified in a simple tabular format:

Series Name | X-Label | Y-Value

Where: * Series Name is the name of the data series (shown in the legend) * X-Label is the label for the x-axis point * Y-Value is the numerical value for the data point

2.4. Examples

2.4.1. Basic Line Chart Example

Here’s a simple example of a line chart with multiple data series using the new tabular format:

[docops,line]
----
title=Monthly Performance Metrics
width=800
---
Sales | Jan | 40
Sales | Feb | 70
Sales | Mar | 90
Sales | Apr | 70
Sales | May | 40
Sales | Jun | 30
Marketing | Jan | 22
Marketing | Feb | 33
Marketing | Mar | 44
Marketing | Apr | 55
Marketing | May | 66
Marketing | Jun | 77
----
DocOps.ioMIT Licensehttps://docops.io2025-06-13Generated by DocOps.io - Licensed under MIT LicenseMonthly Performance MetricsJanFebMarAprMayJun2030405060708090Sales: (Jan, 40)Sales: (Feb, 70)Sales: (Mar, 90)Sales: (Apr, 70)Sales: (May, 40)Sales: (Jun, 30)Marketing: (Jan, 22)Marketing: (Feb, 33)Marketing: (Mar, 44)Marketing: (Apr, 55)Marketing: (May, 66)Marketing: (Jun, 77)SalesMarketing

2.4.2. Multi-Series Line Chart Example

Here’s an example of a line chart with three data series:

[docops,line]
----
title=Department Performance Metrics
width=900
smooth=true
---
Sales | Jan | 40
Sales | Feb | 70
Sales | Mar | 90
Sales | Apr | 70
Sales | May | 40
Sales | Jun | 30
Sales | Jul | 60
Sales | Aug | 90
Sales | Sept | 70
Marketing | Jan | 22
Marketing | Feb | 33
Marketing | Mar | 44
Marketing | Apr | 55
Marketing | May | 66
Marketing | Jun | 77
Marketing | Jul | 88
Marketing | Aug | 109
Marketing | Sept | 110
Development | Jan | 56
Development | Feb | 65
Development | Mar | 78
Development | Apr | 72
Development | May | 56
Development | Jun | 94
Development | Jul | 86
Development | Aug | 73
Development | Sept | 70
----
DocOps.ioMIT Licensehttps://docops.io2025-06-13Generated by DocOps.io - Licensed under MIT LicenseDepartment Performance MetricsJanFebMarAprMayJunJulAugSept2030405060708090100110Sales: (Jan, 40)Sales: (Feb, 70)Sales: (Mar, 90)Sales: (Apr, 70)Sales: (May, 40)Sales: (Jun, 30)Sales: (Jul, 60)Sales: (Aug, 90)Sales: (Sept, 70)Marketing: (Jan, 22)Marketing: (Feb, 33)Marketing: (Mar, 44)Marketing: (Apr, 55)Marketing: (May, 66)Marketing: (Jun, 77)Marketing: (Jul, 88)Marketing: (Aug, 109)Marketing: (Sept, 110)Development: (Jan, 56)Development: (Feb, 65)Development: (Mar, 78)Development: (Apr, 72)Development: (May, 56)Development: (Jun, 94)Development: (Jul, 86)Development: (Aug, 73)Development: (Sept, 70)SalesMarketingDevelopment

2.4.3. Product Segment Performance Example

This example shows performance data for different product segments over a year:

[docops,line, role=left, name=seg]
----
title=Product Segment Performance
width=900
darkMode=false
---
Affordable Segment | Jan | 173
Affordable Segment | Feb | 153
Affordable Segment | Mar | 195
Affordable Segment | Apr | 147
Affordable Segment | May | 120
Affordable Segment | Jun | 144
Affordable Segment | Jul | 148
Affordable Segment | Aug | 109
Affordable Segment | Sept | 174
Affordable Segment | Oct | 130
Affordable Segment | Nov | 172
Affordable Segment | Dec | 132
Luxury Segment | Jan | 189
Luxury Segment | Feb | 189
Luxury Segment | Mar | 105
Luxury Segment | Apr | 112
Luxury Segment | May | 173
Luxury Segment | Jun | 109
Luxury Segment | Jul | 151
Luxury Segment | Aug | 197
Luxury Segment | Sept | 174
Luxury Segment | Oct | 145
Luxury Segment | Nov | 177
Luxury Segment | Dec | 167
Super Luxury Segment | Jan | 185
Super Luxury Segment | Feb | 185
Super Luxury Segment | Mar | 126
Super Luxury Segment | Apr | 134
Super Luxury Segment | May | 196
Super Luxury Segment | Jun | 153
Super Luxury Segment | Jul | 112
Super Luxury Segment | Aug | 133
Super Luxury Segment | Sept | 200
Super Luxury Segment | Oct | 145
Super Luxury Segment | Nov | 167
Super Luxury Segment | Dec | 110
----
DocOps.ioMIT Licensehttps://docops.io2025-06-13Generated by DocOps.io - Licensed under MIT LicenseProduct Segment PerformanceJanFebMarAprMayJunJulAugSeptOctNovDec120140160180200Affordable Segment: (Jan, 173)Affordable Segment: (Feb, 153)Affordable Segment: (Mar, 195)Affordable Segment: (Apr, 147)Affordable Segment: (May, 120)Affordable Segment: (Jun, 144)Affordable Segment: (Jul, 148)Affordable Segment: (Aug, 109)Affordable Segment: (Sept, 174)Affordable Segment: (Oct, 130)Affordable Segment: (Nov, 172)Affordable Segment: (Dec, 132)Luxury Segment: (Jan, 189)Luxury Segment: (Feb, 189)Luxury Segment: (Mar, 105)Luxury Segment: (Apr, 112)Luxury Segment: (May, 173)Luxury Segment: (Jun, 109)Luxury Segment: (Jul, 151)Luxury Segment: (Aug, 197)Luxury Segment: (Sept, 174)Luxury Segment: (Oct, 145)Luxury Segment: (Nov, 177)Luxury Segment: (Dec, 167)Super Luxury Segment: (Jan, 185)Super Luxury Segment: (Feb, 185)Super Luxury Segment: (Mar, 126)Super Luxury Segment: (Apr, 134)Super Luxury Segment: (May, 196)Super Luxury Segment: (Jun, 153)Super Luxury Segment: (Jul, 112)Super Luxury Segment: (Aug, 133)Super Luxury Segment: (Sept, 200)Super Luxury Segment: (Oct, 145)Super Luxury Segment: (Nov, 167)Super Luxury Segment: (Dec, 110)Affordable SegmentLuxury SegmentSuper Luxury Segment

2.4.4. Dark Mode Line Chart Example

You can enable dark mode for better visibility in dark-themed documents:

[docops,line]
----
title=Series Comparison
width=800
darkMode=true
---
Series A | 1 | 10
Series A | 2 | 15
Series A | 3 | 13
Series A | 4 | 17
Series A | 5 | 20
Series B | 1 | 5
Series B | 2 | 7
Series B | 3 | 10
Series B | 4 | 12
Series B | 5 | 15
----
DocOps.ioMIT Licensehttps://docops.io2025-06-13Generated by DocOps.io - Licensed under MIT LicenseSeries Comparison1234568101214161820Series A: (1, 10)Series A: (2, 15)Series A: (3, 13)Series A: (4, 17)Series A: (5, 20)Series B: (1, 5)Series B: (2, 7)Series B: (3, 10)Series B: (4, 12)Series B: (5, 15)Series ASeries B

2.4.5. Custom Colors Example

You can specify custom colors for your line chart:

[docops,line]
----
title=Quarterly Performance
width=800
colors=#6a0dad,#0da6a0,#daad0d
---
Q1 2023 | Jan | 120
Q1 2023 | Feb | 150
Q1 2023 | Mar | 180
Q2 2023 | Apr | 140
Q2 2023 | May | 170
Q2 2023 | Jun | 200
Q3 2023 | Jul | 160
Q3 2023 | Aug | 190
Q3 2023 | Sep | 220
----
DocOps.ioMIT Licensehttps://docops.io2025-06-13Generated by DocOps.io - Licensed under MIT LicenseQuarterly PerformanceJanFebMar120140160180200220Q1 2023: (Jan, 120)Q1 2023: (Feb, 150)Q1 2023: (Mar, 180)Q2 2023: (Apr, 140)Q2 2023: (May, 170)Q2 2023: (Jun, 200)Q3 2023: (Jul, 160)Q3 2023: (Aug, 190)Q3 2023: (Sep, 220)Q1 2023Q2 2023Q3 2023

2.5. Interactive Features

Line charts in the DocOps extension include several interactive features:

  • Tooltips: Hover over data points to see detailed information

  • Legend Highlighting: Hover over legend items to highlight them

  • Visual Effects: Data points have hover effects for better visibility

These interactive features enhance the user experience and make it easier to interpret the data in your charts.

2.6. Conclusion

The DocOps Line Chart Extension provides a powerful way to enhance your AsciiDoctor documents with visually appealing line charts. The new tabular data format makes it easier to create and maintain line charts compared to the previous JSON format.

The extension supports multiple data series, smooth or straight lines, interactive features, and dark mode, giving you flexibility in how you present your time-series data. The dark mode support is particularly useful for documents that are viewed in low-light environments or for users who prefer dark-themed interfaces.

3. DocOps Pie Charts

3.1. Introduction

The DocOps Pie Chart Extension allows you to create visually appealing pie charts in your AsciiDoctor documents. Pie charts are useful for showing the proportion of different categories within a whole and comparing relative sizes of data.

This guide will help you understand the basic concepts of pie charts, how to include them in your AsciiDoctor documents, and provide examples of different types of pie charts.

3.2. Basic Concepts

3.2.1. What are Pie Charts?

Pie charts in the DocOps extension are SVG-based graphical elements that can be included in your AsciiDoctor documents. Each pie chart has:

  • A title (the main heading of the chart)

  • A series of slices, each representing a proportion of the whole

  • Labels for each slice

  • Optional display settings for customizing the appearance

The extension supports two main types of pie charts:

  • Regular Pie Charts - A traditional circular chart divided into slices

  • Donut Charts - Similar to pie charts but with a hole in the center

Each type can be displayed in various styles, including:

  • Custom colors for slices

  • Interactive hover effects

  • Percentage labels

  • Dark mode support for better visibility in dark-themed documents

3.2.2. Pie Chart Components

A pie chart or donut chart includes:

  • A title

  • A series of slices, each with a label and value

  • Optional configuration parameters for visual appearance

3.3. AsciiDoctor Syntax for Pie Charts

To include pie charts in your AsciiDoctor document, you use a special macro syntax. Here’s the basic format:

[docops,pieslice]
----
Product A | 30
Product B | 25
Product C | 20
Product D | 15
Product E | 10
----

For more customization, you can add configuration parameters:

[docops,pieslice]
----
title=Sales Distribution by Product
width=600
height=400
legend=true
percentages=true
donut=false
---
Product A | 30
Product B | 25
Product C | 20
Product D | 15
Product E | 10
----

The macro processes the configuration and data to generate an SVG representation of the pie chart that is embedded in your document.

3.3.1. Configuration Parameters

The following configuration parameters are available:

  • title (optional): The main heading of the chart (default: "Pie Chart")

  • width (optional): The width of the chart in pixels (default: 500)

  • height (optional): The height of the chart in pixels (default: 500)

  • legend (optional): Whether to display a legend (default: true)

  • percentages (optional): Whether to display percentage values (default: true)

  • hover (optional): Whether to enable hover effects (default: true)

  • donut (optional): Whether to display as a donut chart (default: false)

  • colors (optional): A comma-separated list of custom colors for the chart

  • darkMode (optional): Whether to use dark mode styling (default: false)

3.3.2. Data Format

The data for the pie chart is specified in a simple format:

Label | Value [| Color]

Where: * Label is the category name * Value is the numerical value for the slice * Color (optional) is a custom color for this specific slice (e.g., #ff5733)

If you include configuration parameters, you must separate them from the data with a line containing three dashes (---).

3.4. Examples

3.4.1. Basic Pie Chart Example

Here’s a simple example of a pie chart with minimal configuration:

[docops,pieslice]
----
Product A | 30
Product B | 25
Product C | 20
Product D | 15
Product E | 10
----
DocOps.ioMIT Licensehttps://docops.io2025-06-13Generated by DocOps.io - Licensed under MIT LicensePie ChartProduct A: 30.0 (30.0%)30.0%Product B: 25.0 (25.0%)25.0%Product C: 20.0 (20.0%)20.0%Product D: 15.0 (15.0%)15.0%Product E: 10.0 (10.0%)10.0%Product A: 30.0 (30.0%)Product A (30.0%)Product B: 25.0 (25.0%)Product B (25.0%)Product C: 20.0 (20.0%)Product C (20.0%)Product D: 15.0 (15.0%)Product D (15.0%)Product E: 10.0 (10.0%)Product E (10.0%)

3.4.2. Pie Chart with Configuration

Here’s an example with configuration parameters:

[docops,pieslice]
----
title=Sales Distribution by Product
width=600
height=400
legend=true
percentages=true
donut=false
---
Product A | 30
Product B | 25
Product C | 20
Product D | 15
Product E | 10
----
DocOps.ioMIT Licensehttps://docops.io2025-06-13Generated by DocOps.io - Licensed under MIT LicenseSales Distribution by ProductProduct A: 30.0 (30.0%)30.0%Product B: 25.0 (25.0%)25.0%Product C: 20.0 (20.0%)20.0%Product D: 15.0 (15.0%)15.0%Product E: 10.0 (10.0%)10.0%Product A: 30.0 (30.0%)Product A (30.0%)Product B: 25.0 (25.0%)Product B (25.0%)Product C: 20.0 (20.0%)Product C (20.0%)Product D: 15.0 (15.0%)Product D (15.0%)Product E: 10.0 (10.0%)Product E (10.0%)

3.4.3. Pie Chart with Positioning

You can position your chart using the role attribute:

.Pie Chart
[docops,pieslice, role=left]
----
title=Favorite Anime
width=600
height=400
legend=true
percentages=true
donut=false
---
Naruto | 16.0
Bleach | 4.0
One Piece | 9.0
One Punch Man | 7.0
My Hero Academia | 6.0
Demon Slayer | 10.0
----
DocOps.ioMIT Licensehttps://docops.io2025-06-13Generated by DocOps.io - Licensed under MIT LicenseFavorite AnimeNaruto: 16.0 (30.8%)30.8%Bleach: 4.0 (7.7%)7.7%One Piece: 9.0 (17.3%)17.3%One Punch Man: 7.0 (13.5%)13.5%My Hero Academia: 6.0 (11.5%)11.5%Demon Slayer: 10.0 (19.2%)19.2%Naruto: 16.0 (30.8%)Naruto (30.8%)Bleach: 4.0 (7.7%)Bleach (7.7%)One Piece: 9.0 (17.3%)One Piece (17.3%)One Punch Man: 7.0 (13.5%)One Punch Man (13.5%)My Hero Academia: 6.0 (11.5%)My Hero Academia (11.5%)Demon Slayer: 10.0 (19.2%)Demon Slayer (19.2%)

3.4.4. Donut Chart Example

You can create donut charts by setting the donut parameter to true:

.Pie Chart
[docops,pieslice, role=left]
----
title=Favorite Anime
width=600
height=400
legend=true
percentages=true
donut=true
---
Naruto | 16.0
Bleach | 4.0
One Piece | 9.0
One Punch Man | 7.0
My Hero Academia | 6.0
Demon Slayer | 10.0
----
DocOps.ioMIT Licensehttps://docops.io2025-06-13Generated by DocOps.io - Licensed under MIT LicenseFavorite AnimeNaruto: 16.0 (30.8%)30.8%Bleach: 4.0 (7.7%)7.7%One Piece: 9.0 (17.3%)17.3%One Punch Man: 7.0 (13.5%)13.5%My Hero Academia: 6.0 (11.5%)11.5%Demon Slayer: 10.0 (19.2%)19.2%Naruto: 16.0 (30.8%)Naruto (30.8%)Bleach: 4.0 (7.7%)Bleach (7.7%)One Piece: 9.0 (17.3%)One Piece (17.3%)One Punch Man: 7.0 (13.5%)One Punch Man (13.5%)My Hero Academia: 6.0 (11.5%)My Hero Academia (11.5%)Demon Slayer: 10.0 (19.2%)Demon Slayer (19.2%)

3.4.5. Custom Colors for Individual Slices

You can specify custom colors for individual slices:

[docops,pieslice, title="Sales Distribution with Custom Colors"]
----
Product A | 30 | #ff5733
Product B | 25 | #33ff57
Product C | 20 | #3357ff
Product D | 15 | #f3ff33
Product E | 10 | #ff33f3
----
DocOps.ioMIT Licensehttps://docops.io2025-06-13Generated by DocOps.io - Licensed under MIT LicensePie ChartProduct A: 30.0 (30.0%)30.0%Product B: 25.0 (25.0%)25.0%Product C: 20.0 (20.0%)20.0%Product D: 15.0 (15.0%)15.0%Product E: 10.0 (10.0%)10.0%Product A: 30.0 (30.0%)Product A (30.0%)Product B: 25.0 (25.0%)Product B (25.0%)Product C: 20.0 (20.0%)Product C (20.0%)Product D: 15.0 (15.0%)Product D (15.0%)Product E: 10.0 (10.0%)Product E (10.0%)

3.4.6. Custom Color Palette

You can specify a custom color palette for the entire chart:

[docops,pieslice]
----
title=Sales with Custom Palette
colors=#6a0dad,#0da6a0,#daad0d,#ad0d6a,#0dad6a
---
Product A | 30
Product B | 25
Product C | 20
Product D | 15
Product E | 10
----
DocOps.ioMIT Licensehttps://docops.io2025-06-13Generated by DocOps.io - Licensed under MIT LicenseSales with Custom PaletteProduct A: 30.0 (30.0%)30.0%Product B: 25.0 (25.0%)25.0%Product C: 20.0 (20.0%)20.0%Product D: 15.0 (15.0%)15.0%Product E: 10.0 (10.0%)10.0%Product A: 30.0 (30.0%)Product A (30.0%)Product B: 25.0 (25.0%)Product B (25.0%)Product C: 20.0 (20.0%)Product C (20.0%)Product D: 15.0 (15.0%)Product D (15.0%)Product E: 10.0 (10.0%)Product E (10.0%)

3.4.7. Dark Mode Example

You can enable dark mode for better visibility in dark-themed documents:

[docops,pieslice]
----
title=Market Share Distribution
width=600
height=400
darkMode=true
---
Product A | 35
Product B | 25
Product C | 20
Product D | 15
Product E | 5
----
DocOps.ioMIT Licensehttps://docops.io2025-06-13Generated by DocOps.io - Licensed under MIT LicenseMarket Share DistributionProduct A: 35.0 (35.0%)35.0%Product B: 25.0 (25.0%)25.0%Product C: 20.0 (20.0%)20.0%Product D: 15.0 (15.0%)15.0%Product E: 5.0 (5.0%)5.0%Product A: 35.0 (35.0%)Product A (35.0%)Product B: 25.0 (25.0%)Product B (25.0%)Product C: 20.0 (20.0%)Product C (20.0%)Product D: 15.0 (15.0%)Product D (15.0%)Product E: 5.0 (5.0%)Product E (5.0%)

3.5. Interactive Features

Pie charts in the DocOps extension include several interactive features:

  • Hover Effects: Pie slices have hover effects for better visibility

  • Tooltips: Hover over slices to see detailed information

  • Legend Interaction: Hovering over legend items highlights the corresponding slice

These interactive features enhance the user experience and make it easier to interpret the data in your charts.

3.6. Conclusion

The DocOps Pie Chart Extension provides a powerful way to enhance your AsciiDoctor documents with visually appealing pie charts. By using the simple pipe-separated format and configuration parameters, you can create customized charts that match your document’s style and purpose.

The extension supports both regular pie charts and donut charts, with various display options including custom colors, interactive features, and dark mode. The dark mode support is particularly useful for documents that are viewed in low-light environments or for users who prefer dark-themed interfaces.