using NetCorePpt;
using NetCorePpt.ChartProps;
using static NetCorePptxTest.Modules.Constants;
using BarChartOpts = NetCorePpt.ChartProps.BarChartOpts;
namespace NetCorePptxTest.Modules;
///
/// 测试 AddBarChart 这样的 方法;
///
public class DemoChartByChartType
{
///
/// 使用 增加 bar 的图表
///
///
public static void genSlide01(PptxGen pptx)
{
var slide = pptx.addSlide(new AddSlideProps { sectionTitle = "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
// Add table
slide.addTable(new List
{
new TableRow
{
new TableCell { text = "Chart Options: Chart Title, Cat/Val Axis Title", options = Constants.BASE_TEXT_OPTS_L },
Constants.BASE_TEXT_OPTS_R
}
}, Constants.BASE_TABLE_OPTS);
// Chart options
var barChartOption = new BarChartOpts
{
barDir = BarDirection.col, // "col",
barGrouping = ChartBarGrouping.stacked,
chartColors = Constants.COLORS_CHART,
invertedColors = new List { "C0504D" },
showLegend = true,
showTitle = true,
// title options
//titleRotate = 10,
};
barChartOption.x = 0.5;
barChartOption.y = 0.5;
barChartOption.w = "90%";
barChartOption.h = "90%";
barChartOption.titleProps = new ChartPropsTitle
{
title = "Chart Title",
titleFontFace = "Helvetica Neue Thin",
titleFontSize = 24,
titleColor = Constants.COLORS_ACCENT[0],
titlePos = new PositionXY { x = 1.5, y = 0 },
//titleRotate = 10,
};
barChartOption.axisCat = new ChartPropsAxisCat
{
// Category axis options
showCatAxisTitle = true,
catAxisLabelColor = Constants.COLORS_ACCENT[1],
catAxisTitleColor = Constants.COLORS_ACCENT[1],
catAxisTitle = "Cat Axis Title",
catAxisTitleFontSize = 14
};
barChartOption.axisVal = new ChartPropsAxisVal
{
// Value axis options
showValAxisTitle = true,
valAxisLabelColor = Constants.COLORS_ACCENT[2],
valAxisTitleColor = Constants.COLORS_ACCENT[2],
valAxisTitle = "Val Axis Title",
valAxisTitleFontSize = 14
};
// Add bar chart
slide.addBarChart(Constants.dataChartBar8Series, barChartOption);
}
///
/// 使用 增加 bar 的图表
///
///
public static void genSlide02_BarChart(PptxGen pptx)
{
var slide = pptx.addSlide(new AddSlideProps { sectionTitle = "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
// Add table
slide.addTable(new List {
new TableRow {
new TableCell { text = "Chart Examples: Bar Chart", options = Constants.BASE_TEXT_OPTS_L },
Constants.BASE_TEXT_OPTS_R
}
}, Constants.BASE_TABLE_OPTS);
// Chart data
var arrDataRegions = new List {
new OptsChartData{
name = "Region 1",
labels = new List>{ new List { "May", "June", "July", "August" } },
values = new List { 26, 53, 100, 75 }
},
new OptsChartData {
name = "Region 2",
labels = new List >{ new List { "May", "June", "July", "August" } },
values = new List { 43.5, 70.3, 90.1, 80.05 }
}
};
var arrDataSersCats = new List {
new OptsChartData {
name = "Series 1",
labels = new List>{ new List { "Category 1", "Category 2", "Category 3", "Category 4" } },
values = new List { 4.3, 2.5, 3.5, 4.5 }
},
new OptsChartData {
name = "Series 2",
labels = new List>{ new List { "Category 1", "Category 2", "Category 3", "Category 4" }},
values = new List { 2.4, 4.4, 1.8, 2.8 }
},
new OptsChartData{
name = "Series 3",
labels =new List>{ new List { "Category 1", "Category 2", "Category 3", "Category 4" }},
values = new List { 2, 2, 3, 5 }
}
};
if (1 == 1)
{
var axisCat = new ChartPropsAxisCat
{
catAxisLabelColor = Constants.COLORS_ACCENT[0],
catAxisLabelFontFace = "Helvetica Neue",
catAxisLabelFontSize = 12,
catAxisOrientation = "maxMin",
catAxisMajorTickMark = ChartAxisTickMark.@in,
catAxisMinorTickMark = ChartAxisTickMark.cross,
};
var valCat = new ChartPropsAxisVal
{
valAxisMajorTickMark = ChartAxisTickMark.cross,
valAxisMinorTickMark = ChartAxisTickMark.@out,
};
// TOP-LEFT: Horizontal bar chart
var optsChartBar1 = new BarChartOpts
{
chartArea = new ChartAreaProps { border = new BorderProps(Constants.COLORS_SPECTRUM[0], null, 1) },
plotArea = new ChartPropsFillLine { fill = "DAE3F3" },
chartColors = Constants.COLORS_SPECTRUM,
objectName = "bar chart (top L)",
altText = "this is the alt text content",
barDir = BarDirection.bar, // "bar",
// position = new PositionProps(0.5, 0.6, 6.0, 3.0),
x = 0.5,
y = 0.6,
w = 6,
h = 3,
axisCat = axisCat,
axisVal = valCat
};
slide.addBarChart(arrDataSersCats, optsChartBar1);
}
if (2 == 2)
{
var bar2_axisCat = new ChartPropsAxisCat
{
catAxisLabelColor = Constants.COLORS_ACCENT[0],
catAxisLabelFontFace = "Arial",
catAxisLabelFontSize = 11,
catAxisOrientation = "minMax",
catAxisMajorTickMark = ChartAxisTickMark.none,
catAxisMinorTickMark = ChartAxisTickMark.none,
};
var bar2_axisVal = new ChartPropsAxisVal
{
valAxisLabelColor = Constants.COLORS_ACCENT[0],
valAxisOrientation = "maxMin",
valAxisMajorTickMark = ChartAxisTickMark.none,
valAxisMinorTickMark = ChartAxisTickMark.none,
};
var dataLabelProp = new ChartPropsDataLabel
{
dataLabelColor = Constants.COLORS_ACCENT[0],
dataLabelFontFace = "Courier",
dataLabelFontSize = 10,
dataLabelPosition = DataLabelPosition.outEnd,
dataLabelFormatCode = "#.0",
};
// TOP-RIGHT: Vertical column chart
var optsChartBar2 = new BarChartOpts
{
// position = new PositionProps(7.0, 0.6, 6.0, 3.0),
x = 7,
y = 0.6,
w = 6,
h = 3,
chartArea = new ChartAreaProps { border = new BorderProps(Constants.COLORS_SPECTRUM[0], null, 1) },
plotArea = new ChartPropsFillLine { fill = "DAE3F3" },
chartColors = Constants.COLORS_SPECTRUM,
objectName = "bar chart (top R)",
barDir = BarDirection.col,
dataBorder = new BorderProps("F1F1F1", null, 1),
showValue = true,
showLegend = false,
showTitle = false,
axisCat = bar2_axisCat,
axisVal = bar2_axisVal,
dataLabel = dataLabelProp,
};
slide.addBarChart(arrDataRegions, optsChartBar2);
}
if (3 == 3)
{
var bar3_axisCat = new ChartPropsAxisCat
{
catAxisLabelColor = "CC0000",
catAxisLabelFontFace = "Helvetica Neue",
catAxisLabelFontSize = 14,
catAxisOrientation = "minMax",
};
var bar3_title = new ChartPropsTitle
{
title = "Sales by Region",
titleColor = "33CF22",
titleFontFace = "Helvetica Neue",
titleFontSize = 16,
};
// BOTTOM-LEFT: Horizontal bar with title and legend
var optsChartBar3 = new BarChartOpts
{
// position = new PositionProps(0.5, 3.8, 6.0, 3.5),
x = 0.5,
y = 3.8,
w = 6,
h = 3.5,
barDir = BarDirection.bar,
chartArea = new ChartAreaProps
{
fill = (SCHEME_COLORS.bg2),
border = new BorderProps(SCHEME_COLORS.accent3, null, 2)
},
plotArea = new ChartPropsFillLine { fill = "F2F9FC" },
axisCat = bar3_axisCat,
titleProps = bar3_title,
showTitle = true,
};
slide.addBarChart(Constants.dataChartBar3Series, optsChartBar3);
}
if (4 == 4)
{
// BOTTOM-RIGHT: Vertical column with title and legend
var bar4_axisCat = new ChartPropsAxisCat
{
catAxisLabelColor = Constants.COLORS_ACCENT[0],
catAxisLabelFontFace = "Calibri",
catAxisLabelFontSize = 11,
catAxisOrientation = "maxMin",
};
var bar4_axisVal = new ChartPropsAxisVal
{
valAxisMaxVal = 5000,
valAxisLabelColor = Constants.COLORS_ACCENT[0],
};
var bar4_dataLabel = new ChartPropsDataLabel
{
// dataBorder = new BorderProps("F1F1F1", null, 1),
dataLabelColor = "FFFFFF",
dataLabelFontFace = "Arial",
dataLabelFontSize = 10,
dataLabelPosition = DataLabelPosition.inEnd,
};
var bar4_title = new ChartPropsTitle
{
title = "Device Prices",
titleColor = Constants.COLORS_ACCENT[0]
};
var bar4_legend = new ChartPropsLegend
{
legendPos = LegendPosition.b,
legendColor = Constants.COLORS_ACCENT[1],
};
var optsChartBar4 = new BarChartOpts
{
// position = (7.0, 3.8, 6.0, 3.5),
x = 7,
y = 3.8,
w = 6,
h = 3.5,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
plotArea = new ChartPropsFillLine { fill = "404040" },
barDir = BarDirection.col,
barGapWidthPct = 25,
chartColors = Constants.COLORS_ACCENT,
chartColorsOpacity = 50,
dataBorder = new BorderProps(SCHEME_COLOR_NAMES.ACCENT1, null, 1),
dataLabel = bar4_dataLabel,
axisCat = bar4_axisCat,
axisVal = bar4_axisVal,
titleProps = bar4_title,
showValue = true,
showLegend = false,
showTitle = true,
};
slide.addBarChart(Constants.dataChartBar3Series, optsChartBar4);
}
}
///
/// SLIDE 3: Bar Chart options: Axis, DataLabel, Grid
///
///
public static void genSlide03_BarChart(PptxGen pptx)
{
var slide = pptx.addSlide(new AddSlideProps { sectionTitle = "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
// Add table
slide.addTable(new List
{
new TableRow {
new TableCell { text = "Chart Examples: Bar Chart Options: Axis, DataLabel, Grid", options = Constants.BASE_TEXT_OPTS_L },
Constants.BASE_TEXT_OPTS_R
}
}, Constants.BASE_TABLE_OPTS);
// Chart data
var arrDataRegions = new List
{
new OptsChartData {
name = "Region 1",
labels = new List> { new List { "May", "June", "July", "August" } },
values = new List { 26, 53, 100, 75 }
},
new OptsChartData {
name = "Region 2",
labels = new List> { new List { "May", "June", "July", "August" } },
values = new List { 43.5, 70.3, 90.1, 80.05 }
}
};
var arrDataHighVals = new List
{
new OptsChartData{
name = "California",
labels = new List> { new List { "Apartment", "Townhome", "Duplex", "House", "Big House" } },
values = new List { 2000, 2800, 3200, 4000, 5000 }
},
new OptsChartData {
name = "Texas",
labels = new List> { new List { "Apartment", "Townhome", "Duplex", "House", "Big House" } },
values = new List { 1400, 2000, 2500, 3000, 3800 }
}
};
// TOP-LEFT: Horizontal bar chart
var optsChartBar1 = new BarChartOpts
{
// position = new PositionProps(0.5, 0.6, 6.0, 3.0),
x = 0.5,
y = 0.6,
w = 6,
h = 3,
barDir = BarDirection.bar,
plotArea = new ChartPropsFillLine { fill = "F1F1F1" },
chartColors = Constants.COLORS_ACCENT,
axisCat = new ChartPropsAxisCat {
catAxisLabelColor = "CC0000",
catAxisLabelFontFace = "Helvetica Neue",
catAxisLabelFontSize = 14,
catGridLine = new OptsChartGridLine { style = GridLineStyle.none },
catAxisHidden = true,
},
axisVal = new ChartPropsAxisVal
{
valGridLine = new OptsChartGridLine { color = "cc6699", style = GridLineStyle.dash, size = 1 },
valAxisLineColor = "44AA66",
valAxisLineSize = 1,
valAxisLineStyle = CatAxisLineStyle.dash,
},
showLegend = true,
showTitle = true,
titleProps = new ChartPropsTitle
{
title = "catAxisHidden:true, valGridLine/valAxisLine:dash",
titleColor = "a9a9a9",
titleFontFace = "Helvetica Neue",
titleFontSize = 11
}
};
slide.addBarChart(arrDataRegions, optsChartBar1);
// TOP-RIGHT: Vertical column chart
var optsChartBar2 = new BarChartOpts
{
// position = new PositionProps(7.0, 0.6, 6.0, 3.0),
x = 7,
y = 0.6,
w = 6,
h = 3,
barDir = BarDirection.col,
plotArea = new ChartPropsFillLine { fill = "E1F1FF" },
dataBorder = new BorderProps("F1F1F1", null, 1),
dataLabel = new ChartPropsDataLabel
{
dataLabelColor = "696969",
dataLabelFontFace = "Arial",
dataLabelFontSize = 11,
dataLabelPosition = DataLabelPosition.outEnd,
dataLabelFormatCode = "#.0",
},
showValue = true,
axisCat = new ChartPropsAxisCat
{
catAxisHidden = true,
catGridLine = new OptsChartGridLine { style = GridLineStyle.none }
},
axisVal = new ChartPropsAxisVal {
valAxisHidden = true,
valAxisDisplayUnitLabel = true,
valGridLine = new OptsChartGridLine { style = GridLineStyle.none },
},
showLegend = true,
legendProps = LegendPosition.b,
showTitle = false
};
slide.addBarChart(arrDataRegions, optsChartBar2);
// BOTTOM-LEFT: Horizontal bar with title and legend
var optsChartBar3 = new BarChartOpts
{
// position = new PositionProps(0.5, 3.8, 6.0, 3.5),
x = 0.5,
y = 3.8,
w = 6,
h = 3.5,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
plotArea = new ChartPropsFillLine
{
border = new BorderProps("CF0909", null, 3),
fill = "F1C1C1"
},
barDir = BarDirection.bar,
barOverlapPct = -50,
axisCat = new ChartPropsAxisCat
{
catAxisLabelColor = "CC0000",
catAxisLabelFontFace = "Helvetica Neue",
catAxisLabelFontSize = 10,
catAxisOrientation = "maxMin",
catAxisTitle = "Housing Type",
catAxisTitleColor = "696969",
catAxisTitleFontSize = 10,
showCatAxisTitle = true,
catGridLine = new OptsChartGridLine { color = "cc6699", style = GridLineStyle.dash, size = 1 },
},
axisVal = new ChartPropsAxisVal
{
valGridLine = new OptsChartGridLine { style = GridLineStyle.none },
valAxisOrientation = "maxMin",
valAxisHidden = true,
valAxisDisplayUnitLabel = true,
},
titleProps = new ChartPropsTitle
{
titleColor = "33CF22",
titleFontFace = "Helvetica Neue",
titleFontSize = 16,
title = "Sales by Region"
},
showTitle = true,
};
slide.addBarChart(arrDataHighVals, optsChartBar3);
// BOTTOM-RIGHT: Vertical column with title and legend
var optsChartBar4 = new BarChartOpts
{
// position = new PositionProps(7.0, 3.8, 6.0, 3.5),
x = 7,
y = 3.8,
w = 6,
h = 3.5,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
plotArea = new ChartPropsFillLine { fill = "FFFFFF" },
barDir = BarDirection.col,
barGapWidthPct = 25,
chartColors = new List { "0088CC", "99FFCC" },
chartColorsOpacity = 50,
axisVal = new ChartPropsAxisVal
{
valAxisMinVal = 1000,
valAxisMaxVal = 5000,
valAxisHidden = true,
},
axisCat = new ChartPropsAxisCat
{
catAxisLabelColor = "0000CC",
catAxisLabelFontFace = "Times",
catAxisLabelFontSize = 11,
catAxisLabelFrequency = "1",
catAxisOrientation = "minMax",
catAxisTitle = "Housing Type",
showCatAxisTitle = true,
},
dataBorder = new BorderProps("F1F1F1", null, 1),
dataLabel = new ChartPropsDataLabel
{
dataLabelColor = "696969",
dataLabelFontFace = "Arial",
dataLabelFontSize = 10,
dataLabelPosition = DataLabelPosition.inEnd,
},
showValue = true,
showLegend = false,
showTitle = false
};
slide.addBarChart(arrDataHighVals, optsChartBar4);
}
///
/// SLIDE 4: Bar Chart: Stacked
///
///
public static void genSlide04_BarChart(PptxGen pptx)
{
var slide = pptx.addSlide(new AddSlideProps { sectionTitle = "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
slide.addTable(new List {
new TableRow {
new TableCell{ text = "Chart Examples: Bar Chart: Stacked/PercentStacked and DataTable", options = Constants.BASE_TEXT_OPTS_L },
Constants.BASE_TEXT_OPTS_R
}
},
Constants.BASE_TABLE_OPTS
);
var arrDataRegions = new List {
new OptsChartData{
name = "Region 3",
labels = new List> { new List { "April", "May", "June", "July", "August" } },
values = new List { 17, 26, 53, 100, 75 }
},
new OptsChartData{
name = "Region 4",
labels = new List> { new List { "April", "May", "June", "July", "August" }},
values = new List { 55, 43, 70, 90, 80 }
}
};
// TOP-LEFT: Horizontal stacked bar
var optsChartBar1 = new BarChartOpts
{
//position = new PositionProps(0.5, 0.6, 6.0, 3.0),
x = 0.5,
y = 0.6,
w = 6,
h = 3,
chartArea = new ChartAreaProps { fill = "404040" },
plotArea = new ChartPropsFillLine { fill = "0d0d0d" },
barDir = BarDirection.bar,
barGrouping = ChartBarGrouping.stacked,
chartColors = new List { "F2AF00", "4472C4" },
axisCat = new ChartPropsAxisCat
{
catAxisOrientation = "maxMin",
catAxisLabelColor = "4472C4",
catAxisLabelFontFace = "Helvetica Neue",
catAxisLabelFontSize = 14,
},
axisVal = new ChartPropsAxisVal {
valAxisLabelColor = "F2AF00",
valAxisLabelFontFace = "Helvetica Neue",
valAxisLabelFontSize = 14,
},
dataLabel = new ChartPropsDataLabel
{
dataLabelColor = "FFFFFF"
},
showValue = true
};
slide.addBarChart(arrDataRegions, optsChartBar1);
// TOP-RIGHT: Vertical stacked column
var optsChartBar2 = new BarChartOpts
{
// position = new PositionProps(7.0, 0.6, 6.0, 3.0),
x = 7,
y = 0.6,
w = 6,
h = 3,
chartArea = new ChartAreaProps { fill = "0d0d0d" },
plotArea = new ChartPropsFillLine { fill = "4d4d4d" },
chartColors = Constants.COLORS_VIVID,
axisCat = new ChartPropsAxisCat
{
catAxisLabelColor = "F1F1F1",
catAxisLabelFontFace = "Courier",
catAxisLabelFontSize = 12,
catAxisOrientation = "minMax",
},
axisVal = new ChartPropsAxisVal
{
valGridLine = new OptsChartGridLine { color = "141414" },
valAxisLabelColor = "F1F1F1",
},
dataLabel = new ChartPropsDataLabel
{
dataLabelColor = "F1F1F1",
dataLabelFontFace = "Arial",
dataLabelFontSize = 12,
dataLabelFontBold = true,
},
barDir = BarDirection.col,
barGrouping = ChartBarGrouping.stacked,
showValue = true,
showLegend = false,
showTitle = false
};
slide.addBarChart(Constants.dataChartBar3Series, optsChartBar2);
// BOTTOM-LEFT: Horizontal 100% stacked bar with data table
var optsChartBar3 = new BarChartOpts
{
// position = new PositionProps(0.5, 3.8, 6.0, 3.5),
x = 0.5,
y = 3.8,
w = 6,
h = 3.5,
barDir = BarDirection.bar,
barGrouping = ChartBarGrouping.percentStacked,
chartColors = new List { "F2AF00", "4472C4" },
dataBorder = new BorderProps("F1F1F1", null, 1),
axisCat = new ChartPropsAxisCat
{
catAxisHidden = true,
},
axisVal = new ChartPropsAxisVal
{
valAxisHidden = true,
valGridLine = new OptsChartGridLine { style = GridLineStyle.none },
},
showTitle = false,
layout = new PositionProps { x = 0.1, y = 0.1, w = 1, h = 1 },
dataTableProps = new ChartPropsDataTable
{
showDataTable = true,
showDataTableKeys = true,
showDataTableHorzBorder = false,
showDataTableVertBorder = false,
showDataTableOutline = false,
dataTableFontSize = 10
}
};
slide.addBarChart(arrDataRegions, optsChartBar3);
// BOTTOM-RIGHT: Vertical 100% stacked column with data table
var optsChartBar4 = new BarChartOpts
{
// position = new PositionProps(7.0, 3.8, 6.0, 3.5),
x = 7,
y = 3.8,
w = 6,
h = 3.5,
chartArea = new ChartAreaProps { fill = "f1f1f1" },
plotArea = new ChartPropsFillLine { fill = "ffffff" },
chartColors = Constants.COLORS_VIVID,
barDir = BarDirection.col,
barGrouping = ChartBarGrouping.percentStacked,
axisCat = new ChartPropsAxisCat
{
catAxisLabelFontFace = "Times",
catAxisLabelFontSize = 12,
catAxisOrientation = "minMax",
},
showLegend = true,
legendProps = LegendPosition.t,
dataTableProps = new ChartPropsDataTable
{
showDataTable = true,
showDataTableKeys = false,
dataTableFormatCode = "$#"
},
};
slide.addBarChart(Constants.dataChartBar3Series, optsChartBar4);
}
///
/// SLIDE 5: Bar Chart: Data Series Colors, majorUnits, and valAxisLabelFormatCode
///
///
public static void genSlide05_BarChart(PptxGen pptx)
{
var slide = pptx.addSlide(new AddSlideProps { sectionTitle = "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
slide.addTable(new List {
new TableRow{
new TableCell {
text = "Chart Examples: Multi-Color Bars, `catLabelFormatCode`, `valAxisDisplayUnit`, `valAxisMajorUnit`, `valAxisLabelFormatCode`",
options = Constants.BASE_TEXT_OPTS_L
},
Constants.BASE_TEXT_OPTS_R
}
},
Constants.BASE_TABLE_OPTS
);
// TOP-LEFT: Multi-color bars with date formatting
slide.addBarChart(
new List {
new OptsChartData{
name = "Excel Date Values",
labels = new List> { new List { "37987", "38018", "38047", "38078", "38108", "38139" } },
values = new List { 20, 30, 10, 25, 15, 5 }
}
},
new BarChartOpts
{
// position = new PositionProps(0.5, 0.6, "45%", 3.0),
x = 0.5,
y = 0.6,
w = "45%",
h = 3,
chartArea = new ChartAreaProps { fill = "404040" },
barDir = BarDirection.bar,
chartColors = new List { "0077BF", "4E9D2D", "ECAA00", "5FC4E3", "DE4216", "154384" },
axisCat = new ChartPropsAxisCat
{
catAxisLabelColor = "F1F1F1",
catLabelFormatCode = "yyyy-mm",
},
axisVal = new ChartPropsAxisVal
{
valAxisHidden = true
},
showTitle = true,
titleProps = new ChartPropsTitle
{
title = "Categories can be Multi-Color",
titleColor = "0088CC",
titleFontSize = 14
}
}
);
// TOP-RIGHT: Multi-color bars with percentage formatting
slide.addBarChart(
new List{
new OptsChartData{
name = "Too Many Colors Series",
labels = new List> { new List { "37987", "38018", "38047", "38078", "38108", "38139" } },
values = new List { 0.2, 0.3, 0.1, 0.25, 0.15, 0.05 }
}
},
new BarChartOpts
{
// position = new PositionProps(7, 0.6, "45%", 3),
x =7,
y = 0.6,
w = "45%",
h = 3,
chartArea = new ChartAreaProps { fill = "404040" },
axisCat = new ChartPropsAxisCat
{
catAxisLabelColor = "F1F1F1",
catAxisLineShow = false,
catLabelFormatCode = "mmm-yy"
},
axisVal = new ChartPropsAxisVal
{
valAxisLabelColor = "F1F1F1",
valAxisLineColor = "7F7F7F",
valGridLine = new OptsChartGridLine { color = "7F7F7F" },
valAxisMaxVal = 1,
valAxisLabelFormatCode = "#%",
valAxisMajorUnit = 0.2
},
barDir = BarDirection.bar,
showValue = true,
dataLabel = new ChartPropsDataLabel
{
dataLabelColor = "B7B7B7",
dataLabelPosition = DataLabelPosition.outEnd,
dataLabelFormatCode = "#%"
},
chartColors = new List { "0077BF", "4E9D2D", "ECAA00", "5FC4E3", "DE4216", "154384", "7D666A", "A3C961", "EF907B", "9BA0A3" },
barGapWidthPct = 25
}
);
// BOTTOM-LEFT: Two color series with negative values
slide.addBarChart(
new List {
new OptsChartData{
name = "Two Color Series",
labels = new List> { new List { "Jan", "Feb", "Mar", "Apr", "May", "Jun" } },
values = new List { 0.2, -0.3, -0.1, 0.25, 0.15, 0.05 }
}
},
new BarChartOpts
{
// position = new PositionProps(0.5, 4.0, "45%", 3),
x = 0.5,
y = 4,
w = "45%",
h = 3,
chartArea = new ChartAreaProps { fill = "404040" },
plotArea = new ChartPropsFillLine { fill = "202020" },
axisCat = new ChartPropsAxisCat
{
catAxisLabelColor = "F1F1F1"
},
axisVal = new ChartPropsAxisVal
{
valAxisLabelColor = "F1F1F1",
valAxisLineColor = "7F7F7F",
valGridLine = new OptsChartGridLine { color = "7F7F7F" },
valAxisHidden = true,
valAxisLabelFormatCode = "0.#0",
valAxisMaxVal = 0.4,
},
dataLabel = new ChartPropsDataLabel
{
dataLabelColor = "B7B7B7",
dataLabelPosition = DataLabelPosition.outEnd,
dataLabelFormatCode = "#%",
},
barDir = BarDirection.col,
showValue = true,
chartColors = new List { "0077BF", "4E9D2D", "ECAA00", "5FC4E3", "DE4216", "154384", "7D666A", "A3C961", "EF907B", "9BA0A3" },
barGapWidthPct = 50,
showLegend = true,
legendProps = new ChartPropsLegend
{
legendPos = LegendPosition.r,
legendColor = "F1F1F1"
}
}
);
// BOTTOM-RIGHT: EV vs ICE comparison
slide.addBarChart(
new List {
new OptsChartData{
name = "EV",
labels = new List> { new List { "Jan", "Feb", "Mar", "Apr", "May", "Jun" } },
values = new List { 102, 103, 121, 125, 135, 155 }
},
new OptsChartData{
name = "ICE",
labels = new List> { new List { "Jan", "Feb", "Mar", "Apr", "May", "Jun" } },
values = new List { 150, 153, 151, 125, 115, 105 }
}
},
new BarChartOpts
{
// position = new PositionProps(7, 4, "45%", 3),
x = 7,
y = 4,
w = "45%",
h = 3,
chartArea = new ChartAreaProps { fill = "202020" },
barDir = BarDirection.bar,
axisCat = new ChartPropsAxisCat
{
catAxisLabelColor = "F1F1F1",
catAxisOrientation = "maxMin",
},
axisVal = new ChartPropsAxisVal
{
valAxisLabelColor = "F1F1F1",
valAxisLineColor = "7F7F7F",
valGridLine = new OptsChartGridLine { color = "7F7F7F" },
valAxisMaxVal = 200,
valAxisMajorUnit = 25,
valAxisOrientation = "maxMin",
},
dataLabel = new ChartPropsDataLabel
{
dataLabelColor = "B7B7B7"
},
chartColorsOpacity = 75,
chartColors = new List { "0077BF", "4E9D2D", "ECAA00", "5FC4E3", "DE4216", "154384", "7D666A", "A3C961", "EF907B", "9BA0A3" },
barGapWidthPct = 25,
}
);
}
///
/// SLIDE 6: 3D Bar Chart
///
///
public static void genSlide06_Bat3dChart(PptxGen pptx)
{
var slide = pptx.addSlide(new AddSlideProps { sectionTitle = "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
slide.addTable(new List {
new TableRow {
new TableCell { text = "Chart Examples: 3D Bar Chart", options = Constants.BASE_TEXT_OPTS_L },
Constants.BASE_TEXT_OPTS_R
}
}, Constants.BASE_TABLE_OPTS);
var arrDataRegions = new List {
new OptsChartData{
name = "Region 1",
labels = new List> { new List { "Q1", "Q2", "Q3", "Q4" } },
values = new List { 26, 53, 80, 75 }
},
new OptsChartData{
name = "Region 2",
labels = new List> { new List { "Q1", "Q2", "Q3", "Q4" }},
values = new List { 43.5, 70.3, 90.01, 80.05 }
}
};
// TOP-LEFT: Horizontal 3D bar
var optsChartBar1 = new Bar3dChartOpts
{
// position = new PositionProps(0.5, 0.6, 6.0, 3.0),
x = 0.5,
y = 0.6,
w = 6.0,
h = 3,
chartArea = new ChartAreaProps { fill = new ShapeFillProps("F1F1F1", 50) },
barDir = BarDirection.bar,
barGapWidthPct = 25,
chartColors = Constants.COLORS_SPECTRUM,
chartColorsOpacity = 80,
v3DRotX = 20,
v3DRotY = 10,
v3DRAngAx = false,
axisCat = new ChartPropsAxisCat
{
catAxisLabelColor = Constants.COLORS_SPECTRUM[1],
catAxisLineColor = Constants.COLORS_SPECTRUM[1],
catAxisLabelFontFace = "Arial",
catAxisLabelFontSize = 10,
catAxisOrientation = "maxMin",
},
axisVal = new ChartPropsAxisVal
{
valAxisLabelColor = Constants.COLORS_SPECTRUM[0],
valAxisLineColor = Constants.COLORS_SPECTRUM[0],
valAxisLabelFontSize = 10
},
axisSer = new ChartPropsAxisSer
{
serAxisLabelFontFace = "Arial",
serAxisLabelFontSize = 10,
serAxisLabelColor = Constants.COLORS_SPECTRUM[1],
serAxisLineColor = Constants.COLORS_SPECTRUM[1],
}
};
slide.addBar3dChart(arrDataRegions, optsChartBar1);
// TOP-RIGHT: Vertical 3D column
var optsChartBar2 = new Bar3dChartOpts
{
// position = new PositionProps(7.0, 0.6, 6.0, 3.0),
x = 7.0,
y = 0.6,
w = 6.0,
h = 3,
chartArea = new ChartAreaProps { fill = new ShapeFillProps("F1F1F1", 50) },
chartColors = Constants.COLORS_SPECTRUM,
barDir = BarDirection.col,
bar3DShape = ChartBar3DShape.cylinder,
v3DRotX = 10,
v3DRotY = 20,
v3DRAngAx = false,
axisCat = new ChartPropsAxisCat
{
catAxisLabelColor = "0000CC",
catAxisLabelFontFace = "Courier",
catAxisLabelFontSize = 12,
},
dataLabel = new ChartPropsDataLabel
{
dataLabelColor = "000000",
dataLabelFontFace = "Arial",
dataLabelFontSize = 11,
dataLabelPosition = DataLabelPosition.outEnd,
dataLabelFormatCode = "#.0",
dataLabelBkgrdColors = true,
},
showValue = true
};
slide.addBar3dChart(arrDataRegions, optsChartBar2);
// BOTTOM-LEFT: Stacked 3D pyramid
var optsChartBar3 = new Bar3dChartOpts
{
// position = new PositionProps(0.5, 3.8, 6.0, 3.5),
x = 0.5,
y = 3.8,
w = 6.0,
h = 3.5,
chartArea = new ChartAreaProps { fill = new ShapeFillProps("F1F1F1", 50) },
chartColors = Constants.COLORS_ACCENT,
barDir = BarDirection.col,
bar3DShape = ChartBar3DShape.pyramid, // "pyramid",
barGrouping = ChartBarGrouping.stacked,
v3DRAngAx = true,
axisCat = new ChartPropsAxisCat
{
catAxisLabelFontFace = "Arial",
catAxisLabelFontSize = 10,
},
showValue = true,
dataLabel = new ChartPropsDataLabel
{
dataLabelBkgrdColors = true,
},
showTitle = true,
titleProps = new ChartPropsTitle
{
title = "Sales by Region",
titleFontFace = "Helvetica Neue Thin",
titleFontSize = 18,
titleColor = Constants.COLORS_ACCENT[0]
}
};
slide.addBar3dChart(arrDataRegions, optsChartBar3);
// BOTTOM-RIGHT: 3D cone chart
var optsChartBar4 = new Bar3dChartOpts
{
// position = new PositionProps(7.0, 3.8, 6.0, 3.5),
x = 7,
y = 3.8,
w = 6.0,
h = 3.5,
chartArea = new ChartAreaProps { fill = new ShapeFillProps("F1F1F1", 50) },
chartColors = Constants.COLORS_ACCENT,
barDir = BarDirection.col,
bar3DShape = ChartBar3DShape.coneToMax, // "coneToMax",
v3DRAngAx = true,
axisCat = new ChartPropsAxisCat
{
catAxisLabelColor = Constants.COLORS_ACCENT[0],
catAxisLabelFontSize = 11,
catAxisOrientation = "minMax",
},
axisSer = new ChartPropsAxisSer
{
serAxisLabelFontFace = "Helvetica Neue Thin",
serAxisLabelColor = Constants.COLORS_ACCENT[0],
},
dataBorder = new BorderProps("F1F1F1", null, 1),
dataLabel = new ChartPropsDataLabel
{
dataLabelColor = "696969",
dataLabelFontFace = "Arial",
dataLabelFontSize = 10,
dataLabelPosition = DataLabelPosition.ctr
}
};
slide.addBar3dChart(arrDataRegions, optsChartBar4);
}
///
///SLIDE 7: Tornado Chart
///
///
public static void genSlide07_BarChart(PptxGen pptx)
{
var slide = pptx.addSlide(new AddSlideProps { sectionTitle = "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
slide.addTable(new List {
new TableRow {
new TableCell { text = "Tornado Chart - Grid and Axis Formatting", options = Constants.BASE_TEXT_OPTS_L },
Constants.BASE_TEXT_OPTS_R
}
}, Constants.BASE_TABLE_OPTS);
slide.addBarChart(
new List {
new OptsChartData{
name = "High",
labels = new List> { new List { "London", "Munich", "Tokyo" } },
values = new List { 0.2, 0.32, 0.41 }
},
new OptsChartData{
name = "Low",
labels = new List> { new List { "London", "Munich", "Tokyo" } },
values = new List { -0.11, -0.22, -0.29 }
}
},
new BarChartOpts
{
// position = new PositionProps(0.5, 0.5, "90%", "90%"),
x = 0.5,
y = 0.5,
w = "90%",
h = "90%",
chartArea = new ChartAreaProps { fill = new ShapeFillProps("F1F1F1", 50) },
axisVal = new ChartPropsAxisVal
{
valAxisMaxVal = 1,
valAxisLineShow = false,
valGridLine = new OptsChartGridLine { color = "D8D8D8", style = GridLineStyle.dash, size = 1, cap = ChartLineCap.square },
valAxisMajorUnit = 0.2
},
axisCat = new ChartPropsAxisCat
{
catAxisLineShow = false,
catAxisLabelPos = CatAxisLabelPos.low,
catGridLine = new OptsChartGridLine { color = "D8D8D8", style = GridLineStyle.dash, size = 1, cap = ChartLineCap.round },
},
barDir = BarDirection.bar,
// axisLabelFormatCode = "#%",
barGrouping = ChartBarGrouping.stacked,
// valueBarColors = true,
shadow = new ShadowProps { type = ShadowType.none },
chartColors = new List { "0077BF", "4E9D2D", "ECAA00", "5FC4E3", "DE4216", "154384", "7D666A", "A3C961", "EF907B", "9BA0A3" },
invertedColors = new List { "0065A2", "428526", "C99100", "51A7C1", "BD3813", "123970", "6A575A", "8BAB52", "CB7A69", "84888B" },
barGapWidthPct = 25,
}
);
}
///
/// SLIDE 8: line Chart
///
///
public static void genSlide08_LineChart(PptxGen pptx)
{
var slide = pptx.addSlide(new AddSlideProps { sectionTitle = "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
slide.addTable(new List {
new TableRow {
new TableCell { text = "Chart Examples: Line Chart", options = Constants.BASE_TEXT_OPTS_L },
Constants.BASE_TEXT_OPTS_R
}
}, Constants.BASE_TABLE_OPTS);
slide.addText($"({Constants.CHART_DATA.Fedi_MAU.sourceUrl})", Constants.FOOTER_TEXT_OPTS);
// FULL SLIDE:
var OPTS_CHART = new LineChartOpts
{
// position = new PositionProps(0.5, 0.6, "95%", "85%"),
x = 0.5,
y = 0.6,
w = "95%",
h = "85%",
plotArea = new ChartPropsFillLine { fill = "e3e3e3" },
//
showLegend = true,
legendProps = new ChartPropsLegend
{
legendPos = LegendPosition.r,
},
//
axisCat = new ChartPropsAxisCat
{
catAxisLabelRotate = 90,
},
axisVal = new ChartPropsAxisVal
{
valAxisLabelFormatCode = "#,##0",
},
//
lineSize = 4,
lineDataSymbolSize = 10,
lineDataSymbolLineColor = "4472C4",
lineDataSymbolLineSize = 3,
//lineDataSymbolLineColor= "7ab800",
//chartColors= COLORS_RYGU,
chartColors = [COLOR_GRN],
//lineDataSymbol= "none",
//
showTitle = true,
titleProps = new ChartPropsTitle
{
title = CHART_DATA.Fedi_MAU.chartTitle,
titleColor = "0088CC",
titleFontFace = "Arial",
titleFontSize = 18
}
};
slide.addLineChart(Constants.CHART_DATA.Fedi_MAU.chartData, OPTS_CHART);
}
///
/// SLIDE 9: line Chart: line Smoothing, line Size, Symbol Size
///
///
public static void genSlide09_LineChart(PptxGen pptx)
{
var slide = pptx.addSlide(new AddSlideProps { sectionTitle = "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
slide.addTable(new List {
new TableRow {
new TableCell { text = "Chart Examples: Line Smoothing, Line Size, Line Shadow, Symbol Size", options = Constants.BASE_TEXT_OPTS_L },
Constants.BASE_TEXT_OPTS_R
}
},
Constants.BASE_TABLE_OPTS
);
// Top-left: Smooth line with thick line size
var optsChartLine1 = new LineChartOpts
{
// position = new PositionProps(0.5, 0.6, 6.0, 3.0),
x = 0.5,
y = 0.6,
w = 6,
h = 3,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
chartColors = Constants.COLORS_RYGU,
lineSize = 8,
lineSmooth = true,
showLegend = true,
legendProps = new ChartPropsLegend
{
legendPos = LegendPosition.t
},
axisCat = new ChartPropsAxisCat { catAxisLabelPos = CatAxisLabelPos.high }
};
slide.addLineChart(Constants.arrDataLineStat, optsChartLine1);
// Top-right: Even thicker smooth line
var optsChartLine2 = new LineChartOpts
{
// position = new PositionProps(7, 0.6, 6.0, 3.0),
x = 7,
y = 0.6,
w = 6,
h = 3,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
chartColors = Constants.COLORS_RYGU,
lineSize = 16,
lineSmooth = true,
showLegend = true,
legendProps = new ChartPropsLegend
{
legendPos = LegendPosition.r
},
};
slide.addLineChart(Constants.arrDataLineStat, optsChartLine2);
// Bottom-left: Medium symbol size with no shadow
var optsChartLine3 = new LineChartOpts
{
// position = new PositionProps(0.5, 4.0, 6.0, 3.0),
x = 0.5,
y = 4,
w = 6,
h = 3,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
chartColors = Constants.COLORS_RYGU,
lineDataSymbolSize = 10,
shadow = new ShadowProps { type = ShadowType.none },
showLegend = true,
legendProps = new ChartPropsLegend
{
legendPos = LegendPosition.l
},
};
slide.addLineChart(Constants.arrDataLineStat, optsChartLine3);
// Bottom-right: Large symbols with custom shadow
var shadowOpts = new ShadowProps
{
type = ShadowType.outer,
color = "cd0011",
blur = 3,
offset = 12,
angle = 75,
opacity = 0.8
};
var optsChartLine4 = new LineChartOpts
{
// position = new PositionProps(7, 4.0, 6.0, 3.0),
x = 7,
y = 4,
w = 6,
h = 3,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
chartColors = Constants.COLORS_RYGU,
lineDataSymbolSize = 20,
shadow = shadowOpts,
showLegend = true,
legendProps = new ChartPropsLegend
{
legendPos = LegendPosition.b
},
};
slide.addLineChart(Constants.arrDataLineStat, optsChartLine4);
}
///
/// SLIDE 10: line Chart: `lineDataSymbol` and `lineDataSymbolSize`
///
///
public static void genSlide10_LineChart(PptxGen pptx)
{
const double intWgap = 4.25;
var opts_lineDataSymbol = new List { "circle", "dash", LineDataSymbolType.diamond.ToString().ToLower(), "dot", "none",
LineDataSymbolType.square.ToString().ToLower(), "triangle" };
var slide = pptx.addSlide(new AddSlideProps { sectionTitle = "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
slide.addTable(new List {
new TableRow {
new TableCell { text = "Chart Examples: Line Chart: lineDataSymbol options", options = Constants.BASE_TEXT_OPTS_L },
Constants.BASE_TEXT_OPTS_R
}
}, Constants.BASE_TABLE_OPTS);
for (int idx = 0; idx < opts_lineDataSymbol.Count; idx++)
{
var opt = opts_lineDataSymbol[idx];
slide.addLineChart(Constants.arrDataLineStat, new LineChartOpts
{
// position = new PositionProps(
x = (idx < 3 ? idx * intWgap : idx < 6 ? (idx - 3) * intWgap : (idx - 6) * intWgap) + 0.3,
y = idx < 3 ? 0.5 : idx < 6 ? 2.85 : 5.1,
w = 4.25,
h = 2.25,
lineCap = ChartLineCap.round,
lineDataSymbol = Enum.Parse(opt, true),
lineDataSymbolSize = idx == 5 ? 9 : idx == 6 ? 12 : null,
chartColors = Constants.COLORS_VIVID,
titleProps = new ChartPropsTitle { title = opt },
showTitle = true
});
}
}
///
/// SLIDE 11: Area Chart
///
///
public static void genSlide11_AreaChart(PptxGen pptx)
{
var slide = pptx.addSlide(new AddSlideProps { sectionTitle = "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
slide.addTable(new List {
new TableRow {
new TableCell { text = "Chart Examples: Area Chart, Stacked Area Chart", options = Constants.BASE_TEXT_OPTS_L },
Constants.BASE_TEXT_OPTS_R
}
}, Constants.BASE_TABLE_OPTS);
var arrDataAreaSm = new List {
new OptsChartData{
name = "Small Samples",
labels = new List> { new List { "Q1", "Q2", "Q3", "Q4" } },
values = new List { 15, 46, 31, 85 }
}
};
var arrDataTimeline2ser = new List {
new OptsChartData{
name = "Actual Sales",
labels = Constants.MONS,
values = new List { 1500, 4600, 5156, 3167, 8510, 8009, 6006, 7855, 12102, 12789, 10123, 15121 }
},
new OptsChartData {
name = "Proj Sales",
labels = Constants.MONS,
values = new List { 1000, 2600, 3456, 4567, 5010, 6009, 7006, 8855, 9102, 10789, 11123, 12121 }
}
};
// TOP-LEFT: Basic area chart
var optsChartLine1 = new AreaChartOpts
{
// position = new PositionProps(0.5, 0.6, "45%", 3.0),
x = 0.5,
y = 0.6,
w = "45%",
h = 3.0,
chartArea = new ChartAreaProps { fill = "e9e9e9" },
plotArea = new ChartPropsFillLine { fill = "f2f9fc" },
// chartColors = Constants.COLORS_VIVID,
dataBorder = new BorderProps("F1F1F1", null, 1),
showTitle = true,
titleProps = new ChartPropsTitle
{
title = Constants.CHART_DATA.CeoPayRatio_Comp.chartTitle,
titleFontSize = 11,
titleColor = "fc0000",
},
axisVal = new ChartPropsAxisVal
{
valAxisLabelFormatCode = "#-1",
valAxisLabelFontSize = 10,
valAxisLabelColor = "494949",
},
axisCat = new ChartPropsAxisCat
{
catAxisLabelFontSize = 10,
catAxisLabelColor = "494949",
catAxisLabelRotate = 45,
},
chartColors = new List { "EF423E" },
chartColorsOpacity = 25
};
slide.addAreaChart(Constants.CHART_DATA.CeoPayRatio_Comp.chartData, optsChartLine1);
// TOP-RIGHT: Stacked area chart
var optsChartLine2 = new AreaChartOpts
{
// position = new PositionProps(7, 0.6, "45%", 3),
x = 7,
y = 0.6,
w = "45%",
h = 3.0,
plotArea = new ChartPropsFillLine { fill = "D1E1F1" },
chartColors = new List { "0088CC", "99FFCC" },
chartColorsOpacity = 25,
axisVal = new ChartPropsAxisVal { valAxisLabelRotate = 5 },
dataBorder = new BorderProps("FFFFFF", null, 2),
showValue = false,
barGrouping = ChartBarGrouping.stacked
};
slide.addAreaChart(arrDataTimeline2ser, optsChartLine2);
// BOTTOM-LEFT: Semi-transparent area chart
var optsChartLine3 = new AreaChartOpts
{
// position = new PositionProps(0.5, 4.0, "45%", 3),
x = 0.5,
y =4.0,
w = "45%",
h = 3.0,
chartColors = new List { "0088CC", "99FFCC" },
chartColorsOpacity = 50,
axisVal = new ChartPropsAxisVal
{
valAxisLabelFormatCode = "#,K"
}
};
slide.addAreaChart(arrDataTimeline2ser, optsChartLine3);
// BOTTOM-RIGHT: More opaque area chart
var optsChartLine4 = new AreaChartOpts
{
// position = new PositionProps(7, 4.0, "45%", 3),
x = 7,
y = 4.0,
w = "45%",
h = 3.0,
chartColors = new List { "CC8833", "CCFF69" },
chartColorsOpacity = 75
};
slide.addAreaChart(arrDataTimeline2ser, optsChartLine4);
}
///
/// SLIDE 12: Pie Chart
///
///
public static void genSlide12_PieChart(PptxGen pptx)
{
// 创建幻灯片
var slide = pptx.addSlide(new AddSlideProps { sectionTitle = "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
slide.addTable(new List {
new TableRow {
new TableCell { text = "Chart Examples: Pie Charts: Legends", options = Constants.BASE_TEXT_OPTS_L },
Constants.BASE_TEXT_OPTS_R
}
}, Constants.BASE_TABLE_OPTS);
slide.addPieChart(Constants.dataChartPieStat, new PieChartOpts
{
// position = new PositionProps(0.5, 0.6, 4.0, 3.2),
x = 0.5,
y = 0.6,
w = 4.0,
h = 3.2,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
chartColors = Constants.COLORS_RYGU,
dataBorder = new BorderProps("F1F1F1", null, 2),
legendProps = new ChartPropsLegend
{
//
legendPos = LegendPosition.l,
legendFontFace = "Courier New",
},
showLegend = true,
//
showLeaderLines = true,
showPercent = false,
showValue = true,
dataLabel = new ChartPropsDataLabel
{
dataLabelColor = "FFFFFF",
dataLabelFontSize = 14,
dataLabelPosition = DataLabelPosition.bestFit // "bestFit", // 'bestFit' | 'outEnd' | 'inEnd' | 'ctr'
}
});
// TOP-MIDDLE
slide.addPieChart(Constants.dataChartPieStat, new PieChartOpts
{
// position = new PositionProps(4.67, 0.6, 4.0, 3.2),
x = 4.67,
y = 0.6,
w = 4.0,
h = 3.2,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
chartColors = Constants.COLORS_SPECTRUM,
dataBorder = new BorderProps("404040", null, 1),
dataLabel = new ChartPropsDataLabel { dataLabelColor = "f2f9fc" },
showPercent = true,
showLegend = true,
legendProps = new ChartPropsLegend
{
legendPos = LegendPosition.t
},
});
// TOP-RIGHT (DEMO = `legendFontSize`, `titleAlign`, `titlePos`)
slide.addPieChart(Constants.dataChartPieLocs, new PieChartOpts
{
// position = new PositionProps(8.83, 0.6, 4.0, 3.2),
x = 8.83,
y = 0.6,
w = 4.0,
h = 3.2,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
chartColors = Constants.COLORS_SPECTRUM,
dataBorder = new BorderProps("F1F1F1", null, 1),
showLegend = true,
showPercent = true,
legendProps = new ChartPropsLegend
{
legendPos = LegendPosition.t, // "t",
legendFontSize = 14,
},
showLeaderLines = true,
showTitle = true,
titleProps = new ChartPropsTitle
{
title = "Title Position {0,0}",
titleAlign = TitleHalign.r,
titlePos = new PositionXY { x = 0, y = 0 },
}
});
// BTM-LEFT
slide.addPieChart(Constants.dataChartPieLocs, new PieChartOpts
{
// position = new PositionProps(0.5, 4.0, 4.0, 3.2),
x = 0.5,
y = 4.0,
w = 4.0,
h = 3.2,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
chartColors = Constants.COLORS_CHART,
dataBorder = new BorderProps("F1F1F1", null, 1),
//
showValue = true,
showLabel = true,
showPercent = true,
dataLabel = new ChartPropsDataLabel
{
//
dataLabelColor = "F1F1F1",
dataLabelFontSize = 10,
}
});
// BTM-MIDDLE
slide.addPieChart(Constants.dataChartPieLocs, new PieChartOpts
{
// position = new PositionProps(4.67, 4.0, 4.0, 3.2),
x = 4.67,
y = 4.0,
w = 4.0,
h = 3.2,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
dataBorder = new BorderProps("F1F1F1", null, 1),
chartColors = Constants.COLORS_SPECTRUM,
dataLabel = new ChartPropsDataLabel
{
dataLabelColor = "F1F1F1",
},
showPercent = true,
showLegend = true,
legendProps = new ChartPropsLegend
{
legendPos = LegendPosition.b
}
});
// BOTH = BTM-RIGHT
slide.addPieChart(Constants.dataChartPieLocs, new PieChartOpts
{
// position = new PositionProps(8.83, 4.0, 4.0, 3.2),
x = 8.83,
y = 4.0,
w = 4.0,
h = 3.2,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
dataBorder = new BorderProps("F1F1F1", null, 1),
showPercent = true,
showLegend = true,
legendProps = new ChartPropsLegend
{
legendPos = LegendPosition.b,
},
showTitle = true,
titleProps = new ChartPropsTitle
{
title = "Title & Legend",
},
firstSliceAng = 90,
});
}
///
/// SLIDE 13: Doughnut Chart
///
///
public static void genSlide13_DoughnutChart(PptxGen pptx)
{
var slide = pptx.addSlide(new AddSlideProps { sectionTitle = "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
slide.addTable(new List {
new TableRow {
new TableCell { text = "Chart Examples: Doughnut Chart", options = Constants.BASE_TEXT_OPTS_L },
Constants.BASE_TEXT_OPTS_R
}
}, Constants.BASE_TABLE_OPTS);
var optsChartPie1 = new DoughnutChartOpts
{
// position = new PositionProps(0.5, 0.6, 6.0, 6.4),
x =0.5,
y = 0.6,
w = 6,
h = 6.4,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
holeSize = 70,
showLabel = false,
showValue = false,
showPercent = true,
showLegend = true,
legendProps = new ChartPropsLegend { legendPos = LegendPosition.b, } ,
//
chartColors = Constants.COLORS_RYGU,
dataBorder = new BorderProps("F1F1F1", null, 2),
dataLabel = new ChartPropsDataLabel
{
dataLabelColor = "FFFFFF",
dataLabelFontSize = 14,
},
//
showTitle = false,
titleProps = new ChartPropsTitle
{
title = "Project Status",
titleColor = "33CF22",
titleFontFace = "Helvetica Neue",
titleFontSize = 24,
}
};
slide.addDougnutChart(Constants.dataChartPieStat, optsChartPie1);
var optsChartPie2 = new DoughnutChartOpts
{
// position = new PositionProps(6.83, 0.6, 6.0, 6.4),
x = 6.83,
y = 0.6,
w = 6,
h = 6.4,
chartArea = new ChartAreaProps { fill = "404040" },
chartColors = Constants.COLORS_VIVID,
dataBorder = new BorderProps("F1F1F1", null, 1),
dataLabel = new ChartPropsDataLabel
{
dataLabelColor = "FFFFFF",
},
showLabel = true,
showValue = true,
showPercent = true,
//
showLegend = true,
legendProps = new ChartPropsLegend
{
legendPos = LegendPosition.b,
legendColor = "F1F1F1",
legendFontSize = 12,
},
//
showTitle = false,
titleProps = new ChartPropsTitle
{
title = "Resource Totals by Location",
},
shadow = new ShadowProps
{
type = ShadowType.inner,
offset = 20,
blur = 20,
},
};
slide.addDougnutChart(Constants.dataChartPieLocs, optsChartPie2);
}
///
/// SLIDE 14: XY Scatter Chart
///
///
public static void genSlide14_ScatterChart(PptxGen pptx)
{
var slide = pptx.addSlide(new AddSlideProps { sectionTitle = "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
slide.addTable(new List {
new TableRow {
new TableCell { text = "Chart Examples: XY Scatter Chart", options = Constants.BASE_TEXT_OPTS_L },
Constants.BASE_TEXT_OPTS_R
}
}, Constants.BASE_TABLE_OPTS);
var arrDataScatter1 = new List {
new OptsChartData{ name = "X-Axis", values = new List { 0, 1, 2, 3, 4, 5 } },
new OptsChartData{
name = "Y-Value 1",
values = new List { 90, 80, 70, 85, 75, 92 },
labels = new List> { new List { "Jan", "Feb", "Mar", "Apr", "May", "Jun" } }
},
new OptsChartData{
name = "Y-Value 2",
values = new List { 21, 32, 40, 49, 31, 29 },
labels = new List> { new List { "Jan", "Feb", "Mar", "Apr", "May", "Jun" } }
}
};
var arrDataScatter2 = new List {
new OptsChartData{ name = "X-Axis", values = new List { 1, 2, 3, 4, 5, 6 } },
new OptsChartData{ name = "Airplane", values = new List { 33, 20, 51, 65, 71, 75 } },
new OptsChartData{ name = "Train", values = new List { 99, 88, 77, 89, 99, 99 } },
new OptsChartData{ name = "Bus", values = new List { 21, 22, 25, 49, 59, 69 } }
};
var arrDataScatterLabels = new List {
new OptsChartData{ name = "X-Axis", values = new List { 1, 10, 20, 30, 40, 50 } },
new OptsChartData{
name = "Y-Value 1",
values = new List { 11, 23, 31, 45, 47, 35 },
labels = new List> { new List { "Red 1", "Red 2", "Red 3", "Red 4", "Red 5", "Red 6" } }
},
new OptsChartData{
name = "Y-Value 2",
values = new List { 21, 38, 47, 59, 51, 25 },
labels = new List> { new List { "Blue 1", "Blue 2", "Blue 3", "Blue 4", "Blue 5", "Blue 6" } }
}
};
// TOP-LEFT
var optsChartScat1 = new ScatterChartOpts
{
// position = new PositionProps(0.5, 0.6, "45%", 3),
x = 0.5,
y = 0.6,
w = "45%",
h = 3,
axisVal = new ChartPropsAxisVal {
valAxisTitle = "Renters",
valAxisTitleColor = "428442",
valAxisTitleFontSize = 14,
showValAxisTitle = true,
},
lineSize = 0,
axisCat = new ChartPropsAxisCat
{
catAxisTitle = "Last 6 Months",
catAxisTitleColor = "428442",
catAxisTitleFontSize = 14,
showCatAxisTitle = true,
},
showLabel = true,
dataLabel = new ChartPropsDataLabel
{
dataLabelPosition = DataLabelPosition.b
},
};
slide.addScatterChart(arrDataScatter1, optsChartScat1);
// TOP-RIGHT
var optsChartScat2 = new ScatterChartOpts
{
// position = new PositionProps(7.0, 0.6, "45%", 3),
x = 7,
y = 0.6,
w = "45%",
h = 3,
plotArea = new ChartPropsFillLine { fill = "F1F1F1" },
showLegend = true,
legendProps = LegendPosition.b,
lineSize = 8,
lineSmooth = true,
lineDataSymbolSize = 12,
lineDataSymbolLineColor = "FFFFFF",
chartColors = Constants.COLORS_RYGU,
chartColorsOpacity = 25
};
slide.addScatterChart(arrDataScatter2, optsChartScat2);
// BOTTOM-LEFT
var optsChartScat3 = new ScatterChartOpts
{
// position = new PositionProps(0.5, 4.0, "45%", 3),
x = 0.5,
y = 4,
w = "45%",
h = 3,
plotArea = new ChartPropsFillLine { fill = "F2F9FC" },
showLegend = true,
chartColors = new List { "FF0000", "0088CC" },
axisVal = new ChartPropsAxisVal
{
showValAxisTitle = false,
},
lineSize = 0,
axisCat = new ChartPropsAxisCat
{
catAxisTitle = "Data Point Labels",
catAxisTitleColor = "0088CC",
catAxisTitleFontSize = 14,
showCatAxisTitle = false,
},
showLabel = true,
dataLabel = new ChartPropsDataLabel
{
dataLabelPosition = DataLabelPosition.r,
dataLabelFormatScatter = ScatterDataLabelFormat.custom
}
};
slide.addScatterChart(arrDataScatterLabels, optsChartScat3);
// BOTTOM-RIGHT
var optsChartScat4 = new ScatterChartOpts
{
// position = new PositionProps(7.0, 4.0, "45%", 3),
x = 7,
y = 4,
w = "45%",
h = 3
};
slide.addScatterChart(arrDataScatter2, optsChartScat4);
}
///
/// SLIDE 15: Bubble Chart
///
///
public static void genSlide15_BubbleChart(PptxGen pptx)
{
var slide = pptx.addSlide(new AddSlideProps { sectionTitle = "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
slide.addTable(new List {
new TableRow {
new TableCell { text = "Chart Examples: Bubble Charts", options = Constants.BASE_TEXT_OPTS_L },
Constants.BASE_TEXT_OPTS_R
}
}, Constants.BASE_TABLE_OPTS);
var arrDataBubble1 = new List {
new OptsChartData{ name = "X-Axis", values = new List { 0.3, 0.6, 0.9, 1.2, 1.5, 1.7 } },
new OptsChartData{
name = "Y-Value 1",
values = new List { 1.3, 9, 7.5, 2.5, 7.5, 3 },
sizes = new List { 1, 4, 2, 3, 7, 4 }
},
new OptsChartData{
name = "Y-Value 2",
values = new List { 5.0, 3, 2.0, 7.0, 2.0, 9 },
sizes = new List { 9, 7, 9, 2, 4, 8 }
}
};
var arrDataBubble2 = new List {
new OptsChartData { name = "X-Axis", values = new List { 1, 2, 3, 4, 5, 6 } },
new OptsChartData {
name = "Airplane",
values = new List { 33, 20, 51, 65, 71, 75 },
sizes = new List { 10, 10, 12, 12, 15, 20 }
},
new OptsChartData{
name = "Train",
values = new List { 99, 88, 77, 89, 99, 99 },
sizes = new List { 20, 20, 22, 22, 25, 30 }
},
new OptsChartData {
name = "Bus",
values = new List { 21, 25, 32, 49, 59, 69 },
sizes = new List { 11, 11, 13, 13, 16, 21 }
}
};
// TOP-LEFT
var optsChartBubble1 = new BubbleChartOpts
{
// position = new PositionProps(0.5, 0.6, "45%", 3),
x = 0.5,
y = 0.6,
w = "45%",
h = 3,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
chartColors = Constants.COLORS_ACCENT,
chartColorsOpacity = 40,
dataBorder = new BorderProps("FFFFFF", null, 1),
dataLabel = new ChartPropsDataLabel
{
dataLabelFontFace = "Arial",
dataLabelFontSize = 10,
dataLabelColor = "363636",
dataLabelPosition = DataLabelPosition.r,
},
showSerName = true,
showLeaderLines = true
};
slide.addBubbleChart(arrDataBubble1, optsChartBubble1);
// TOP-RIGHT
var optsChartBubble2 = new BubbleChartOpts
{
// position = new PositionProps(7, 0.6, "45%", 3),
x = 7,
y = 0.6,
w = "45%",
h = 3,
plotArea = new ChartPropsFillLine { fill = "F1F1F1" },
chartColors = Constants.COLORS_RYGU,
chartColorsOpacity = 25,
showLegend = true,
legendProps = LegendPosition.b,
lineSize = 8,
lineSmooth = true,
lineDataSymbolSize = 12,
lineDataSymbolLineColor = "FFFFFF"
};
slide.addChart(ChartType.bubble, arrDataBubble2, optsChartBubble2);
// BOTTOM-LEFT
var optsChartBubble3 = new BubbleChartOpts
{
//position = new PositionProps(0.5, 4.0, "45%", 3),
x = 0.5,
y = 4.0,
w = "45%",
h = 3,
chartArea = new ChartAreaProps { fill = "404040" },
plotArea = new ChartPropsFillLine { fill = "202020" },
axisCat = new ChartPropsAxisCat
{
catAxisLabelColor = "F1F1F1",
catAxisLabelFontSize = 10,
catAxisOrientation = "maxMin",
showCatAxisTitle = false,
},
axisVal = new ChartPropsAxisVal
{
valAxisLabelColor = "F1F1F1",
valAxisLabelFontSize = 10,
valAxisMinVal = 0,
valAxisOrientation = "maxMin",
showValAxisTitle = false,
},
dataBorder = new BorderProps("e1e1e1", null, 2),
dataLabel = new ChartPropsDataLabel
{
dataLabelFontFace = "Arial",
dataLabelFontSize = 10,
dataLabelColor = "e1e1e1",
},
showValue = true
};
slide.addBubbleChart(arrDataBubble1, optsChartBubble3);
// BOTTOM-RIGHT
var optsChartBubble4 = new BubbleChartOpts
{
// position = new PositionProps(7.0, 4.0, "45%", 3),
x = 7.0,
y = 4.0,
w = "45%",
h = 3,
lineSize = 0,
chartColors = Constants.COLORS_RYGU
};
slide.addBubble3dChart(arrDataBubble2, optsChartBubble4);
}
///
/// SLIDE 16: Radar Chart
///
///
public static void genSlide16_RadarChart(PptxGen pptx)
{
var slide = pptx.addSlide(new AddSlideProps { sectionTitle = "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
slide.addTable(new List {
new TableRow {
new TableCell { text = "Chart Examples: Radar Chart", options = Constants.BASE_TEXT_OPTS_L },
Constants.BASE_TEXT_OPTS_R
}
}, Constants.BASE_TABLE_OPTS);
var arrDataRegions = new List {
new OptsChartData {
name = "Region 1",
labels = new List> { new List { "Jun", "Jul", "Aug", "Sep" } },
values = new List { 20, 18, 15, 10 }
}
};
var arrDataStudents = new List {
new OptsChartData{
name = "Student 1",
labels = new List> { new List { "Logic", "Coding", "Results", "Comments", "Runtime" } },
values = new List { 3, 1, 3, 3, 4 }
},
new OptsChartData{
name = "Student 2",
labels = new List> { new List { "Logic", "Coding", "Results", "Comments", "Runtime" } },
values = new List { 1, 2, 2, 3, 2 }
},
new OptsChartData{
name = "Student 3",
labels = new List> { new List { "Logic", "Coding", "Results", "Comments", "Runtime" } },
values = new List { 2, 3, 3, 4, 3 }
}
};
// TOP-ROW
// TOP-L: standard radar
var optsChartRadar1 = new RadarChartOpts
{
// position = new PositionProps(0.5, 0.6, 4.0, 3.0),
x = 0.5,
y = 0.6,
w = 4.0,
h = 3.0,
chartArea = new ChartAreaProps { fill = "F9F9F9" },
radarStyle = RadarStyle.standard,
showTitle = true,
titleProps = new ChartPropsTitle
{
titleColor = "7F7F7F",
titleFontFace = "Segoe UI",
titleFontSize = 12,
title = "radarStyle: 'standard'",
},
lineDataSymbol = LineDataSymbolType.none
};
slide.addRadarChart(arrDataRegions, optsChartRadar1);
// TOP-C: marker radar
var optsChartRadar2 = new RadarChartOpts
{
// position = new PositionProps(4.65, 0.6, 4.0, 3.0),
x = 4.65,
y = 0.6,
w = 4.0,
h = 3.0,
chartArea = new ChartAreaProps { fill = "F9F9F9" },
radarStyle = RadarStyle.marker,
showTitle = true,
titleProps = new ChartPropsTitle
{
titleColor = "7F7F7F",
titleFontFace = "Segoe UI",
titleFontSize = 12,
title = "radarStyle: 'marker'"
},
};
slide.addRadarChart(arrDataRegions, optsChartRadar2);
// TOP-R: filled radar
var optsChartRadar3 = new RadarChartOpts
{
//position = new PositionProps(8.8, 0.6, 4.0, 3.0),
x = 8.8,
y = 0.6,
w = 4.0,
h = 3.0,
chartArea = new ChartAreaProps { fill = "F9F9F9" },
radarStyle = RadarStyle.filled,
showTitle = true,
titleProps = new ChartPropsTitle
{
titleColor = "7F7F7F",
titleFontFace = "Segoe UI",
titleFontSize = 12,
title = "radarStyle: 'filled'"
}
};
slide.addRadarChart(arrDataRegions, optsChartRadar3);
// BTM-ROW
// BTM-L: marker/line options
var optsChartRadar10 = new RadarChartOpts
{
// position = new PositionProps(0.5, 3.8, 6.0, 3.5),
x = 0.5,
y = 3.8,
w = 6.0,
h = 3.5,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
radarStyle = RadarStyle.marker,
axisCat = new ChartPropsAxisCat
{
catAxisLabelColor = "0088CC",
catAxisLabelFontFace = "Courier",
catAxisLabelFontSize = 11,
},
chartColors = Constants.COLORS_RYGU,
lineDataSymbol = LineDataSymbolType.diamond,
lineDataSymbolLineColor = "0088CC",
lineDataSymbolLineSize = 2,
lineDataSymbolSize = 12,
lineSize = 3,
axisVal = new ChartPropsAxisVal
{
valAxisLineColor = "D9D9D9",
valAxisLineSize = 2,
},
showLegend = true,
legendProps = LegendPosition.l,
showTitle = true,
titleProps = new ChartPropsTitle
{
title = "Line/Marker Options",
titleColor = "7F7F7F",
titleFontFace = "Helvetica Neue",
titleFontSize = 12
},
};
slide.addRadarChart(arrDataStudents, optsChartRadar10);
// BTM-R: Filled/Axis options
var optsChartRadar11 = new RadarChartOpts
{
// position = new PositionProps(6.83, 3.8, 6.0, 3.5),
x = 6.83,
y = 3.8,
w = 6.0,
h = 3.5,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
radarStyle = RadarStyle.filled,
chartColors = Constants.COLORS_RYGU,
chartColorsOpacity = 25,
axisCat = new ChartPropsAxisCat
{
catAxisLabelColor = "404040",
catAxisLabelFontFace = "Segoe UI",
catAxisLabelFontSize = 10,
catAxisLineShow = false,
},
lineDataSymbolSize = 2,
lineSize = 1,
axisVal = new ChartPropsAxisVal
{
valAxisLabelFontFace = "Segoe UI",
valAxisLabelFontSize = 10,
},
showLegend = true,
legendProps = new ChartPropsLegend
{
legendPos = LegendPosition.r,
legendColor = "404040",
},
titleProps = new ChartPropsTitle
{
titleColor = "404040",
titleFontFace = "Helvetica Neue",
titleFontSize = 12,
title = "Filled/Axis Options"
},
showTitle = true,
};
slide.addRadarChart(arrDataStudents, optsChartRadar11);
}
///
/// SLIDE 17: Multi-Level Category Axes (2 levels)
///
///
public static void genSlide17(PptxGen pptx)
{
var slide = pptx.addSlide(new AddSlideProps { sectionTitle = "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
slide.addTable(new List {
new TableRow {
new TableCell { text = "Chart Examples: Multi-Level Category Axes", options = Constants.BASE_TEXT_OPTS_L },
Constants.BASE_TEXT_OPTS_R
}
}, Constants.BASE_TABLE_OPTS);
var arrDataLabels = new List> {
new List { "Gear", "Bearing", "Motor", "Switch", "Plug", "Cord", "Fuse", "Bulb", "Pump", "Leak", "Seals" },
new List { "Mechanical", "", "", "Electrical", "", "", "", "", "Hydraulic", "", "" }
};
var arrDataRegions = new List {
new OptsChartData{
name = "Mechanical",
labels = arrDataLabels,
values = new List { 11, 8, 3, 0, 0, 0, 0, 0, 0, 0, 0 }
},
new OptsChartData{
name = "Electrical",
labels = arrDataLabels,
values = new List { 0, 0, 0, 19, 12, 11, 3, 2, 0, 0, 0 }
},
new OptsChartData{
name = "Hydraulic",
labels = arrDataLabels,
values = new List { 0, 0, 0, 0, 0, 0, 0, 0, 4, 3, 1 }
}
};
var opts1 = new AreaChartOpts
{
// position = new PositionProps(0.5, 0.6, 6.0, 3.0),
x = 0.5,
y = 0.6,
w = 6.0,
h = 3,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
axisCat = new ChartPropsAxisCat
{
catAxisMultiLevelLabels = true,
catAxisLabelFontFace = "Helvetica Neue Thin"
}
};
var opts2 = new BarChartOpts
{
// position = new PositionProps(6.8, 0.6, 6.0, 3.0),
x = 6.8,
y = 0.6,
w = 6.0,
h = 3,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
axisCat = new ChartPropsAxisCat
{
catAxisMultiLevelLabels = true,
catAxisLabelFontFace = "Helvetica Neue Thin",
},
barDir = BarDirection.col,
barGapWidthPct = 0
};
var opts3 = new Bar3dChartOpts
{
// position = new PositionProps(0.5, 4.0, 6.0, 3.0),
x = 0.5,
y = 4.0,
w = 6.0,
h = 3,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
axisCat = new ChartPropsAxisCat
{
catAxisMultiLevelLabels = true,
},
barDir = BarDirection.col,
v3DRAngAx = true
};
var opts4 = new LineChartOpts
{
// position = new PositionProps(6.8, 4.0, 6.0, 3.0),
x = 6.8,
y = 4.0,
w = 6.0,
h = 3,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
axisCat = new ChartPropsAxisCat
{
catAxisMultiLevelLabels = true,
}
};
slide.addAreaChart(arrDataRegions, opts1);
slide.addBarChart(arrDataRegions, opts2);
slide.addBar3dChart(arrDataRegions, opts3);
slide.addLineChart(arrDataRegions, opts4);
}
///
/// SLIDE 18: Multi-Level Category Axes (3 Levels)
///
///
public static void genSlide18_BarChart(PptxGen pptx)
{
var slide = pptx.addSlide(new AddSlideProps { sectionTitle = "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
slide.addTable(new List {
new TableRow {
new TableCell { text = "Chart Examples: Multi-Level Category Axes (3 Levels)", options = Constants.BASE_TEXT_OPTS_L },
Constants.BASE_TEXT_OPTS_R
}
}, Constants.BASE_TABLE_OPTS);
var arrDataRegions = new List {
new OptsChartData{
name = "Fruits",
labels = new List> {
new List { "Q1", "Q2", "Q3", "Q4", "Q1", "Q2", "Q3", "Q4", "Q1", "Q2", "Q3", "Q4", "Q1", "Q2", "Q3", "Q4" },
new List{ "Apple", "", "", "", "Banana", "", "", "", "Apple", "", "", "", "Banana", "", "", "" },
new List { "2024", "", "", "", "", "", "", "", "2025", "", "", "", "", "", "", "" }
},
values = new List { 734, 465, 656, 176, 434, 165, 613, 359, 279, 660, 307, 270, 539, 142, 554, 405 }
}
};
var opts1 = new BarChartOpts
{
// position = new PositionProps(0.5, 0.6, 12.3, 6.5),
x = 0.5,
y = 0.6,
w = 12.3,
h = 6.5,
chartArea = new ChartAreaProps { fill = "F1F1F1", roundedCorners = false },
axisCat = new ChartPropsAxisCat { catAxisMultiLevelLabels = true },
chartColors = new List { "C0504D", "C0504D", "C0504D", "C0504D", "FFC000", "FFC000", "FFC000", "FFC000" }
};
slide.addBarChart(arrDataRegions, opts1);
}
///
/// SLIDE 19: Combo Chart
///
///
public static void genSlide19(PptxGen pptx)
{
var slide = pptx.addSlide(new AddSlideProps { sectionTitle = "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
slide.addTable(new List {
new TableRow {
new TableCell { text = "Chart Examples: Combo Chart", options = Constants.BASE_TEXT_OPTS_L },
Constants.BASE_TEXT_OPTS_R
}
}, Constants.BASE_TABLE_OPTS);
slide.addText($"({Constants.CHART_DATA.EvSales_Vol.sourceUrl})", Constants.FOOTER_TEXT_OPTS);
var comboProps = new ChartOpts
{
x = 0.5,
y = 0.6,
w = 12.3,
h = "85%",
chartArea = new ChartAreaProps { fill = "F1F1F1" },
barDir = BarDirection.col,
barGrouping = ChartBarGrouping.stacked,
catAxisLabelColor = "494949",
catAxisLabelFontFace = "Arial",
catAxisLabelFontSize = 10,
catAxisOrientation = "minMax",
showLegend = true,
legendPos = LegendPosition.b,
showTitle = true,
titleFontFace = "Calibri Light",
titleFontSize = 14,
title = Constants.CHART_DATA.EvSales_Vol.chartTitle,
valAxes = new List{
new ChartPropsAxisVal{
showValAxisTitle = true,
valAxisTitle = "Cars Produced (m)",
valAxisMaxVal = 20,
valAxisTitleColor = "1982c4",
valAxisLabelColor = "1982c4"
},
new ChartPropsAxisVal{
showValAxisTitle = true,
valAxisTitle = "Global Market Share (%)",
valAxisMaxVal = 20,
valAxisTitleColor = "F38940",
valAxisLabelColor = "F38940",
valGridLine = new OptsChartGridLine { style = GridLineStyle.none}
}
},
catAxes = new List {
new ChartPropsAxisCat { catAxisTitle = "Year" },
new ChartPropsAxisCat { catAxisHidden = true }
}
};
var comboTypes = new List {
new ChartMulti{
type = ChartType.bar,
data = Constants.CHART_DATA.EvSales_Vol.chartData,
options = new ChartOpts {
chartColors = Constants.COLORS_SPECTRUM,
barGrouping = ChartBarGrouping.stacked
}
},
new ChartMulti {
type = ChartType.line,
data = Constants.CHART_DATA.EvSales_Pct.chartData,
options = new ChartOpts {
chartColors = new List { "F38940" },
secondaryValAxis = true,
secondaryCatAxis = true
}
}
};
slide.addChart(comboTypes, comboProps);
}
///
// SLIDE 20: Combo Chart: Various options
///
///
public static void genSlide20(PptxGen pptx)
{
var slide = pptx.addSlide(new AddSlideProps { sectionTitle = "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
slide.addTable(new List {
new TableRow {
new TableCell { text = "Chart Examples: Combo Chart Options", options = Constants.BASE_TEXT_OPTS_L },
Constants.BASE_TEXT_OPTS_R
}
}, Constants.BASE_TABLE_OPTS);
void doColumnAreaLine()
{
// TOP-LEFT: Column/Area/line combo
var opts = new ChartOpts
{
x = 0.6,
y = 0.6,
w = 6.0,
h = 3.0,
barDir = BarDirection.col,
catAxisLabelColor = "666666",
catAxisLabelFontFace = "Arial",
catAxisLabelFontSize = 12,
catAxisOrientation = "minMax",
showLegend = false,
showTitle = false,
valAxisMaxVal = 100,
valAxisMajorUnit = 10,
valAxes = new List
{
new ChartPropsAxisVal {
showValAxisTitle = true,
valAxisTitle = "Primary Value Axis"
},
new ChartPropsAxisVal {
showValAxisTitle = true,
valAxisTitle = "Secondary Value Axis",
valGridLine = new OptsChartGridLine { style = GridLineStyle.none}
}
},
catAxes = new List
{
new ChartPropsAxisCat {
catAxisTitle = "Primary Category Axis"
},
new ChartPropsAxisCat {
catAxisHidden = true
}
}
};
var labels = new List> { new List { "April", "May", "June", "July", "August" } };
var columnAreaLineCharts = new List
{
new ChartMulti {
type = ChartType.area,
data = new List {
new OptsChartData {
name = "Current",
labels = labels,
values = new List { 1, 4, 7, 2, 3 }
}
},
options = new ChartOpts {
chartColors = new List { "00FFFF" },
barGrouping = ChartBarGrouping.standard,
secondaryValAxis = opts.valAxes != null,
secondaryCatAxis = opts.catAxes != null
}
},
new ChartMulti {
type = ChartType.bar,
data = new List {
new OptsChartData {
name = "Bottom",
labels = labels,
values = new List { 17, 26, 53, 10, 4 }
}
},
options = new ChartOpts {
chartColors = new List { "0000FF" },
barGrouping = ChartBarGrouping.stacked
}
},
new ChartMulti {
type = ChartType.line,
data = new List {
new OptsChartData {
name = "Current",
labels = labels,
values = new List { 5, 3, 2, 4, 7 }
}
},
options = new ChartOpts {
barGrouping = ChartBarGrouping.standard,
secondaryValAxis = opts.valAxes != null,
secondaryCatAxis = opts.catAxes != null
}
}
};
slide.addChart(columnAreaLineCharts, opts);
}
void doStackedLine()
{
// TOP-RIGHT: Stacked line combo
var opts = new ChartOpts
{
x = 6.83,
y = 0.6,
w = 6.0,
h = 3.0,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
barDir = BarDirection.col,
barGrouping = ChartBarGrouping.stacked,
catAxisLabelColor = "0000CC",
catAxisLabelFontFace = "Arial",
catAxisLabelFontSize = 12,
catAxisOrientation = "minMax",
showLegend = false,
showTitle = false,
valAxisMaxVal = 100,
valAxisMajorUnit = 10
};
var labels = new List> { new List { "Mon", "Tue", "Wed", "Thu", "Fri" } };
var chartTypes = new List {
new ChartMulti {
type = ChartType.bar,
data = new List {
new OptsChartData {
name = "Bottom",
labels = labels,
values = new List { 17, 26, 53, 10, 4 }
},
new OptsChartData {
name = "Middle",
labels = labels,
values = new List { 55, 40, 20, 30, 15 }
},
new OptsChartData {
name = "Top",
labels = labels,
values = new List { 10, 22, 25, 35, 70 }
}
},
options = new ChartOpts {
barGrouping = ChartBarGrouping.stacked
}
},
new ChartMulti {
type = ChartType.line,
data = new List {
new OptsChartData{
name = "Current",
labels = labels,
values = new List { 25, 35, 55, 10, 5 }
}
},
options = new ChartOpts {
barGrouping = ChartBarGrouping.standard
}
}
};
slide.addChart(chartTypes, opts);
}
void doStackedDot()
{
// BOTTOM-LEFT: Stacked dot combo
var opts = new ChartOpts
{
x = 0.5,
y = 4.0,
w = 6.0,
h = 3.0,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
barDir = BarDirection.col,
barGrouping = ChartBarGrouping.stacked,
catAxisLabelColor = "999999",
catAxisLabelFontFace = "Arial",
catAxisLabelFontSize = 14,
catAxisOrientation = "minMax",
showLegend = false,
showTitle = false,
valAxisMaxVal = 100,
valAxisMinVal = 0,
valAxisMajorUnit = 20,
lineSize = 0,
lineDataSymbolSize = 20,
lineDataSymbolLineSize = 2,
lineDataSymbolLineColor = "FF0000",
valAxes = new List {
new ChartPropsAxisVal {
showValAxisTitle = true,
valAxisTitle = "Primary Value Axis"
},
new ChartPropsAxisVal {
showValAxisTitle = true,
valAxisTitle = "Secondary Value Axis",
catAxisOrientation = "maxMin",
valAxisMajorUnit = 1,
valAxisMaxVal = 10,
valAxisMinVal = 1,
valGridLine = new OptsChartGridLine { style = GridLineStyle.none}
}
},
catAxes = new List {
new ChartPropsAxisCat {
catAxisTitle = "Primary Category Axis"
},
new ChartPropsAxisCat {
catAxisHidden = true
}
}
};
var labels = new List> { new List { "Q1", "Q2", "Q3", "Q4", "OT" } };
var chartTypes = new List {
new ChartMulti {
type = ChartType.bar,
data = new List {
new OptsChartData {
name = "Bottom",
labels = labels,
values = new List { 17, 26, 53, 10, 4 }
},
new OptsChartData {
name = "Middle",
labels = labels,
values = new List { 55, 40, 20, 30, 15 }
},
new OptsChartData {
name = "Top",
labels = labels,
values = new List { 10, 22, 25, 35, 70 }
}
},
options = new ChartOpts {
barGrouping = ChartBarGrouping.stacked
}
},
new ChartMulti {
type = ChartType.line,
data = new List {
new OptsChartData {
name = "Current",
labels = labels,
values = new List { 5, 3, 2, 4, 7 }
}
},
options = new ChartOpts {
barGrouping = ChartBarGrouping.standard,
secondaryValAxis = opts.valAxes != null,
secondaryCatAxis = opts.catAxes != null,
chartColors = new List { "FFFF00" }
}
}
};
slide.addChart(chartTypes, opts);
}
void doBarCol()
{
// BOTTOM-RIGHT: Bar/Column combo
var opts = new ChartOpts
{
x = 6.83,
y = 4.0,
w = 6.0,
h = 3.0,
chartArea = new ChartAreaProps { fill = "F1F1F1" },
barDir = BarDirection.col,
barGrouping = ChartBarGrouping.stacked,
catAxisLabelColor = "999999",
catAxisLabelFontFace = "Arial",
catAxisLabelFontSize = 14,
catAxisOrientation = "minMax",
showLegend = false,
showTitle = false,
valAxisMaxVal = 100,
valAxisMinVal = 0,
valAxisMajorUnit = 20,
valAxes = new List
{
new ChartPropsAxisVal {
showValAxisTitle = true,
valAxisTitle = "Primary Value Axis"
},
new ChartPropsAxisVal {
showValAxisTitle = true,
valAxisTitle = "Secondary Value Axis",
catAxisOrientation = "maxMin",
valAxisMajorUnit = 1,
valAxisMaxVal = 10,
valAxisMinVal = 1,
valGridLine = new OptsChartGridLine { style = GridLineStyle.none}
}
},
catAxes = new List {
new ChartPropsAxisCat{
catAxisTitle = "Primary Category Axis"
},
new ChartPropsAxisCat {
catAxisHidden = true
}
}
};
var labels = new List> { new List { "Q1", "Q2", "Q3", "Q4", "OT" } };
var barColCharts = new List {
new ChartMulti{
type = ChartType.bar,
data = new List {
new OptsChartData {
name = "Bottom",
labels = labels,
values = new List { 17, 26, 53, 10, 4 }
},
new OptsChartData {
name = "Middle",
labels = labels,
values = new List { 55, 40, 20, 30, 15 }
},
new OptsChartData {
name = "Top",
labels = labels,
values = new List { 10, 22, 25, 35, 70 }
}
},
options = new ChartOpts {
barGrouping = ChartBarGrouping.stacked
}
},
new ChartMulti{
type = ChartType.bar,
data = new List {
new OptsChartData{
name = "Current",
labels = labels,
values = new List { 5, 3, 2, 4, 7 }
}
},
options = new ChartOpts {
barDir = BarDirection.bar,
barGrouping = ChartBarGrouping.standard,
chartColors = new List { "0077BF", "4E9D2D", "ECAA00", "5FC4E3", "DE4216", "154384" },
secondaryValAxis = opts.valAxes != null,
secondaryCatAxis = opts.catAxes != null
}
}
};
slide.addChart(barColCharts, opts);
}
doColumnAreaLine();
doStackedLine();
doStackedDot();
doBarCol();
}
///
/// SLIDE 21: Misc options
///
///
public static void genSlide21(PptxGen pptx)
{
var slide = pptx.addSlide(new AddSlideProps { sectionTitle = "Charts" });
slide.addNotes("API Docs: https://gitbrent.github.io/PptxGenJS/docs/api-charts.html");
slide.addTable(new List {
new TableRow {
new TableCell { text = "Misc Options: Shadow, Transparent Colors", options = Constants.BASE_TEXT_OPTS_L },
Constants.BASE_TEXT_OPTS_R
}
}, Constants.BASE_TABLE_OPTS);
var arrDataRegions = new List {
new OptsChartData {
name = "Region 2",
labels = new List> { new List { "April", "May", "June", "July", "August" } },
values = new List { 0, 30, 53, 10, 25 }
},
new OptsChartData{
name = "Region 3",
labels = new List> { new List { "April", "May", "June", "July", "August" }},
values = new List { 17, 26, 53, 100, 75 }
},
new OptsChartData {
name = "Region 4",
labels = new List> { new List { "April", "May", "June", "July", "August" }},
values = new List { 55, 43, 70, 90, 80 }
},
new OptsChartData {
name = "Region 5",
labels = new List> { new List { "April", "May", "June", "July", "August" } },
values = new List { 55, 43, 70, 90, 80 }
}
};
var arrDataHighVals = new List {
new OptsChartData {
name = "California",
labels = new List> { new List { "Apartment", "Townhome", "Duplex", "House", "Big House" } },
values = new List { 2000, 2800, 3200, 4000, 5000 }
},
new OptsChartData{
name = "Texas",
labels = new List> { new List { "Apartment", "Townhome", "Duplex", "House", "Big House"} },
values = new List { 1400, 2000, 2500, 3000, 3800 }
}
};
var single = new List {
new OptsChartData{
name = "Texas",
labels = new List> { new List { "Apartment", "Townhome", "Duplex", "House", "Big House"} },
values = new List { 1400, 2000, 2500, 3000, 3800 }
}
};
// TOP-LEFT: Horizontal bar with shadow
var optsChartBar1 = new ChartOpts
{
x = 0.5,
y = 0.6,
w = 6.0,
h = 3.0,
showTitle = true,
title = "Large blue shadow",
barDir = BarDirection.bar,
barGrouping = ChartBarGrouping.standard,
dataLabelColor = "FFFFFF",
showValue = true,
shadow = new ShadowProps
{
type = ShadowType.outer,
blur = 10,
offset = 5,
angle = 45,
color = "0059B1",
opacity = 1
}
};
// TOP-RIGHT: Pie chart with shadow
var pieOptions = new ChartOpts
{
x = 7.0,
y = 0.6,
w = 6.0,
h = 3.0,
showTitle = true,
title = "Rotated cyan shadow",
dataLabelColor = "FFFFFF",
shadow = new ShadowProps
{
type = ShadowType.outer,
blur = 10,
offset = 5,
angle = 180,
color = "00FFFF",
opacity = 1
}
};
// BOTTOM-LEFT: Stacked bar with transparent colors
var optsChartBar3 = new ChartOpts
{
x = 0.5,
y = 3.8,
w = 6.0,
h = 3.5,
showTitle = true,
title = "No shadow, transparent colors",
barDir = BarDirection.bar,
barGrouping = ChartBarGrouping.stacked,
chartColors = new List