Skip to main content

Charts

Charts of almost any type can be added to Slides. See demos/modules/demo_chart.mjs for the charts shown below.

PptxGenJS Chart Samples

Usage#

let pres = new pptxgen();let dataChartAreaLine = [  {    name: "Actual Sales",    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],    values: [1500, 4600, 5156, 3167, 8510, 8009, 6006, 7855, 12102, 12789, 10123, 15121],  },  {    name: "Projected Sales",    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],    values: [1000, 2600, 3456, 4567, 5010, 6009, 7006, 8855, 9102, 10789, 11123, 12121],  },];
slide.addChart(pres.ChartType.line, dataChartAreaLine, { x: 1, y: 1, w: 8, h: 4 });

Core Chart Types#

  • Chart type can be any one of pptx.ChartType
  • Currently: pptx.ChartType.area, pptx.ChartType.bar, pptx.ChartType.bar3d, pptx.ChartType.bubble, pptx.ChartType.doughnut, pptx.ChartType.line, pptx.ChartType.pie, pptx.ChartType.radar, pptx.ChartType.scatter

Multi-Type Charts#

  • Chart types can be any one of pptx.ChartType, although pptx.ChartType.area, pptx.ChartType.bar, and pptx.ChartType.line will give the best results.
  • There should be at least two chart-types. There should always be two value axes and category axes.
  • Multi Charts have a different function signature than standard. There are two parameters:
  • chartTypes: Array of objects, each with type, data, and options objects.
  • options: Standard options as used with single charts. Can include axes options.
  • Columns makes the most sense in general. Line charts cannot be rotated to match up with horizontal bars (a PowerPoint limitation).
  • Can optionally have a secondary value axis.
  • If there is secondary value axis, a secondary category axis is required in order to render, but currently always uses the primary labels. It is recommended to use catAxisHidden: true on the secondary category axis.
  • Standard options are used, and the chart-type-options are mixed in to each.

Usage Notes#

Properties#

Position/Size Props (PositionProps)#

OptionTypeDefaultDescriptionPossible Values
xnumber1.0hor location (inches)0-n
xstringhor location (percent)'n%'. (Ex: {x:'50%'} middle of the Slide)
ynumber1.0ver location (inches)0-n
ystringver location (percent)'n%'. (Ex: {y:'50%'} middle of the Slide)
wnumber1.0width (inches)0-n
wstringwidth (percent)'n%'. (Ex: {w:'50%'} 50% the Slide width)
hnumber1.0height (inches)0-n
hstringheight (percent)'n%'. (Ex: {h:'50%'} 50% the Slide height)

General (IChartOpts), Data Table (IChartPropsDataTable), Legend (IChartPropsLegend), Title (IChartPropsTitle)#

OptionTypeDefaultDescriptionPossible Values
altTextstringchart alt textstring shown in the "alt text" panel in PowerPoint
borderobjectchart borderobject with pt and color values. Ex: border:{pt:'1', color:'f1f1f1'}
chartColorsarraydata colorsarray of hex color codes. Ex: ['0088CC','FFCC00']
chartColorsOpacitynumber100data color opacity (percent)1-100. Ex: { chartColorsOpacity:50 }
dataTableFontSizenumberdata table font size1-256. Ex: { dataTableFontSize: 13 }
fillstringfill/background colorhex color code. Ex: { fill:'0088CC' }
holeSizenumber50doughnut hole size (percent)1-100. Ex: { holeSize:50 }
invertedColorsarraydata colors for negative numbersarray of hex color codes. Ex: ['0088CC','FFCC00']
legendFontFacestringArialfont facefont name. Ex: { legendFontFace:'Arial' }
legendFontSizenumber10legend font size1-256. Ex: { legendFontSize: 13 }
legendColorstring000000legend text colorhex color code. Ex: { legendColor: '0088CC' }
legendPosstringrchart legend positionb (bottom), tr (top-right), l (left), r (right), t (top)
layoutobjectpositioning plot within chart areaobject with x, y, w and h props, all in range 0-1 (proportionally related to the chart size). Ex: {x: 0, y: 0, w: 1, h: 1} fully expands chart within the plot area
radarStylestringstandardradar chart stylestandard, marker, filled
showDataTablebooleanfalseshow Data Table under the charttrue or false (Not available for Pie/Doughnut charts)
showDataTableKeysbooleantrueshow Data Table Keys (color blocks)true or false (Not available for Pie/Doughnut charts)
showDataTableHorzBorderbooleantrueshow Data Table horizontal borderstrue or false (Not available for Pie/Doughnut charts)
showDataTableVertBorderbooleantrueshow Data Table vertical borderstrue or false (Not available for Pie/Doughnut charts)
showDataTableOutlinebooleantrueshow Data Table table outlinetrue or false (Not available for Pie/Doughnut charts)
showLabelbooleanfalseshow data labelstrue or false
showLeaderLinesbooleanfalseshow leader linestrue or false
showLegendbooleanfalseshow chart legendtrue or false
showPercentbooleanfalseshow data percenttrue or false
showTitlebooleanfalseshow chart titletrue or false
showValuebooleanfalseshow data valuestrue or false
titlestringchart titleEx: { title:'Sales by Region' }
titleAlignstringcenterchart title text alignleft center or right Ex: { titleAlign:'left' }
titleColorstring000000title colorhex color code. Ex: { titleColor:'0088CC' }
titleFontFacestringArialfont facefont name. Ex: { titleFontFace:'Arial' }
titleFontSizenumber18font size1-256. Ex: { titleFontSize:12 }
titlePosobjecttitle positionobject with x and y values. Ex: { titlePos:{x: 0, y: 10} }
titleRotateintegertitle rotation (degrees)0-359. Ex: { titleRotate:45 }

