Chart Appearance in Windows Forms Chart

27 Nov 2020 / 24 minutes to read

The following topics under this section discusses about various properties that are used to customize the appearance of the chart.

Background Colors

EssentialChart lets you customize the background colors of different portions of the chart.

Outside the Chart Area

Use the BackInterior property of the chart to customize the background of the chart that is outside the chart area. This is usually where the legend and the chart title get rendered. By default, it is set to White color.

this.chartControl1.BackInterior = new Syncfusion.Drawing.BrushInfo(System.Drawing.Color.LightBlue);
Me.chartControl1.BackInterior = New Syncfusion.Drawing.BrushInfo(System.Drawing.Color.LightBlue)

Chart Appearance

Inside the Plot Area

Use the ChartArea.BackInterior to customize the background of the rectangular region where the points are plotted.

this.chartControl1.ChartArea.BackInterior = new Syncfusion.Drawing.BrushInfo(System.Drawing.Color.SkyBlue);
Me.chartControl1.ChartArea.BackInterior = New Syncfusion.Drawing.BrushInfo(System.Drawing.Color.SkyBlue)

Chart Appearance

Inside the Chart Area

Use the ChartInterior property of the chart to customize the background of the chart area. By default, it is set to White color.

this.chartControl1.ChartInterior = new Syncfusion.Drawing.BrushInfo(Syncfusion.Drawing.GradientStyle.Horizontal, System.Drawing.Color.PaleTurquoise, System.Drawing.Color.LightBlue);
this.chartControl1.ChartInterior = New Syncfusion.Drawing.BrushInfo(Syncfusion.Drawing.GradientStyle.Horizontal, System.Drawing.Color.PaleTurquoise, System.Drawing.Color.LightBlue)

Chart Appearance

Background Image

Chart Settings

In Windows Forms, use the BackgroundImage property to specify a custom image as the background of the chart. The image layout can also be specified using the property below.

Chart control Property Description
BackgroundImage Indicates the background image used for the control.
BackgroundImageLayout Indicates the background image layout used for the component. Default value is Tile. Possible values are:
  • Tile
  • Center
  • Stretch
  • Zoom
this.chartControl1.BackgroundImage = ((System.Drawing.Image)(resources.GetObject("chartControl1.BackgroundImage")));

this.chartControl1.BackgroundImageLayout = System.Windows.Forms.ImageLayout.Stretch;
Me.ChartControl1.BackgroundImage = CType((Resources.GetObject("chartControl1.BackgroundImage")), System.Drawing.Image)

Me.ChartControl1.BackgroundImageLayout = System.Windows.Forms.ImageLayout.Stretch

Chart Appearance

ChartArea Background Image

The chart area can also be rendered with a custom background image and this can be set using the ChartAreaBackImage property.

Chart control Property Description
ChartAreaBackImage Specifies the image to be used as the background in the chart area.
this.chartControl1.ChartAreaBackImage = myCustomImage;
Me.ChartControl1.ChartAreaBackImage = myCustomImage

Chart Appearance

Chart Interior Background Image

Chart Interior can be rendered with a custom background image using the ChartInteriorBackImage property.

this.chartControl1.ChartInteriorBackImage = myCustomImage;
Me.ChartControl1.ChartInteriorBackImage = myCustomImage

Chart Appearance

Palettes

Chart control provides options to apply different kinds of themes or palettes to your chart. You can define the custom or predefined Palette for the entire chart or series.

There are some predefined palettes such as:

  • Default
  • DefaultAlpha
  • DefaultOld
  • DefaultOldAlpha
  • EarthTone
  • Analog
  • Colorful
  • Nature
  • Pastel
  • Triad
  • WarmCold
  • GrayScale
  • SkyBlueStyle
  • RedYellowStyle
  • GreenYellowStyle
  • PinkVioletStyle
  • Metro
  • Office2016
  • Custom

Applying palette to series

