Back to Devexpress

How to: Format Chart Elements

wpf-120395-controls-and-libraries-spreadsheet-examples-charts-how-to-format-chart-elements.md

latest8.3 KB
Original Source

How to: Format Chart Elements

  • Mar 16, 2023
  • 5 minutes to read

This example demonstrates how to enhance the appearance of an existing chart. For an example on how to create a basic chart in code, refer to the How to: Create and Modify a Chart article.

View Example

Select the action you wish to perform.

Apply the Built-in Chart Style

Chart styles allow you to quickly change chart appearance. The chart style changes the chart’s background fill, specifies the color of the data series, and applies different shape effects and outlines to the chart. To apply one of the predefined styles to the chart, utilize the ChartObject.Style property.

csharp
Worksheet worksheet = workbook.Worksheets["chartTask3"];
workbook.Worksheets.ActiveWorksheet = worksheet;

// Create a chart and specify its location.
Chart chart = worksheet.Charts.Add(ChartType.ColumnClustered, worksheet["B2:D4"]);
chart.TopLeftCell = worksheet.Cells["H2"];
chart.BottomRightCell = worksheet.Cells["N14"];

// Set the chart style.
chart.Style = ChartStyle.Accent1Dark;
vb
Dim worksheet As Worksheet = workbook.Worksheets("chartTask3")
workbook.Worksheets.ActiveWorksheet = worksheet

' Create a chart and specify its location.
Dim chart As Chart = worksheet.Charts.Add(ChartType.ColumnClustered, worksheet("B2:D4"))
chart.TopLeftCell = worksheet.Cells("H2")
chart.BottomRightCell = worksheet.Cells("N14")

' Set the chart style.
chart.Style = ChartStyle.Accent1Dark

Format an Individual Chart Element

The chart style allows you to apply a predefined set of format options. However, you can fine-tune these settings and specify custom formatting for individual chart elements by giving them a different color or outline. A full set of format characteristics available for a chart is provided by the ShapeFormatBase object. All objects that represent chart elements (Chart, PlotArea, Series, Axis, DataLabel, Legend, ChartTitle, etc.) inherit the ShapeFormatBase interface, so you can use its formatting properties to set a color and border of the required chart element.

  • Fill a chart element

  • Specify the outline of a chart element

  • Format a text of a chart element

Note

Not all formatting properties affect the visual appearance of chart elements when a document is loaded to the SpreadsheetControl. However, you can specify format settings in code, save the document to a supported format, and display it in Microsoft® Excel®.

csharp
Worksheet worksheet = workbook.Worksheets["chartTask4"];
workbook.Worksheets.ActiveWorksheet = worksheet;

// Create a chart and specify its location.
Chart chart = worksheet.Charts.Add(ChartType.Line, worksheet["B3:D8"]);
chart.TopLeftCell = worksheet.Cells["F3"];
chart.BottomRightCell = worksheet.Cells["L14"];

// Customize the chart area and the plot area appearance.
chart.Fill.SetNoFill();
chart.Outline.SetSolidFill(Color.FromArgb(0x99, 0x99, 0x99));
chart.PlotArea.Fill.SetSolidFill(Color.FromArgb(0x22, 0x99, 0x99, 0x99));

// Specify the position of the legend.
chart.Legend.Position = LegendPosition.Top;

// Use a secondary axis.
chart.Series[1].AxisGroup = AxisGroup.Secondary;

// Customize the axis scale and appearance.
Axis axis = chart.PrimaryAxes[0];
axis.Outline.SetNoFill();
axis.MajorTickMarks = AxisTickMarks.None;

axis = chart.PrimaryAxes[1];
axis.Outline.SetNoFill();
axis.MajorTickMarks = AxisTickMarks.None;
axis.MajorGridlines.Visible = false;
axis.Scaling.AutoMax = false;
axis.Scaling.AutoMin = false;
axis.Scaling.Max = 1400;
axis.Scaling.Min = 0;

axis = chart.SecondaryAxes[1];
axis.Outline.SetNoFill();
axis.MajorTickMarks = AxisTickMarks.None;
axis.Scaling.AutoMax = false;
axis.Scaling.AutoMin = false;
axis.Scaling.Max = 390;
axis.Scaling.Min = 270;
vb
Dim worksheet As Worksheet = workbook.Worksheets("chartTask4")
workbook.Worksheets.ActiveWorksheet = worksheet

' Create a chart and specify its location.
Dim chart As Chart = worksheet.Charts.Add(ChartType.Line, worksheet("B3:D8"))
chart.TopLeftCell = worksheet.Cells("F3")
chart.BottomRightCell = worksheet.Cells("L14")

' Customize the chart area and the plot area appearance.
chart.Fill.SetNoFill()
chart.Outline.SetSolidFill(Color.FromArgb(&H99, &H99, &H99))
chart.PlotArea.Fill.SetSolidFill(Color.FromArgb(&H22, &H99, &H99, &H99))

' Specify the position of the legend.
chart.Legend.Position = LegendPosition.Top

' Use a secondary axis.
chart.Series(1).AxisGroup = AxisGroup.Secondary

' Customize the axis scale and appearance.
Dim axis As Axis = chart.PrimaryAxes(0)
axis.Outline.SetNoFill()
axis.MajorTickMarks = AxisTickMarks.None

axis = chart.PrimaryAxes(1)
axis.Outline.SetNoFill()
axis.MajorTickMarks = AxisTickMarks.None
axis.MajorGridlines.Visible = False
axis.Scaling.AutoMax = False
axis.Scaling.AutoMin = False
axis.Scaling.Max = 1400
axis.Scaling.Min = 0

axis = chart.SecondaryAxes(1)
axis.Outline.SetNoFill()
axis.MajorTickMarks = AxisTickMarks.None
axis.Scaling.AutoMax = False
axis.Scaling.AutoMin = False
axis.Scaling.Max = 390
axis.Scaling.Min = 270

Specify the Chart View Options

There are specific settings for different chart types that affect chart appearance. Use the properties of the ChartView and View3DOptions objects to specify chart options for 2-D and 3-D charts. For example, you can adjust the distance between column clusters in the column chart by using the ChartView.GapWidth property, or apply a different color to each data marker in the series by setting the ChartView.VaryColors property to true.

The example below demonstrates how to create the clustered column chart and specify the space between each column using the ChartView.GapWidth property.

csharp
Worksheet worksheet = workbook.Worksheets["chartTask5"];
workbook.Worksheets.ActiveWorksheet = worksheet;

// Create a chart and specify its location.
Chart chart = worksheet.Charts.Add(ChartType.ColumnClustered, worksheet["B2:C8"]);
chart.TopLeftCell = worksheet.Cells["F2"];
chart.BottomRightCell = worksheet.Cells["L15"];

// Set the gap width between data series.
chart.Views[0].GapWidth = 33;
// Hide the legend.
chart.Legend.Visible = false;
vb
Dim worksheet As Worksheet = workbook.Worksheets("chartTask5")
workbook.Worksheets.ActiveWorksheet = worksheet

' Create a chart and specify its location.
Dim chart As Chart = worksheet.Charts.Add(ChartType.ColumnClustered, worksheet("B2:C8"))
chart.TopLeftCell = worksheet.Cells("F2")
chart.BottomRightCell = worksheet.Cells("L15")

' Set the gap width between data series.
chart.Views(0).GapWidth = 33
' Hide the legend.
chart.Legend.Visible = False

See Also

How to: Create and Modify a Chart

How to: Change the Color of Series Points