Cat Axis (IChartPropsAxisCat) and Val Axis (IChartPropsAxisVal)#

OptionTypeDefaultDescriptionPossible Values
catAxisBaseTimeUnitstringcategory-axis base time unitdays months or years
catAxisHiddenbooleanfalsehide category-axistrue or false
catAxisLabelColorstring000000category-axis colorhex color code. Ex: { catAxisLabelColor:'0088CC' }
catAxisLabelFontBoldbooleanfalsemake cat axis label boldtrue or false
catAxisLabelFontFacestringArialcategory-axis font facefont name. Ex: { titleFontFace:'Arial' }
catAxisLabelFontSizeinteger18category-axis font size1-256. Ex: { titleFontSize:12 }
catAxisLabelFrequencyintegerPPT "Interval Between Labels"1-n. Ex: { catAxisLabelFrequency: 2 }
catAxisLabelPosstringnextTocategory-axis label positionlow, high, or nextTo . Ex: { catAxisLabelPos: 'low' }
catAxisLabelRotateintegercategory-axis rotation (degrees)0-360. Ex: { catAxisLabelRotate:45 }
catAxisLineColorstring000000category-axis line colorhex color code. Ex: { catAxisTitleColor:'0088CC' }
catAxisLineShowbooleantrueshow/hide category-axis linetrue or false
catAxisLineSizeinteger18category-axis font size1-256. Ex: { titleFontSize:12 }
catAxisLineStylestringsolidcategory-axis line stylesolid, dash, dot
catAxisMajorTickMarkstringcategory-axis major tick marknone, inside, outside, cross
catAxisMajorTimeUnitstringcategory-axis major time unitdays, months or years
catAxisMaxValintegercategory-axis max valueInteger. Ex: { catAxisMaxVal:10 }
catAxisMinValintegercategory-axis min valueInteger. Ex: { catAxisMinVal:0 }
catAxisMinorTickMarkstringcategory-axis minor tick marknone, inside, outside, cross
catAxisMinorTimeUnitstringcategory-axis minor time unitdays, months or years
catAxisMajorUnitintegercategory-axis major unitPositive integer. Ex: { catAxisMajorUnit:12 }
catAxisMinorUnitintegercategory-axis minor unitPositive integer. Ex: { catAxisMinorUnit:1 }
catAxisOrientationstringminMaxcategory-axis orientationmaxMin (high->low) or minMax (low->high)
catAxisTitlestringAxis Titleaxis titlea string. Ex: { catAxisTitle:'Regions' }
catAxisTitleColorstring000000title colorhex color code. Ex: { catAxisTitleColor:'0088CC' }
catAxisTitleFontFacestringArialfont facefont name. Ex: { catAxisTitleFontFace:'Arial' }
catAxisTitleFontSizeintegerfont size1-256. Ex: { catAxisTitleFontSize:12 }
catAxisTitleRotateintegertitle rotation (degrees)0-360. Ex: { catAxisTitleRotate:45 }
catGridLineobjectnonecategory grid line styleobject with properties size (pt), color and style ('solid', 'dash' or 'dot') or 'none' to hide
showCatAxisTitlebooleanfalseshow category (vert) titletrue or false. Ex:{ showCatAxisTitle:true }
showValAxisTitlebooleanfalseshow values (horiz) titletrue or false. Ex:{ showValAxisTitle:true }
valAxisDisplayUnitstringdisplay unitsbillions, hundredMillions, hundreds, hundredThousands, millions, tenMillions, tenThousands, thousands, trillions
valAxisHiddenbooleanfalsehide value-axistrue or false
valAxisLabelColorstring000000value-axis colorhex color code. Ex: { valAxisLabelColor:'0088CC' }
valAxisLabelFontBoldbooleanfalsemake val axis label boldtrue or false
valAxisLabelFontFacestringArialvalue-axis font facefont name. Ex: { titleFontFace:'Arial' }
valAxisLabelFontSizeinteger18value-axis font size1-256. Ex: { titleFontSize:12 }
valAxisLabelFormatCodestringGeneralvalue-axis number formatformat string. Ex: { axisLabelFormatCode:'#,##0' }
valAxisLineColorstring000000value-axis line colorhex color code. Ex: { catAxisTitleColor:'0088CC' }
valAxisLineShowbooleantrueshow/hide value-axis linetrue or false
valAxisLineSizeinteger18value-axis font size1-256. Ex: { titleFontSize:12 }
valAxisLineStylestringsolidvalue-axis line stylesolid, dash, dot
valAxisLogScaleBasenumberlogarithmic scale2-99
valAxisMajorTickMarkstringvalue-axis major tick marknone, inside, outside, cross
valAxisMajorUnitnumber1.0value-axis tick stepsFloat or whole number. Ex: { majorUnit:0.2 }
valAxisMaxValnumbervalue-axis maximum value1-N. Ex: { valAxisMaxVal:125 }
valAxisMinValnumbervalue-axis minimum value1-N. Ex: { valAxisMinVal: -10 }
valAxisMinorTickMarkstringvalue-axis minor tick marknone, inside, outside, cross
valAxisOrientationstringminMaxvalue-axis orientationmaxMin (high->low) or minMax (low->high)
valAxisTitlestringAxis Titleaxis titlea string. Ex: { valAxisTitle:'Sales (USD)' }
valAxisTitleColorstring000000title colorhex color code. Ex: { valAxisTitleColor:'0088CC' }
valAxisTitleFontFacestringArialfont facefont name. Ex: { valAxisTitleFontFace:'Arial' }
valAxisTitleFontSizenumberfont size1-256. Ex: { valAxisTitleFontSize:12 }
valAxisTitleRotateintegertitle rotation (degrees)0-360. Ex: { valAxisTitleRotate:45 }
valGridLineobjectvalue grid line styleobject with properties size (pt), color and style ('solid', 'dash' or 'dot') or 'none' to hide