Each palette applies a set of predefined brushes to the series in a predefined order. The following code example shows you how to set the Metro Palette for the chart series.

this.chartControl1.Palette = ChartColorPalette.Metro;
Me.chartControl1.Palette = ChartColorPalette.Metro

Predefined Metro palette with Winforms Chart

The following code example shows chart with GreenYellowStyle palette.

this.chartControl1.Palette = ChartColorPalette.GreenYellowStyle;
Me.chartControl1.Palette = ChartColorPalette.GreenYellowStyle

Predefined palettes in Winforms Chart

Applying custom color to segment

You can set the individual color for each segment of the series by using the Interior property of series styles collection. The following code example shows you how to set the custom color for the chart series.

  • c#
  • public class SalesData
        {
            private string year;
    
            private double sales;
    
            private Color segmentColor;
    
            public string Year
            {
                get { return year; }
    
                set { year = value; }
            }
    
            public double Sales
            {
                get { return sales; }
    
                set { sales = value; }
            }
    
            public Color SegmentColor
            {
                get { return segmentColor; }
    
                set { segmentColor = value; }
            }
    
            public SalesData(string year, double sales, Color color)
            {
                this.year = year;
    
                this.sales = sales;
    
                this.segmentColor = color;
            }
        }
  • c#
  • BindingList<SalesData> dataSource = new BindingList<SalesData>();
    	dataSource.Add(new SalesData("1999", 23, Color.Navy));
    	dataSource.Add(new SalesData("2000", 17, Color.Yellow));
    	dataSource.Add(new SalesData("2001", 22, Color.Cyan));
    	dataSource.Add(new SalesData("2002", 18, Color.Brown));
    	dataSource.Add(new SalesData("2003", 22, Color.LimeGreen));
    	dataSource.Add(new SalesData("2004", 30, Color.Orange));
    	
    	CategoryAxisDataBindModel dataSeriesModel = new CategoryAxisDataBindModel(dataSource);
    	dataSeriesModel.CategoryName = "Year";
    	dataSeriesModel.YNames = new string[] { "Sales" };
    	
    	ChartSeries chartSeries = new ChartSeries("Sales");
    	chartSeries.CategoryModel = dataSeriesModel;	
    	
    	for(int i = 0; i<dataSource.Count; i++)
    	{
    	    chartSeries.Styles[i].Interior = new BrushInfo((dataSource[i] as SalesData).SegmentColor);
    	}
    	
    	this.chartControl1.Series.Add(chartSeries);

    Predefined palettes in Winforms Chart series

    Custom Palette

    Chart control provides option which enables you to define your own color with your preferred order for the palette, using CustomPalette as shown in the following code example.

    this.chartControl1.Palette = ChartColorPalette.Custom;
    this.chartControl1.CustomPalette = new Color[] { Color.LightGreen, Color.LightBlue, Color.Aqua, Color.YellowGreen};
    Me.chartControl1.Palette = ChartColorPalette.Custom
    Me.chartControl1.CustomPalette = new Color[] { Color.LightGreen, Color.LightBlue, Color.Aqua, Color.YellowGreen}

    Custom palette in Winforms Chart

    Border and Margins

    Chart Area Border

    Borders of the chart area can be customized using the below border properties.

    Properties

    ChartArea Property Description

    BorderColor

    Indicates the border color of the chart area.

    BorderStyle

    Indicates the border style.

    BorderWidth

    Specifies the width of the border.

    BorderAppearance

    Property Description

    BaseColor

    Gets or sets the color of the base.

    FrameThickness

    Gets or sets the frame thickness. This property setting will be effective, when SkinStyle is Frame.

    Interior

    Sets the interior color of the border. This property settings will be effective when SkinStyle is Sunken, Etched and Raised.

    SkinStyle

    Specifies the border skin style.
    this.chartControl1.ChartArea.BorderColor = System.Drawing.Color.Goldenrod;
    
    this.chartControl1.ChartArea.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle;
    
    this.chartControl1.ChartArea.BorderWidth = 1;
    
    this.chartControl1.BorderAppearance.BaseColor = System.Drawing.Color.DarkGray;
    
    //This property setting will be effective, when SkinStyle is 'Frame'.
    
    this.chartControl1.BorderAppearance.FrameThickness = new Syncfusion.Windows.Forms.Chart.ChartThickness(15F, 30F, 15F, 18F);
    
    //This interior property settings will be effective when SkinStyle is Sunken, Etched and Raised.
    
    this.chartControl1.BorderAppearance.Interior.ForeColor = System.Drawing.Color.Maroon;
    
    this.chartControl1.BorderAppearance.SkinStyle = Syncfusion.Windows.Forms.Chart.ChartBorderSkinStyle.Raised;
    Me.ChartControl1.ChartArea.BorderColor = System.Drawing.Color.Goldenrod
    
    Me.ChartControl1.ChartArea.BorderStyle = System.Windows.Forms.BorderStyle.FixedSingle
    
    Me.ChartControl1.ChartArea.BorderWidth = 1
    
    Me.chartControl1.BorderAppearance.BaseColor = System.Drawing.Color.DarkGray 
    
    'This property setting will be effective, when SkinStyle is 'Frame'. 
    
    Me.chartControl1.BorderAppearance.FrameThickness = New Syncfusion.Windows.Forms.Chart.ChartThickness(15F, 30F, 15F, 18F) 
    
    'This interior property settings will be effective when SkinStyle is Sunken, Etched and Raised. 
    
    Me.chartControl1.BorderAppearance.Interior.ForeColor = System.Drawing.Color.Maroon 
    
    Me.chartControl1.BorderAppearance.SkinStyle = Syncfusion.Windows.Forms.Chart.ChartBorderSkinStyle.Raised

    Chart Area Shadow

    The chart area can also be rendered with a shadow. To turn this feature on, enable ChartAreaShadow property.

    Properties

    Chart control Property Description

    ChartAreaShadow

    Indicates whether chart area has a shadow.

    ShadowColor

    Specifies the color of the shadow.

    ShadowWidth

    Specifies the width of the shadow.
    this.chartControl1.ChartAreaShadow = true;
    
    this.chartControl1.ShadowColor = new Syncfusion.Drawing.BrushInfo(Syncfusion.Drawing.GradientStyle.ForwardDiagonal, System.Drawing.Color.AntiqueWhite, System.Drawing.Color.Goldenrod);
    
    this.chartControl1.ShadowWidth = 7;
    Me.ChartControl1.ChartAreaShadow = True
    
    Me.ChartControl1.ShadowColor = New Syncfusion.Drawing.BrushInfo(Syncfusion.Drawing.GradientStyle.ForwardDiagonal, System.Drawing.Color.AntiqueWhite, System.Drawing.Color.Goldenrod)
    
    Me.chartControl1.ShadowWidth = 7

    Chart Appearance

    Chart Area Margins

    Margin for the chart area can be controlled using ChartAreaMargins property. It indicates the margin that will be deduced from Chart Area’s representation rectangle.

    Chart control Property Description

    ChartAreaMargins

    Specifies the amount of pixels between the chart area border and the chart plot area. Default is {10, 10, 10, 10}.
    this.chartControl1.ChartAreaMargins = new Syncfusion.Windows.Forms.Chart.ChartMargins(10, 10, 10, 20);
    Me.ChartControl1.ChartAreaMargins = New Syncfusion.Windows.Forms.Chart.ChartMargins(10, 10, 10, 20)

    ChartPlot Area Margins

    The margins for ChartPlotArea is specified in ChartPlotAreaMargins property.

    ChartControl Property Description

    ChartPlotAreaMargins

    Indicates the margin of the axis labels. This margin is supported for left, Top, Right and Bottom side of the chart. This property works only if EdgeLabelsDrawingMode property is set to Shift.Default is {10, 10, 10, 10}.

    AdjustPlotAreaMargins

    Gets / sets the mode of drawing the edge labels. Default is AutoSet.

    EdgeLabelsDrawingMode

    Gets or sets the edge labels drawing mode.
    this.chartControl1.PrimaryYAxis.EdgeLabelsDrawingMode = Syncfusion.Windows.Forms.Chart.ChartAxisEdgeLabelsDrawingMode.Shift;
    
    this.chartControl1.ChartArea.AdjustPlotAreaMargins = Syncfusion.Windows.Forms.Chart.ChartSetMode.UserSet;
    
    this.chartControl1.ChartArea.ChartPlotAreaMargins.Left = 200;
    Me.chartControl1.PrimaryYAxis.EdgeLabelsDrawingMode = Syncfusion.Windows.Forms.Chart.ChartAxisEdgeLabelsDrawingMode.Shift
    
    Me.chartControl1.ChartArea.AdjustPlotAreaMargins = Syncfusion.Windows.Forms.Chart.ChartSetMode.UserSet
    
    Me.chartControl1.ChartArea.ChartPlotAreaMargins.Left = 200

    Spacing between elements

    The spacing between elements in the chart is specified using the ElementsSpacing property. For example, the space between the chart right border and legend right border if LegendPosition is set to Right.

    Properties

    Chart control Property Description

    ElementsSpacing

    Specifies the spacing between the elements in the chart. Default is 20.

    Foreground Settings

    Chart Title

    The ChartControl provides properties to customize and align the text within the control. Below are the text properties.

    Using the ChartControl.Text property, users can provide the title that appears at the top of the chart. TextPosition and TextAlignment further lets you control the relative positioning of this title.

    Here are some properties that affect the title text in the chart.

    Chart control Property Description

    Text

    Specifies the title for the chart.

    TextPosition

    Specifies the position of the chart. Possible values are,
    • Top
    • Bottom
    • Left
    • Right

    TextAlignment

    Specifies the alignment of the title with respect to the chart borders. Possible values:
    • Near
    • Center
    • Far

    Font

    Indicates the font style of the title.

    ForeColor

    Indicates the foreground color of the title.
    this.chartControl1.Text = "Illustrates Foreground Settings";
    
    this.chartControl1.Font = new System.Drawing.Font("Arial", 11.25F, System.Drawing.FontStyle.Bold);
    
    this.chartControl1.ForeColor = System.Drawing.Color.Bisque;
    
    this.chartControl1.TextPosition = ChartTextPosition.Top;
    Me.ChartControl1.Text = "Illustrates Foreground Settings"
    
    Me.chartControl1.Font = New System.Drawing.Font("Arial", 11.25F, System.Drawing.FontStyle.Bold)
    
    Me.chartControl1.ForeColor = System.Drawing.Color.Bisque
    
    Me.chartControl1.TextPosition = ChartTextPosition.Top

    Chart Appearance

    General Text Related settings

    The following text related properties affect all the text rendered in the chart.

    Properties

    Chart control Property Description

    TextRenderingHint

    Specifies the way the text is drawn. Possible values:
    • AntiAlias - each character is drawn using its anti-aliased glyph bitmap without hinting.
    • AntiAliasGridFit - each character is drawn using its anti-aliased glyph bitmap with hinting.
    • ClearTypeGridFit - each character is drawn using its glyph clear type bitmap with hinting.
    • SingleBitPerPixel - each character is drawn using its glyph bitmap.
    • SingleBitPerPixelGridFit - each character is drawn using its glyph bitmap.
    • SystemDefault - each character is drawn using its glyph bitmap with the system default rendering hint. The text will be drawn using whatever the font-smoothing settings the user had selected for the system.

    SmoothingMode

    Specifies how chart elements should be rendered. Possible values:
    • AntiAlias
    • HighQuality
    • HighSpeed
    • Invalid
    • None
    • Default

    See Also

    Axis Label Text Formatting, Appearance and Positioning (for info on changing axis label text settings)

    Customizing Label Text, Intersecting Labels, Grouping Labels, (for info on changing axis label text settings)

    Series Customization/Font, (for info on changing series text settings)

    Chart Legend (for info on changing legend text settings)

    Custom Drawing

    Essential Chart lets you render any data on the chart area. If the built-in features and functionality are not sufficient you can simply draw whatever you want on the chart surface.

    You can do so by listening to the ChartAreaPaint event. This event is raised both when a chart is painted as well as when the chart is exported to other image formats, SVG, etc. Remember to do your custom drawing in this event instead of in the Paint event (which will not be called during chart export).

    private void chartControl1_ChartAreaPaint(object sender, PaintEventArgs e)
    
    {
    
        // Get the right end of the X axis
    
        Point ptX = this.chartControl1.ChartArea.GetPointByValue(new ChartPoint(this.chartControl1.PrimaryXAxis.Range.Max, this.chartControl1.PrimaryYAxis.Range.Min));
    
    
    
        PointF ptX1 = new PointF(ptX.X - 7, ptX.Y - 4);
    
        PointF ptX2 = new PointF(ptX.X, ptX.Y);
    
        PointF ptX3 = new PointF(ptX.X - 7, ptX.Y + 4);
    
    
    
        // Draws an arrow at the end of the X axis
    
        e.Graphics.FillPolygon(Brushes.Black, new PointF[] { ptX1, ptX2, ptX3 });
    
    
    
        // Get the top end of the Y axis
    
        Point ptY = this.chartControl1.ChartArea.GetPointByValue(new ChartPoint(this.chartControl1.PrimaryXAxis.Range.Min, this.chartControl1.PrimaryYAxis.Range.Max));
    
    
    
        PointF ptY1 = new PointF(ptY.X - 4, ptY.Y + 7);
    
        PointF ptY2 = new PointF(ptY.X, ptY.Y);
    
        PointF ptY3 = new PointF(ptY.X + 4, ptY.Y + 7);
    
    
    
        // Draws an arrow at the top of the Y Axis.
    
        e.Graphics.FillPolygon(Brushes.Black, new PointF[] { ptY1, ptY2, ptY3 });
    
    
    
        // Draws a line through the center of the chart.
    
        e.Graphics.DrawLine(Pens.Gray, ptY.X, ptX.Y, ptX.X, ptY.Y);
    
    }
    Private Sub chartControl1_ChartAreaPaint(ByVal sender As Object, ByVal e As PaintEventArgs)
    
    ' Get the right end of the X axis 
    
        Dim ptX As Point = Me.chartControl1.ChartArea.GetPointByValue(New ChartPoint(Me.chartControl1.PrimaryXAxis.Range.Max, Me.chartControl1.PrimaryYAxis.Range.Min))
    
        Dim ptX1 As New PointF(ptX.X - 7, ptX.Y - 4)
    
        Dim ptX2 As New PointF(ptX.X, ptX.Y)
    
        Dim ptX3 As New PointF(ptX.X - 7, ptX.Y + 4)
    
    ' Draws an arrow at the end of the X axis 
    
        e.Graphics.FillPolygon(Brushes.Black, New PointF() {ptX1, ptX2, ptX3})
    
    ' Get the top end of the Y axis 
    
        Dim ptY As Point = Me.chartControl1.ChartArea.GetPointByValue(New ChartPoint(Me.chartControl1.PrimaryXAxis.Range.Min, Me.chartControl1.PrimaryYAxis.Range.Max))
    
        Dim ptY1 As New PointF(ptY.X - 4, ptY.Y + 7)
    
        Dim ptY2 As New PointF(ptY.X, ptY.Y)
    
        Dim ptY3 As New PointF(ptY.X + 4, ptY.Y + 7)
    
    ' Draws an arrow at the top of the Y Axis. 
    
        e.Graphics.FillPolygon(Brushes.Black, New PointF() {ptY1, ptY2, ptY3})
    
    ' Draws a line through the center of the chart. 
    
        e.Graphics.DrawLine(Pens.Gray, ptY.X, ptX.Y, ptX.X, ptY.Y)
    
    End Sub

    Chart Appearance

    See Also

    Chart Area Bounds

    Watermark Support

    EssentialChart supports watermark feature using which we can show text, image, or both as watermark inside the chart area.

    Below are the WaterMark properties with descriptions.

    Watermark Properties

    ChartAxis Property Description

    Text

    Sets the watermark text.

    Image

    Used to display image as the watermark.

    Opacity

    Sets the opacity of the watermark.

    HorizontalAlignment

    Sets watermark horizontally in the chart area.

    VerticalAlignment

    Sets watermark vertically in the chart area.
    ZOrder Used to specify whether watermark should be shown on top of the chart.
    this.chartControl1.ChartArea.WaterMark.Text="Syncfusion Chart";
    
    this.chartControl1.ChartArea.Watermark.Image = System.Drawing.Image.FromFile("Logo.bmp");
    
    this.chartControl1.ChartArea.Watermark.Opacity=60;
    
    this.chartControl1.ChartArea.Watermark.HorizontalAlignment=ChartAlignment.Near;
    
    this.chartControl1.ChartArea.Watermark.VerticalAlignment=ChartAlignment.Near;
    
    this.chartControl1.ChartArea.Watermark.ZOrder=ChartWaterMarkOrder.Behind;
    Me.chartControl1.ChartArea.WaterMark.Text="Syncfusion Chart"
    
    Me.chartControl1.ChartArea.Watermark.Image = System.Drawing.Image.FromFile("Logo.bmp")
    
    Me.chartControl1.ChartArea.Watermark.Opacity=60
    
    Me.chartControl1.ChartArea.Watermark.HorizontalAlignment=ChartAlignment.Near
    
    Me.chartControl1.ChartArea.Watermark.VerticalAlignment=ChartAlignment.Near
    
    Me.chartControl1.ChartArea.Watermark.ZOrder=ChartWaterMarkOrder.Behind;

    Chart Appearance

    Interlaced Grid Background

    Chart supports interlaced grid which draws alternative grid background in x-axis and y-axis. The color is also customizable.

    this.chartControl1.PrimaryXAxis.InterlacedGrid = true;
    
    this.chartControl1.PrimaryXAxis.InterlacedGridInterior = new Syncfusion.Drawing.BrushInfo(System.Drawing.Color.FromArgb(166, 184, 200);
    
    this.chartControl1.PrimaryYAxis.InterlacedGrid = True;
    
    this.chartControl1.PrimaryYAxis.InterlacedGridInterior = new Syncfusion.Drawing.BrushInfo(System.Drawing.Color.FromArgb(124, 144, 179));
    Me.chartControl1.PrimaryXAxis.InterlacedGrid = True
    
    Me.chartControl1.PrimaryXAxis.InterlacedGridInterior = new Syncfusion.Drawing.BrushInfo(System.Drawing.Color.FromArgb(166, 184, 200)
    
    Me.chartControl1.PrimaryYAxis.InterlacedGrid = True
    
    Me.chartControl1.PrimaryYAxis.InterlacedGridInterior = new Syncfusion.Drawing.BrushInfo(System.Drawing.Color.FromArgb(124, 144, 179))

    Chart Appearance

    The preceding image illustrates interlaced grid background for the chart.

    A sample which illustrates the Interlaced Grid for the Chart is available in the below sample installation location.

    <Sample location>\Syncfusion\EssentialStudio\Version Number\Windows\Chart.Windows\Samples\Chart Appearance\Interlaced Grid

    Minor Grid Lines

    Chart comes with minor lines support which will draw lines along the intervals provided. The appearance of these line is also customizable similar to the major grid lines.

    this.chartControl1.PrimaryXAxis.DrawMinorGrid = true;
    
    this.chartControl1.PrimaryXAxis.MinorGridLineType.DashStyle = DashStyle.DashDotDot;
    
    this.chartControl1.PrimaryXAxis.MinorGridLineType.Width = 2;
    
    this.chartControl1.PrimaryXAxis.MinorGridLineType.ForeColor = Color.Red;
    
    chartControl1.PrimaryXAxis.SmallTicksPerInterval = 1;
    Me.chartControl1.PrimaryXAxis.DrawMinorGrid = True
    
    Me.chartControl1.PrimaryXAxis.MinorGridLineType.DashStyle = DashStyle.DashDotDot
    
    Me.chartControl1.PrimaryXAxis.MinorGridLineType.Width = 2
    
    Me.chartControl1.PrimaryXAxis.MinorGridLineType.ForeColor = Color.Red
    
    chartControl1.PrimaryXAxis.SmallTicksPerInterval = 1

    Chart Skins

    Chart Control has some pre-defined skins, which can be controlled through a single property setting. EssentialChart control allows the user to customize its appearance by applying pre-defined Interiors.

    Some of the available skins are:

    • Office2007Black
    • Office2007Blue
    • Office2007Silver
    • Almond
    • Blend
    • Blueberry
    • Marble
    • Midnight
    • Monochrome
    • Olive
    • Sandune
    • Turquoise
    • Vista
    • VS2010
    this.chartControl1.Skins = Skins.Office2007Blue;
    Me.chartControl1.Skins = Skins.Office2007Blue

    The following output is displayed when the Skins value is set to Office2007 Black.

    Chart Appearance

    The following output is displayed when the Skins value is set to Office2007 Blue.

    Chart Appearance

    The following output is displayed when the Skins value is set to Office2007 Silver.

    Chart Appearance

    The following output is displayed when the Skins value is set to Almond.

    Chart Appearance

    The following output is displayed when the Skins value is set to Blend.

    Chart Appearance

    The following output is displayed when the Skins value is set to Blueberry.

    Chart Appearance

    The following output is displayed when the Skins value is set to Marble.

    Chart Appearance

    The following output is displayed when the Skins value is set to Midnight.

    Chart Appearance

    The following output is displayed when the Skins value is set to Monochrome.

    Chart Appearance

    The following output is displayed when the Skins value is set to Olive.

    Chart Appearance

    The following output is displayed when the Skins value is set to Sandune.

    Chart Appearance

    The following output is displayed when the Skins value is set to Turquoise.

    Chart Appearance

    The following output is displayed when the Skins value is set to Vista.

    Chart Appearance

    The following output is displayed when the Skins value is set to VS2010.

    Chart Appearance

    ChartSeries ser1 = new ChartSeries("Series 1");
    
    ser1.Type = ChartSeriesType.StackingColumn;
    
    // specifying group name .
    
    ser1.StackingGroup = "FirstGroup";
    
    ChartSeries ser2 = new ChartSeries("Series 2");
    
    ser2.Type = ChartSeriesType.StackingColumn;
    
    // specifying group name .
    
    ser2.StackingGroup = "SecondGroup";
    
    ChartSeries ser3 = new ChartSeries("Series 3");
    
    ser3.Type = ChartSeriesType.StackingColumn;
    
    // specifying group name .
    
    ser3.StackingGroup = "FirstGroup";
    Dim ser1 As New ChartSeries("Series 1")
    
    ser1.Type = ChartSeriesType.StackingColumn
    
    ' specifying group name .
    
    ser1.StackingGroup = "FirstGroup"
    
    Dim ser2 As New ChartSeries("Series 2")
    
    ser2.Type = ChartSeriesType.StackingColumn
    
    ' specifying group name .
    
    ser2.StackingGroup = "SecondGroup"
    
    Dim ser3 As New ChartSeries("Series 3")
    
    ser3.Type = ChartSeriesType.StackingColumn
    
    ' specifying group name .
    
    ser3.StackingGroup = "FirstGroup"