Chart Appearance

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.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=newSyncfusion.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.GoldenrodMe.ChartControl1.ChartArea.BorderStyle=System.Windows.Forms.BorderStyle.FixedSingleMe.ChartControl1.ChartArea.BorderWidth=1Me.chartControl1.BorderAppearance.BaseColor=System.Drawing.Color.DarkGray'This property setting will be effective, when SkinStyle is 'Frame'. Me.chartControl1.BorderAppearance.FrameThickness=NewSyncfusion.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.MaroonMe.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.

ChartPlot Area Margins

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}.

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.

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.

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).

privatevoidchartControl1_ChartAreaPaint(objectsender,PaintEventArgse){// Get the right end of the X axisPointptX=this.chartControl1.ChartArea.GetPointByValue(newChartPoint(this.chartControl1.PrimaryXAxis.Range.Max,this.chartControl1.PrimaryYAxis.Range.Min));PointFptX1=newPointF(ptX.X-7,ptX.Y-4);PointFptX2=newPointF(ptX.X,ptX.Y);PointFptX3=newPointF(ptX.X-7,ptX.Y+4);// Draws an arrow at the end of the X axise.Graphics.FillPolygon(Brushes.Black,newPointF[]{ptX1,ptX2,ptX3});// Get the top end of the Y axisPointptY=this.chartControl1.ChartArea.GetPointByValue(newChartPoint(this.chartControl1.PrimaryXAxis.Range.Min,this.chartControl1.PrimaryYAxis.Range.Max));PointFptY1=newPointF(ptY.X-4,ptY.Y+7);PointFptY2=newPointF(ptY.X,ptY.Y);PointFptY3=newPointF(ptY.X+4,ptY.Y+7);// Draws an arrow at the top of the Y Axis.e.Graphics.FillPolygon(Brushes.Black,newPointF[]{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);}

PrivateSubchartControl1_ChartAreaPaint(ByValsenderAsObject,ByValeAsPaintEventArgs)' Get the right end of the X axis DimptXAsPoint=Me.chartControl1.ChartArea.GetPointByValue(NewChartPoint(Me.chartControl1.PrimaryXAxis.Range.Max,Me.chartControl1.PrimaryYAxis.Range.Min))DimptX1AsNewPointF(ptX.X-7,ptX.Y-4)DimptX2AsNewPointF(ptX.X,ptX.Y)DimptX3AsNewPointF(ptX.X-7,ptX.Y+4)' Draws an arrow at the end of the X axis e.Graphics.FillPolygon(Brushes.Black,NewPointF(){ptX1,ptX2,ptX3})' Get the top end of the Y axis DimptYAsPoint=Me.chartControl1.ChartArea.GetPointByValue(NewChartPoint(Me.chartControl1.PrimaryXAxis.Range.Min,Me.chartControl1.PrimaryYAxis.Range.Max))DimptY1AsNewPointF(ptY.X-4,ptY.Y+7)DimptY2AsNewPointF(ptY.X,ptY.Y)DimptY3AsNewPointF(ptY.X+4,ptY.Y+7)' Draws an arrow at the top of the Y Axis. e.Graphics.FillPolygon(Brushes.Black,NewPointF(){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)EndSub

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.

ChartSeriesser1=newChartSeries("Series 1");ser1.Type=ChartSeriesType.StackingColumn;// specifying group name .ser1.StackingGroup="FirstGroup";ChartSeriesser2=newChartSeries("Series 2");ser2.Type=ChartSeriesType.StackingColumn;// specifying group name .ser2.StackingGroup="SecondGroup";ChartSeriesser3=newChartSeries("Series 3");ser3.Type=ChartSeriesType.StackingColumn;// specifying group name .ser3.StackingGroup="FirstGroup";

Dimser1AsNewChartSeries("Series 1")ser1.Type=ChartSeriesType.StackingColumn' specifying group name .ser1.StackingGroup="FirstGroup"Dimser2AsNewChartSeries("Series 2")ser2.Type=ChartSeriesType.StackingColumn' specifying group name .ser2.StackingGroup="SecondGroup"Dimser3AsNewChartSeries("Series 3")ser3.Type=ChartSeriesType.StackingColumn' specifying group name .ser3.StackingGroup="FirstGroup"

Was this page helpful?
Yes
No

Thank you for your feedback!

Thank you for your feedback and comments. We will rectify this as soon as possible!

An unknown error has occurred. Please try again.

Help us improve this page

Correct inaccurate or outdated content

Please provide additional information

Improve illustrations or images

Please provide additional information

Fix typos or broken links

Please provide additional information

Add more information

Please provide additional information

Correct inaccurate or outdated code samples

Please provide additional information

Other

Please provide additional information

I agree to the creation of a Syncfusion account in my name and to be contacted regarding this message. No further action will be taken. Please see our Privacy Policy.