Bar (IChartPropsChartBar), Data Label (IChartPropsDataLabel), Line (IChartPropsChartLine)#

OptionTypeDefaultDescriptionPossible Values
barDirstringcolbar direction(Bar Chart) bar (horizontal) or col (vertical). Ex: {barDir:'bar'}
barGapWidthPctnumber150width between bar groups (percent)(Bar Chart) 0-500. Ex: { barGapWidthPct:50 }
barGroupingstringclusteredbar grouping(Bar Chart) clustered or stacked or percentStacked.
barOverlapPctnumber0overlap (percent)(Bar Chart) -100-100. Ex: { barOverlapPct:50 }
catLabelFormatCodestringformat to show data valueformat string. Ex: { catLabelFormatCode:'#,##0' }
dataBorderobjectdata borderobject with pt and color values. Ex: border:{pt:'1', color:'f1f1f1'}
dataLabelColorstring000000data label colorhex color code. Ex: { dataLabelColor:'0088CC' }
dataLabelFormatCodestringformat to show data valueformat string. Ex: { dataLabelFormatCode:'#,##0' }
dataLabelFormatScatterstringcustomlabel format(Scatter Chart) custom,customXY,XY
dataLabelFontBoldbooleanfalsemake data label boldEx: { dataLabelFontBold:true }
dataLabelFontFacestringArialvalue-axis font facefont name. Ex: { titleFontFace:'Arial' }
dataLabelFontSizenumber18value-axis font size1-256. Ex: { titleFontSize:12 }
dataLabelPositionstringbestFitdata label positionbestFit,b,ctr,inBase,inEnd,l,outEnd,r,t
dataNoEffectsbooleanfalsewhether to omit effects on data(Doughnut/Pie Charts) true or false
displayBlanksAsstringspanwhether to draw line or gap(Line Charts) span or gap
lineDashstringsolid(Bar/Scatter Chart) border line dash styledash, dashDot, lgDash, lgDashDot, lgDashDotDot, solid, sysDash or sysDot
lineDataSymbolstringcirclesymbol used on line markercircle,dash,diamond,dot,none,square,triangle
lineDataSymbolSizenumber6size of line data symbol1-256. Ex: { lineDataSymbolSize:12 }
lineDataSymbolLineSizenumber0.75size of data symbol outline1-256. Ex: { lineDataSymbolLineSize:12 }
lineDataSymbolLineColorstring000000color of data symbol linehex color code. Ex: { lineDataSymbolLineColor:'0088CC' }
lineSizenumber2thickness of data line (0 is no line)0-256. Ex: { lineSize: 1 }
lineSmoothbooleanfalsewhether to smooth linestrue or false - Ex: { lineSmooth: true }
shadowShadowPropsdata element shadow optionsnone or ShadowProps

