Spread WPF 18
Features / Charts / Chart Elements / Axes
In This Topic
    Axes
    In This Topic

    Axes refers to the lines on a chart that help you understand the scales and dimensions of the data being displayed.

    There are three types of axes in charts:

    1. Category axis - Displays categories generally in the horizontal axis for all types of charts.
      An exception is the bar chart, where categories are shown along the Y-axis (vertical axis).
    2. Value axis - Displays series values in the vertical axis.
      An exception is the bar chart, where series values are shown along the X-axis (horizontal axis).
    3. Series axis - Displays data series for the three-dimensional charts.

    You can use the properties of the IAxis Interface to configure an axis in a chart and to customize other elements, such as Axis title, Format, Display Unit, Logarithmic Scale, Number Format, Cross, and many more.

    By default, a chart contains two primary axes - Primary Category Axis (X-axis) and Primary Value Axis (Y-axis). However, if a single set of primary axes is not sufficient to illustrate the data, such as when you are working with mixed data types, like combining a bar chart with a line chart, then secondary axes can be used. Secondary axes help you to efficiently represent datasets with different scales or units on the same chart.

    Use the ShowAxis method of the IChart interface to show the axis. This method displays the axis specified by AxisType and AxisGroup enumerations.

    Note: There are some charts, like pie charts, sunburst charts, or treemaps, do not use axes. Instead, they represent data visually through proportions or hierarchies.

    The following example code demonstrates how to configure primary and secondary axes for better data representation.

    Copy Code
    object[,] values = new object[,] { { 1, 6 }, { 2, 4 }, { 2, 4 }, { 5, 4 }, { 1, 3 } };
    var sheet1 = spreadSheet1.Workbook.ActiveSheet;
    sheet1.SetValue(0, 0, values, false);
    sheet1.Cells["A1:B5"].Select();
    sheet1.Shapes.AddChart(GrapeCity.Spreadsheet.Charts.ChartType.ColumnClustered, 100, 50, 330, 350, false);
    // Change 2nd series to line chart.
    sheet1.ChartObjects[0].Chart.Series[1].ChartType = ChartType.Line;
    // Show 2nd series in secondary axis.
    sheet1.ChartObjects[0].Chart.Series[1].AxisGroup = AxisGroup.Secondary;
    // Configure and show the secondary axis.
    sheet1.ChartObjects[0].Chart.Axes[AxisType.Value, AxisGroup.Secondary].TickLabels.NumberFormat = "0%";
    sheet1.ChartObjects[0].Chart.ShowAxis(AxisType.Category, AxisGroup.Secondary);
    
    Copy Code
    Dim values = New Object(,) {
        {1, 6},
        {2, 4},
        {2, 4},
        {5, 4},
        {1, 3}}
    Dim sheet1 = spreadSheet1.Workbook.ActiveSheet
    sheet1.SetValue(0, 0, values, False)
    sheet1.Cells("A1:B5").[Select]()
    sheet1.Shapes.AddChart(GrapeCity.Spreadsheet.Charts.ChartType.ColumnClustered, 100, 50, 330, 350, False)
    ' Change 2nd series to line chart.
    sheet1.ChartObjects(0).Chart.Series(1).ChartType = ChartType.Line
    ' Show 2nd series in secondary axis.
    sheet1.ChartObjects(0).Chart.Series(1).AxisGroup = AxisGroup.Secondary
    ' Configure and show the secondary axis.
    sheet1.ChartObjects(0).Chart.Axes(AxisType.Value, AxisGroup.Secondary).TickLabels.NumberFormat = "0%"
    sheet1.ChartObjects(0).Chart.ShowAxis(AxisType.Category, AxisGroup.Secondary)
    

    Let's discuss some of the common axis elements used to configure chart in the following sections.

    Axis Title

    Axis titles are the short text descriptions that explain the data displayed along a particular axis. They typically appear along the horizontal and vertical axes of a chart. 

    To display an axis title, you need to set the HasTitle property of the IAxis interface to true. After that, you can set the text of the axis title using the Text property from the IAxisTitle interface. Additionally, Spread for WPF also allows you to customize axis titles using various other properties of the IAxisTitle interface, such as Alignment, Orientation, TextOrientation, and so on.

    Refer to the following example code to set the title for axes.

    Copy Code
    // Set axis title.
    spreadSheet1.Workbook.ActiveSheet.ChartObjects[0].Chart.Axes[AxisType.Category].HasTitle = true;
    spreadSheet1.Workbook.ActiveSheet.ChartObjects[0].Chart.Axes[AxisType.Category].AxisTitle.Text = "Quarter";
           
    spreadSheet1.Workbook.ActiveSheet.ChartObjects[0].Chart.Axes[AxisType.Value].HasTitle = true;
    spreadSheet1.Workbook.ActiveSheet.ChartObjects[0].Chart.Axes[AxisType.Value].AxisTitle.Text = "Quantity";
    
    Copy Code
    ' Set axis title.
    spreadSheet1.Workbook.ActiveSheet.ChartObjects(0).Chart.Axes(AxisType.Category).HasTitle = True
    spreadSheet1.Workbook.ActiveSheet.ChartObjects(0).Chart.Axes(AxisType.Category).AxisTitle.Text = "Quarter"
    spreadSheet1.Workbook.ActiveSheet.ChartObjects(0).Chart.Axes(AxisType.Value).HasTitle = True
    spreadSheet1.Workbook.ActiveSheet.ChartObjects(0).Chart.Axes(AxisType.Value).AxisTitle.Text = "Quantity"                        
    

    Display Unit Label

    When configuring the chart axis in your worksheet, you can set the display unit for a specific axis and customize its label style using the properties of the IAxis interface, such as DisplayUnit, DisplayUnitCustom, and DisplayUnitLabel. If the label defined by the DisplayUnit or DisplayUnitCustom property is not shown on the specified axis, you can ensure it appears by setting the HasDisplayUnitLabel property to true. By default, this property value is true.

    Refer to the following example code to set display unit for the value axis and configure its label.

    Copy Code
    // Display unit label.
    var valueAxis = spreadSheet1.Workbook.ActiveSheet.ChartObjects[0].Chart.Axes[AxisType.Value];
    valueAxis.DisplayUnitCustom = 100; 
    valueAxis.DisplayUnitLabel.Format.Fill.ForeColor.ObjectThemeColor = GrapeCity.Core.SchemeThemeColors.Accent2;
    
    Copy Code
    ' Display unit label.
    Dim valueAxis = spreadSheet1.Workbook.ActiveSheet.ChartObjects(0).Chart.Axes(AxisType.Value)
    valueAxis.DisplayUnitCustom = 100
    valueAxis.DisplayUnitLabel.Format.Fill.ForeColor.ObjectThemeColor = GrapeCity.Core.SchemeThemeColors.Accent2
    

    Tick Labels

    While configuring the axis of a chart, you can set the position and layout of the tick-mark labels as per your choice using the various properties of the IAxis interface, such as TickLabelPosition, TickLabels, TickLabelSpacing, TickLabelSpacingIsAuto, and TickMarkSpacing.

    Refer to the following example code to configure the tick mark label's position and layout.

    Copy Code
    // Customize tick-mark labels.           
    var tickLables = spreadSheet1.Workbook.ActiveSheet.ChartObjects[0].Chart.Axes[AxisType.Value];
    tickLables.TickLabelPosition = TickLabelPosition.Low;
    tickLables.TickMarkSpacing = 2;
    tickLables.TickLabels.NumberFormat = "#,##0.00";
    tickLables.TickLabels.Font.Bold = true;
    
    Copy Code
    ' Customize tick-mark labels.           
    Dim tickLables = spreadSheet1.Workbook.ActiveSheet.ChartObjects(0).Chart.Axes(AxisType.Value)
    tickLables.TickLabelPosition = TickLabelPosition.Low
    tickLables.TickMarkSpacing = 2
    tickLables.TickLabels.NumberFormat = "#,##0.00"
    tickLables.TickLabels.Font.Bold = True
    

    Gridlines

    Gridlines refer to the horizontal and vertical lines appearing in the plot area of a chart. Only axes in the primary axis group can have gridlines.

    In charts, the major gridline and minor gridline have the same axis type. While configuring the axis of a chart, you can also set the display styles of major and minor gridlines as per your choice. Set the HasMajorGridlines and the HasMinorGridlines properties of the IAxis interface to true to display the major and minor gridlines. And then, using the properties of MajorGridlines and MinorGridlines, you can customize the desired gridline styles.

    Refer to the following example code to set minor gridlines' color.

    Copy Code
    // Display gridlines.
    var gridline = spreadSheet1.Workbook.ActiveSheet.ChartObjects[0].Chart.Axes[AxisType.Value];
    gridline.HasMinorGridlines = true;
    gridline.MinorGridlines.Border.Color = GrapeCity.Spreadsheet.Color.FromThemeColor(GrapeCity.Core.ThemeColors.Accent4);
    gridline.MinorGridlines.Border.LineStyle = BorderLineStyle.Dashed;
    
    Copy Code
    ' Display gridlines.
    Dim gridline = spreadSheet1.Workbook.ActiveSheet.ChartObjects(0).Chart.Axes(AxisType.Value)
    gridline.HasMinorGridlines = True
    gridline.MinorGridlines.Border.Color = GrapeCity.Spreadsheet.Color.FromThemeColor(GrapeCity.Core.ThemeColors.Accent4)
    gridline.MinorGridlines.Border.LineStyle = BorderLineStyle.Dashed