Skip to main content
You are viewing help content for pre-release software. This document and the features it describes are subject to change.
All docs
V26.1
  • DevExpress Presentation API: Get Started with Chart

    • 4 minutes to read

    This topic describes how to create a Chart, add it to a presentation, and customize its settings.

    Add a Chart with a Data Series to a Presentation

    • Add a Chart object to a slide’s Shapes collection.

    • Specify the chart’s Width and Height properties.

    • Specify the chart’s data source using the ChartData property. For more information on how to load data to a chart, refer to the following help topic: Load Data to Charts.

    • Create a series of the required type and add it to the chart’s Series collection.

    • Specify the series Arguments and Values properties to define the series data points.

    using DevExpress.Docs.Office;
    using DevExpress.Docs.Presentation;
    
    namespace PresentationApiSample;
    
    public class Program {
        public static async Task Main(string[] _) {
    
            Presentation presentation = new Presentation();
    
            presentation.Slides.Clear();
    
            Slide slide = new Slide(SlideLayoutType.Blank);
            presentation.Slides.Add(slide);
    
            var chart = new Chart();
    
            chart.Width = 800;
            chart.Height = 600;
    
            chart.ChartData[0, "A1"].NumericValue = 120;
            chart.ChartData[0, "A2"].NumericValue = 95;
            chart.ChartData[0, "A3"].NumericValue = 140;
            chart.ChartData[0, "B1"].TextValue = "Q1";
            chart.ChartData[0, "B2"].TextValue = "Q2";
            chart.ChartData[0, "B3"].TextValue = "Q3";
    
            var series = new BarSeries();
            series.Values = new ChartDataReference(sheetIndex: 0, fromCellReference: "A1", toCellReference: "A3");
            series.Arguments = new ChartDataReference(sheetIndex: 0, fromCellReference: "B1", toCellReference: "B3");
    
            chart.Series.Add(series);
            slide.Shapes.Add(chart);
        }
    }
    

    Series and Views

    A Chart object maintains two collections: Chart.Series and Chart.Views. Series objects supply data and define the chart type. Views control rendering settings applicable to one or more series. When you add a series, the Presentation API automatically associates it with an existing view or creates a new one if needed.

    The following code snippet creates two series and configures their common settings in the view:

    BarSeries barSeries1 = new BarSeries();
    barSeries1.Arguments = new ChartStringData(new[] { "Q1", "Q2", "Q3", "Q4", "Q5" });
    barSeries1.Values = new ChartNumericData(new double[] { 10, 13, 4, 7, 5});
    chart.Series.Add(barSeries1);
    
    BarSeries barSeries2 = new BarSeries();
    barSeries2.Arguments = new ChartStringData(new[] { "Q1", "Q2", "Q3", "Q4", "Q5" });
    barSeries2.Values = new ChartNumericData(new double[] { 5, 6, 4, 9, 11 });
    chart.Series.Add(barSeries2);
    
    BarChartView barView = (BarChartView)chart.Views[0];
    barView.DataLabels = new DataLabels { ShowCategoryName = true, ShowValue = true };
    

    Supported Chart Types

    The ChartType enumeration lists chart types available for the Chart class:

    Enumeration Value Series Object View Object
    Area
    DevExpress Presentation API - Charts - Area
    Stacked Area
    DevExpress Presentation API - Charts - Stacked Area
    100% Stacked Area
    DevExpress Presentation API - Charts - 100% Stacked Area
    AreaSeries AreaChartView
    3D Area
    DevExpress Presentation API - Charts - Area 3D
    3D Stacked Area
    DevExpress Presentation API - Charts - 3D Stacked Area
    3D 100% Stacked Area
    DevExpress Presentation API - Charts - 3D 100% Stacked Area
    Area3DSeries Area3DChartView
    Clustered Bar
    DevExpress Presentation API - Charts - Clustered Bar
    Stacked Bar
    DevExpress Presentation API - Charts - Stacked Bar
    100% Stacked Bar
    DevExpress Presentation API - Charts - 100% Stacked Bar
    Clustered Column
    DevExpress Presentation API - Charts - Column
    Stacked Column
    DevExpress Presentation API - Charts - Stacked Column
    100% Stacked Column
    DevExpress Presentation API - Charts - 100% Stacked Column
    BarSeries BarChartView
    3D Clustered Bar
    DevExpress Presentation API - Charts - Clustered Bar 3D
    3D Stacked Bar
    DevExpress Presentation API - Charts - 3D Stacked Bar
    3D 100% Stacked Bar
    DevExpress Presentation API - Charts - 3D 100% Stacked Bar
    3D Clustered Column
    DevExpress Presentation API - Charts - Clustered Column 3D
    3D Stacked Column
    DevExpress Presentation API - Charts - 3D Stacked Column
    3D 100% Stacked Column
    DevExpress Presentation API - Charts - 3D 100% Stacked Column
    3D Column
    DevExpress Presentation API - Charts - Column 3D
    Bar3DSeries Bar3DChartView
    Bubble
    DevExpress Presentation API - Charts - Bubble
    3D Bubble
    DevExpress Presentation API - Charts - 3D Bubble
    BubbleSeries BubbleChartView
    Doughnut
    DevExpress Presentation API - Charts - Doughnut
    DoughnutSeries DoughnutChartView
    Line
    DevExpress Presentation API - Charts - Line
    Stacked Line
    DevExpress Presentation API - Charts - Stacked Line
    100% Stacked Line
    DevExpress Presentation API - Charts - 100% Stacked Line
    LineSeries LineChartView
    3D Line
    DevExpress Presentation API - Charts - Line 3D
    Line3DSeries Line3DChartView
    Pie of Pie
    DevExpress Presentation API - Charts - Pie of Pie
    Bar of Pie
    DevExpress Presentation API - Charts - Bar of Pie
    ChartOfPieSeries ChartOfPieView
    Pie
    DevExpress Presentation API - Charts - Pie
    PieSeries PieChartView
    Pie 3D
    DevExpress Presentation API - Charts - Pie 3D
    Pie3DSeries Pie3DChartView
    Radar
    DevExpress Presentation API - Charts - Radar
    Filled Radar
    DevExpress Presentation API - Charts - Filled Radar
    RadarSeries RadarChartView
    Scatter
    DevExpress Presentation API - Charts - Scatter
    ScatterSeries ScatterChartView
    High-Low-Close
    DevExpress Presentation API - Charts - High-Low-Close
    Open-High-Low-Close
    DevExpress Presentation API - Charts - Open-High-Low-Close
    Volume-High-Low-Close
    DevExpress Presentation API - Charts - Volume-High-Low-Close
    Volume-Open-High-Low-Close
    DevExpress Presentation API - Charts - Volume-Open-High-Low-Close
    StockSeries StockChartView
    Surface
    DevExpress Presentation API - Charts - Surface
    SurfaceSeries SurfaceChartView
    Surface 3D
    DevExpress Presentation API - Charts - Surface 3D
    Surface3DSeries Surface3DChartView

    Customize Chart Axes

    For details on how to access and customize chart axes, refer to the following help topic:

    Read Tutorial: Chart Axes