3D Bar Chart (IChartPropsChartBar), Series Axis (IChartPropsDataTable)#

OptionTypeDefaultDescriptionPossible Values
bar3DShapestringboxbar 3d shapebox, cylinder, coneToMax, pyramid, pyramidToMax
barGapDepthPctnumber150width between bar groups (percent)0-500. Ex: { barGapWidthPct:50 }
dataLabelBkgrdColorsbooleanfalsebkgd color is series colortrue or false
serAxisBaseTimeUnitstringseries-axis base time unitdays months or years
serAxisHiddenbooleanfalsehide series-axistrue or false
serAxisOrientationstringminMaxseries-axis orientationmaxMin (high->low) or minMax (low->high)
serAxisLabelColorstring000000series-axis colorhex color code. Ex: { serAxisLabelColor:'0088CC' }
serAxisLabelFontBoldbooleanfalsemake cat axis label boldtrue or false
serAxisLabelFontFacestringArialseries-axis font facefont name. Ex: { titleFontFace:'Arial' }
serAxisLabelFontSizeinteger18series-axis font size1-256. Ex: { titleFontSize:12 }
serAxisLabelFrequencyintegerPPT "Interval Between Labels"1-n. Ex: { serAxisLabelFrequency: 2 }
serAxisLabelPosstringnextToaxis label positionlow, high, or nextTo . Ex: { serAxisLabelPos: 'low' }
serAxisLineShowbooleantrueshow/hide series-axis linetrue or false
serAxisMajorTimeUnitstringseries-axis major time unitdays, months or years
serAxisMajorUnitintegerseries-axis major unitPositive integer. Ex: { serAxisMajorUnit:12 }
serAxisMinorTimeUnitstringseries-axis minor time unitdays, months or years
serAxisMinorUnitintegerseries-axis minor unitPositive integer. Ex: { serAxisMinorUnit:1 }
serAxisTitlestringAxis Titleaxis titlea string. Ex: { serAxisTitle:'Regions' }
serAxisTitleColorstring000000title colorhex color code. Ex: { serAxisTitleColor:'0088CC' }
serAxisTitleFontFacestringArialfont facefont name. Ex: { serAxisTitleFontFace:'Arial' }
serAxisTitleFontSizeintegerfont size1-256. Ex: { serAxisTitleFontSize:12 }
serAxisTitleRotateintegertitle rotation (degrees)0-360. Ex: { serAxisTitleRotate:45 }
serGridLineobjectnoneseries grid line styleobject with properties size (pt), color and style ('solid', 'dash' or 'dot') or 'none' to hide
v3DRAngAxbooleantrueRight angle axestrue or false
v3DPerspectiveinteger18series-axis font size1-240. Ex: { v3DPerspective:125 }
v3DRotXintegerx-axis rotation (degrees)-90 - 90. Ex: { v3DRotX:-45 }
v3DRotYintegertitle rotation (degrees)0-360. Ex: { v3DRotY:180 }
valueBarColorsbooleanfalseforces chartColors on multi-data-seriestrue or false

Element Shadows#

OptionTypeUnitDefaultDescriptionPossible Values
typestringoutershadow typeouter or inner. Ex: { type:'outer' }
anglenumberdegrees90shadow angle0-359. Ex: { angle:90 }
blurnumberpoints3blur size1-256. Ex: { blur:3 }
colorstring000000shadow colorhex color code. Ex: { color:'0088CC' }
offsetnumberpoints1.8offset size1-256. Ex: { offset:2 }
opacitynumberpercent0.35opacity0-1. Ex: { opacity:0.35 }

Multi-Type Options#

OptionTypeDefaultDescriptionPossible Values
catAxesarrayarray of two axis options objectsSee example below
secondaryCatAxisbooleanfalseIf data should use secondary category axis (or primary)true or false
secondaryValAxisbooleanfalseIf data should use secondary value axis (or primary)true or false
valAxesarrayarray of two axis options objectsSee example below

Samples#

Sample code: demos/modules/demo_chart.mjs