How can I help you?
Migrating from Chart to SfChart in WPF Charts (SfChart)
27 Apr 202624 minutes to read
SfChart is a new chart introduced in 11.1 version. SfChart is a very high performance chart enriched with several business features. This section helps you to identify equivalent Chart features/ APIs in SfChart.
Adding Reference
Chart assembly Name: Syncfusion.Chart.Wpf assembly
SfChart assembly Name: Syncfusion.SfChart.WPF assembly
The following code example illustrates xmlns namespace for Chart. You can include the Syncfusion schema in WPF and both the charts are available in the WPF schema.
Chart
xmlns:syncfusion="https://schemas.syncfusion.com/wpf"SfChart
xmlns:syncfusion="https://schemas.syncfusion.com/wpf"
(or)
xmlns:syncfusion="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"Initialization
One of the biggest differences between Chart and SfChart is, Chart is constructed using one or more ChartArea. So, logically ChartArea is equivalent to SfChart.
Note: In SfChart, you can split the area into multiple plotting areas using RowDefinitions and ColumnDefinitions API.
Following code example illustrates the initialization of Chart with ChartArea,
<syncfusion:Chart>
<syncfusion:ChartArea
BorderBrush="Green"
BorderThickness="5"
Background="Gray"
SideBySideSeriesPlacement="True"/>
</syncfusion:Chart>Chart chart = new Chart();
ChartArea area = new ChartArea();
area.Background = Brushes.Gray;
area.BorderBrush = Brushes.Red;
area.BorderThickness = new Thickness(5);
area.SideBySideSeriesPlacement = true;
chart.Areas.Add(area);Following code example illustrates the initialization of SfChart that is equivalent to the above code example.
<syncfusion:SfChart
Header="ChartArea"
AreaBackground="Red"
AreaBorderBrush="Gray"
AreaBorderThickness="5"
SideBySideSeriesPlacement="True">
</syncfusion:SfChart>SfChart chart = new SfChart();
chart.AreaBackground = Brushes.Gray;
chart.AreaBorderBrush = Brushes.Red;
chart.AreaBorderThickness = new Thickness(5);
chart.SideBySideSeriesPlacement = true;The following table illustrates the API comparison between ChartArea and SfChart.
| ChartArea | SfChart | Description |
|---|---|---|
| Header | Header | Gets or sets the header name for Chart |
| Background | AreaBackground | Gets or sets the Chart area background (rectangle bounds excluding Axis and legend) |
| BorderBrush | AreaBorderBrush | Gets or sets the Chart area border brush. |
| BorderThickness | AreaBorderThickness | Gets or sets the Chart area border thickness. |
| SideBySideSeriesPlacement | SideBySideSeriesPlacement | Gets or sets Boolean value whether series is placed side by side or not. |
| Series | Series | Gets or sets ChartSeriesCollection to Chart. |
| ShowGridLines | - | Gets or sets Boolean value for showing the gridlines for both axes. |
| EnableRangeSelection | - | Gets or sets Boolean value that enables you to select a particular range of a primary axis by using two cursors. |
| StartValue | - | Gets or sets start value for range selection |
| EndValue | - | Gets or sets end value for range selection |
| ShowLegend | - | Gets or sets Boolean value for showing the chart legends. |
| SplitterColor | - | Gets or sets color for SyncChartAreas splitter |
| SplitterPosition | - | Gets or sets position for SyncChartAreas splitter |
| SplitterStroke | - | Gets or sets stroke for SyncChartAreas splitter |
| SplitterVisibility | - | Gets or sets visibility for SyncChartAreas splitter |
| SplitterWidth | - | Gets or sets width for SyncChartAreas splitter |
Legend
The Legends are same for both Chart and SfChart except that you can add multiple Legends for the SfChart.
The Legend property in ChartArea accepts single Legend for whole Chart. In case of SfChart, the Legend property of
the SfChart is an object that accepts one or more Legends based on your requirement.
For more details
The following code example illustrates the usage of Legend in Chart and SfChart.
Chart
<syncfusion:ChartArea>
<syncfusion:ChartArea.Legend>
<syncfusion:ChartLegend
syncfusion:Chart.Dock="Floating"
Orientation="Vertical"
OffsetX="200" OffsetY="200"
ItemTemplate="{StaticResourcelegend}"
CheckBoxVisibility="Collapsed"/>
</syncfusion:ChartArea.Legend>
</syncfusion:ChartArea>ChartArea area = new ChartArea();
ChartLegend legend = new ChartLegend();
Chart.SetDock(legend, ChartDock.Floating);
legend.Orientation = Orientation.Vertical;
legend.OffsetX = 200d;
legend.OffsetY = 200d;
legend.CheckBoxVisibility = Visibility.Visible;
area.Legend = legend;
chart.Areas.Add(area)SfChart
<syncfusion:SfChart>
<syncfusion:SfChart.Legend>
<syncfusion:ChartLegend
ItemTemplate="{StaticResource legend}"
CheckBoxVisibility="Visible"
LegendPosition="Outside"
Orientation="Vertical"
OffsetY="200"
OffsetX="200"
DockPosition="Floating">
</syncfusion:ChartLegend>
</syncfusion:SfChart.Legend>
</syncfusion:SfChart>SfChart chart = new SfChart();
ChartLegend legend = new ChartLegend();
legend.ItemTemplate = grid.Resources["legend"] as DataTemplate;
legend.CheckBoxVisibility = Visibility.Visible;
legend.OffsetX = 200d;
legend.OffsetY = 200d;
legend.Orientation = ChartOrientation.Vertical;
legend.DockPosition = ChartDock.Top;
legend.LegendPosition = LegendPosition.Outside;
chart.Legend = legend;The following table illustrates the API comparison between ChartArea and SfChart.
| ChartLegend (Chart) | ChartLegend (SfChart) | Description |
|---|---|---|
| CheckBoxVisibility | CheckBoxVisibility | Gets or sets visibility for Legend check box |
| Orientation | Orientation | Gets or sets orientation for Legends |
| chart:Chart.Dock | DockPosition | Gets or sets docking position for Legends that decides the positioning for Legends. |
| OffsetX | OffsetX | Gets or sets X-axis offset value for Legends horizontal placement. |
| OffsetY | OffsetY | Gets or sets Y-axis offset value for Legends vertical placement. OffsetX and OffsetY are applicable when DockPosition is set as 'Floating'. |
| ItemTemplate | ItemTemplate | Gets or sets template for the Legend items. |
| IconVisibility | IconVisibility | Gets or sets the visibility of the Legend icon(s). |
| IconHeight | IconHeight | Gets or sets the double value that represents the Legend icon(s) width. |
| IconHeight | IconHeight | Gets or sets the double value that represents that Legend icon(s) height. |
| ItemMargin | ItemMargin | Gets or sets the margin of Legend items. |
| ElementMargin | Margin | Gets or sets the margin for Legend element. |
| ShowSymbol | IconVisibility | Gets or sets the visibility for Legend icon symbol. |
Axis
The class design for Axis is different for both ChartArea and SfChart. In ChartArea, Axis is the instance of ChartAxis type and its type is mentioned in ValueType property as in the following code example.
<syncfusion:ChartArea.PrimaryAxis>
<syncfusion:ChartAxis ValueType="DateTime"/>
</syncfusion:ChartArea.PrimaryAxis>In SfChart, Axis can be an instance of NumericalAxis, DateTimeAxis, CategoryAxis, LogarithmicAxis, TimeSpanAxis or DateTimeCategoryAxis. Class name represents the type of data it can plot. For example, NumericalAxis can plot numeric values and DateTimeAxis can plot DateTime values. Following code example illustrates this,
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:DateTimeAxis Header="X-Axis"/>
</syncfusion:SfChart.PrimaryAxis>The following table compares the APIs,
| ChartAxis | NumericalAxis, DateTimeAxis, CategoryAxis, LogarithmicAxis, TimeSpanAxis and DateTimeCategoryAxis | Description |
|---|---|---|
| Header | Header | Gets or sets the header for the chart axis. |
| IntersectAction | LabelsIntersectAction | Gets or sets a value that determines how to avoid overlapping of labels. |
| RangePadding | RangePadding | Gets or sets the range padding for chart axis. |
| IsAutoSetRange, Range | Minimum, Maximum | Gets or sets range for chart axis |
| Interval | Interval | Gets or sets value for axis label |
| LabelPosition | LabelPosition | Gets or sets placement position for label. |
| AxisVisibility | Visibility | Gets or sets the visibility for Chart Axis. |
| EnableAutoIntervalOnZooming | EnableAutoIntervalOnZooming | Gets or sets a Boolean value to enable auto interval calculation while zooming |
| IsInversed | IsInversed | Gets or sets a value that indicates whether data is plotted reversely or not. |
| TickLinesPosition | TickLinesPosition | Gets or sets tick line position |
| TickLineSize | TickLineSize | Gets or sets tick line size |
| SmallTickLineSize | SmallTickLineSize | Gets or sets small tick line size |
| SmallTickLinesPosition | Gets or sets small tick line position | |
| SmallTicksPerInterval | SmallTicksPerInterval | Gets or sets value to enable small ticks. |
| LabelRotateAngle | LabelRotateAngle | Gets or sets label rotation angle. |
| EdgeLabelsDrawingMode | EdgeLabelsDrawingMode | Gets or sets position for edge labels. |
| DesiredIntervalsCount | DesiredIntervalsCount | Gets or sets desired interval count. |
| OpposedPosition | OpposedPosition | Gets or sets a value that indicates axis is positioned opposite to its default position. |
| LabelsSource | LabelsSource | Gets or sets label source for custom labels. |
| ContentPath | ContentPath | Gets or sets content path property value. |
| PositionPath | PositionPath | Gets or sets position path property value. |
| LabelsPostfix | PostfixLabelTemplate | Gets or sets post fix label template. |
| LabelsPrefix | PrefixLabelTemplate | Gets or sets prefix label template |
| LabelDateTimeFormat, LabelLogarithmicFormat LabelTimeSpanFormat | LabelFormat | Gets or sets axis label format. |
| LabelTemplate | LabelTemplate | Gets or sets label template. |
| chart:ChartArea.ShowGridLines | ShowGridline | Gets or sets a value to enable grid lines. |
| chart:ChartArea.SmallGridLineStroke | MajorGridLineStyle | Gets or sets major grid line style. |
| chart:ChartArea.SmallGridLineStroke | MajorTickLineStyle | Gets or sets tick line style. |
| ZoomFactor | ZoomFactor | Gets or sets the zoom factor value. |
| ZoomPosition | ZoomPosition | Gets or sets the zoom position value. |
Chart
<chart:ChartArea>
<chart:ChartArea.PrimaryAxis>
<chart:ChartAxis
ValueType="DateTime"
IntersectAction="Hide"
IsAutoSetRange="False"
DateTimeRange="2010/01/01,2011/01/01"
SmallTickSize="6"
SmallTicksPerInterval="5"
TickLinesPosition="Outside"
TickSize="10"
LabelsSource="{Binding power}"
ContentPath="Content"
PositionPath="Position"
LabelsPostfix="{StaticResource postLabel}"
LabelsPrefix="{StaticResource preLabel}"
DesiredIntervalsCount="5"
LabelDateTimeFormat="MM:dd:yy"
RangePadding="Normal"
LabelPosition="Outside"
Header="X-Axis"
EdgeLabelsDrawingMode="Center"
IsInversed="False"
LabelRotateAngle="0"
AxisVisibility="Visible"
EnableAutoIntervalOnZooming="False"
ZoomFactor="1"
ZoomPosition="1"
chart:ChartArea.ShowGridLines="True"/>
</chart:Chart.PrimaryAxis>
</chart:ChartArea>ChartArea area = new ChartArea();
ChartAxis primaryAxis = new ChartAxis();
primaryAxis.ValueType = ChartValueType.DateTime;
primaryAxis.IntersectAction = ChartLabelIntersectAction.Hide;
primaryAxis.IsAutoSetRange = false;
primaryAxis.DateTimeRange = new DateTimeRange(
new DateTime(2010, 01, 01),
new DateTime(2011, 01, 01)
);
primaryAxis.SmallTickSize = 6d;
primaryAxis.SmallTicksPerInterval = 5;
primaryAxis.TickLinesPosition = AxisPositions.Outside;
primaryAxis.TickSize = 10d;
primaryAxis.LabelsSource = viewmodel.power;
primaryAxis.ContentPath = "Content";
primaryAxis.PositionPath = "Position";
primaryAxis.DesiredIntervalsCount = 5;
primaryAxis.LabelDateTimeFormat = "MM:dd:yy";
primaryAxis.RangePadding = ChartRangePaddingType.Normal;
primaryAxis.LabelPosition = LabelPositions.Outside;
primaryAxis.Header = "X-Axis";
primaryAxis.EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Center;
primaryAxis.IsInversed = false;
primaryAxis.AxisVisibility = Visibility.Visible;
primaryAxis.ZoomFactor = 1d;
primaryAxis.ZoomPosition = 0d;
ChartArea.SetShowGridLines(primaryAxis, true);
primaryAxis.ShowGridline = true;
area.PrimaryAxis = primaryAxis;SfChart
<sfchart:SfChart>
<sfchart:SfChart.PrimaryAxis>
<sfchart:DateTimeAxis
Header="X-Axis"
OpposedPosition="True"
RangePadding="Auto"
DesiredIntervalsCount="5"
IsInversed="False"
LabelFormat="MM/dd/yy"
RangePadding="Auto"
Interval="1"
Minimum="2010/01/01"
Maximum="2011/01/10"
IntervalType="Years"
LabelsPosition="Outside"
LabelsIntersectAction="Hide"
TickLinesPosition="Outside"
Visibility="Visible"
EnableScrollBar="False"
EdgeLabelsDrawingMode="Center"
EnableAutoIntervalOnZooming="True"
ShowTrackBallInfo="True"
PlotOffset="20"
LabelsSource="{Binding power}"
ShowGridLines="True"
ContentPath="Content"
PositionPath="Postion"
PostfixLabelTemplate="{StaticResource postLabel}"
PrefixLabelTemplate="{StaticResource preLabel}"
SmallTickLinesPosition="Outside"
SmallTicksPerInterval="5"
TickLineSize="6" ZoomFactor="1"
ZoomPosition="0"/>
</sfchart:SfChart.PrimaryAxis>
</sfchart:SfChart>SfChart chart = new SfChart();
DateTimeAxis primaryAxis = new DateTimeAxis();
primaryAxis.Interval = 1;
primaryAxis.LabelFormat = "MM/dd/yy";
primaryAxis.IntervalType = DateTimeIntervalType.Years;
primaryAxis.IsInversed = false;
primaryAxis.LabelsPosition = AxisElementPosition.Outside;
primaryAxis.LabelsIntersectAction = AxisLabelsIntersectAction.Hide;
primaryAxis.TickLinesPosition = AxisElementPosition.Outside;
primaryAxis.Visibility = Visibility.Visible;
primaryAxis.EnableScrollBar = false;
primaryAxis.EdgeLabelsDrawingMode = EdgeLabelsDrawingMode.Center;
primaryAxis.RangePadding = DateTimeRangePadding.Auto;
primaryAxis.PlotOffset = 10d;
primaryAxis.Header = "X-Axis";
primaryAxis.ShowTrackBallInfo = true;
primaryAxis.DesiredIntervalsCount = 5;
primaryAxis.OpposedPosition = true;
primaryAxis.SmallTickLineSize = 6d;
primaryAxis.SmallTickLinesPosition = AxisElementPosition.Outside;
primaryAxis.SmallTicksPerInterval = 5;
primaryAxis.TickLineSize = 10d;
primaryAxis.TickLinesPosition = AxisElementPosition.Outside;
primaryAxis.LabelsSource = viewmodel.power;
primaryAxis.ContentPath = "Content";
primaryAxis.PositionPath = "Position";
primaryAxis.ShowGridLines = true;
primaryAxis.OpposedPosition = true;
primaryAxis.Minimum = new DateTime(2011, 1, 1);
primaryAxis.Maximum = new DateTime(2012, 1, 1);
primaryAxis.ZoomFactor = 1d;
primaryAxis.ZoomPosition = 0d;
chart.PrimaryAxis = primaryAxis;Following code example illustrates how to customize gridlines.
Chart
<chart:ChartArea.GridLineStroke>
<Pen Brush="#c6c6c6">
<Pen.DashStyle>
<DashStyle Dashes="1,3"/>
</Pen.DashStyle>
</Pen>
</chart:ChartArea.GridLineStroke>Pen pen = new Pen();
DashStyle style = new DashStyle()
{
Dashes = new DoubleCollection(3)
};
pen.DashStyle = style;
pen.Brush = Brushes.Red;
ChartArea.SetGridLineStroke(primaryAxis, pen);SfChart
<sfchart:NumericalAxis.MajorGridLineStyle>
<Style TargetType="Line">
<Setter Property="StrokeDashArray" Value="1,3"/>
<Setter Property="Stroke" Value= "#c6c6c6"/>
</Style>
</sfchart:NumericalAxis.MajorGridLineStyle>Style lineStyle = new Style(typeof(Line));
lineStyle.Setters.Add(
new Setter(
Line.StrokeDashArrayProperty,
new DoubleCollection() { 1, 3 }
)
);
lineStyle.Setters.Add(
new Setter(
Line.StrokeProperty,
Brushes.Red
)
);
primaryAxis.MajorGridLineStyle = lineStyle;Series
Like Axis, ChartSeries architecture is also different for Chart and SfChart. Instead of specifying the respective ChartType, you can create the instance of required series (Class name itself represents the type of series) in SfChart as in the following code example.
Chart
<syncfusion:ChartArea>
<syncfusion:ChartSeries
Type="Line"
ShowToolTip="True"
Interior="Blue"
ShowSmartLabels="True"
LegendIcon="Diamond"
AdornmentIntersectAction="AdjustAroundPoints"
ColorEach="True"
Palette="Metro"
StrokePalette="Metro"
IsRotated="False"
IsIndexed="True"
IsVisibleOnLegend="True"
IsSortData="False"
SortBy="X"
SortDirection="Ascending"
ShowDataLabels="True"
EnableEffects="True"
IsVisible="True"
StrokeThickness="3"
EnableAnimation="True"
AnimateOption="Fade"
AnimateOneByOne="True"
ShowEmptyPoints="True"
EmptyPointInterior="Purple"
EmptyPointValue="Average"
EmptyPointStyle="Interior"
DataSource="{Binding power}"
BindingPathX="Year"
BindingPathsY="Sports"
Label="LineSeries">
<syncfusion:ChartSeries.YAxis>
<syncfusion:ChartAxis IsAutoSetRange="False" Range="20,50"/>
</syncfusion:ChartSeries.YAxis>
</syncfusion:ChartSeries>
</syncfusion:ChartArea>ChartArea area = new ChartArea();
ChartSeries lineseries = new ChartSeries();
lineseries.BindingPathX = "Year";
lineseries.Label = "LineSeries";
lineseries.BindingPathsY = new string[] { "Sports" };
lineseries.DataSource = viewmodel.power;
lineseries.ShowToolTip = true;
lineseries.ShowEmptyPoints = true;
lineseries.EmptyPointValue = EmptyPointValue.Average;
lineseries.EmptyPointStyle = EmptyPointStyle.Interior;
lineseries.EmptyPointInterior = Brushes.Purple;
lineseries.EnableAnimation = true;
lineseries.IsSortData = true;
lineseries.IsRotated = true;
lineseries.IsVisible = true;
lineseries.SortBy = SortingAxis.X;
lineseries.SortDirection = Direction.Ascending;
lineseries.YAxis = new ChartSeries() { IsAutosetRange = false, Range = new DoubleRange(20,50) };
lineseries.ShowSmartLabels = true;
area.Series.Add(lineseries);SfChart
<syncfusion:SfChart>
<syncfusion:LineSeries
ItemsSource="{Binding power}"
XBindingPath="Year"
YBindingPath="Sports"
Palette="Metro"
AnimationDuration="00:00:03"
SortBy="X"
SortDirection="Ascending"
EnableSegmentDragging="True"
LegendIcon="Diamond"
VisibilityOnLegend="Visible"
Label="LineSeries"
IsSeriesVisible="True"
IsSortData="True"
IsTransposed="True"
EnableAnimation="True"
ShowTooltip="True"
StrokeThickness="3"
ShowEmptyPoints="True"
EmptyPointValue="Average"
EmptyPointInterior="Purple"
EmptyPointStyle="Interior">
<syncfusion:LineSeries.YAxis>
<syncfusion:NumericalAxis Minimum="20" Maximum="50"/>
</syncfusion:LineSeries.YAxis>
</syncfusion:LineSeries>
</syncfusion:SfChart>SfChart chart = new Sfchart();
LineSeries lineseries = new LineSeries();
lineseries.ItemsSource = viewmodel.power;
lineseries.XBindingPath = "Year";
lineseries.YBindingPath = "Sports";
lineseries.Label = "LineSeries";
lineseries.Interior = Brushes.Brown;
lineseries.ShowTooltip = true;
lineseries.ShowEmptyPoints = true;
lineseries.EmptyPointInterior = Brushes.Purple;
lineseries.EmptyPointStyle = EmptyPointStyle.Interior;
lineseries.EmptyPointValue = EmptyPointValue.Average;
lineseries.StrokeThickness = 3;
lineseries.EnableAnimation = true;
lineseries.AnimationDuration = new TimeSpan(00, 00, 03);
lineseries.IsSeriesVisible = true;
lineseries.IsSortData = true;
lineseries.IsTransposed = true;
lineseries.SortBy = SortingAxis.X;
lineseries.YAxis = new NumericalAxis() { Minimum = 20, Maximum = 50 };
lineseries.SortDirection = Direction.Ascending;
chart.Series.Add(lineseries);The following table illustrates the API comparison for series,
| ChartSeries | LineSeries, ColumnSeries, SplineSeries … etc., | Description |
|---|---|---|
| Label | Label | Gets or sets series label name. |
| ShowTooltip | ShowTooltip | Gets or sets a value to enable tooltip. |
| EnableAnimation | EnableAnimation | Gets or sets a value to enable animation. |
| AnimationDuration | AnimationDuration | Gets or sets timespan for animation duration. |
| AnimateOneByOne | - | Gets or sets a value whether to animate the series one by one or not. |
| AnimateOption | - | Gets or sets enum for animation direction. |
| ColorEach | Palette | Gets or sets a value that indicates whether to color each segment differently or not. |
| BindingPathX | XBindingPath | Gets or sets x axis binding property. |
| BindingPathsY | YBindingPath,High,Low,Open,Close,Size | Gets or sets y axis binding property. In Chart, it is a collection of y value paths whereas in SfChart, each y path is represented by individual properties. For example, Candle, HiLoOpenClose series contains four y values, each value is represented by High, Low, Open and Close properties.HiLo contains two y values represented by High and Low properties.Bubble series contains two y values represented by YBindingPath and Size properties.Other series that contains one y value is represented by YBindingPath property. |
| DataSource | ItemsSource | Gets or sets items source for chart series. |
| Interior | Interior | Gets or sets interior color for chart series. |
| ShowEmptyPoints | ShowEmptyPoints | Gets or sets a value that indicates whether to show empty points in different style or color based on EmptyPointValue and EmptyPointValue. |
| EmptyPointValue | EmptyPointValue | Gets or sets a value that indicates whether to represent empty point as average of previous and next value or just zero. |
| EmptyPointInterior | EmptyPointInterior | Gets or sets empty point value interior. |
| IsSortData | IsSortData | Gets or sets a value to enable sorting in chart series. |
| SortBy | SortBy | Sorting the series based on X or Y axis value. |
| SortDirection | SortDirection | Sorting the chart series based on direction like ascending or descending. |
| ShowSmartLabels | EnableSmartLabels | Gets or sets a value whether to avoid the adornment intersection. In SfChart EnableSmartLabels is used for Pie and Doughnut series. |
| EnableEffects | - | Gets or sets effect for Chart series. |
| Unit | - | Gets or sets legend unit. |
| UnitVisibility | - | Gets or sets legend unit visibility |
| chart:ChartPieType.ExplodedAll chart:ChartDoughnutType.ExplodedAll | ExplodedAll | Gets or sets a value whether to explode all the segments of pie and doughnut chart |
| chart:ChartPieType.ExplodedIndex chart:ChartDoughnutType.ExplodedIndex | ExplodedIndex | Gets or sets the index of the segment to be exploded. |
| chart:ChartPieType.ExplodeRadius chart: ChartDoughnutType.ExplodeRadius | ExplodeRadius | Gets or sets explode radius for all the segment of pie, doughnut chart. |
| ChartPyramidType.GapRatio | GapRatio | Gets or sets gap ratio for pyramid series. |
| ChartPyramidType.PyramidMode | PyramidMode | Gets or sets mode for pyramid series. |
Adornments
The Adornments are same as Chart and you can define the Adornments inside the Series like Chart.
Chart
<syncfusion:ChartSeries>
<syncfusion:ChartSeries.ChartAdornmentInfo>
<syncfusion:ChartAdornmentInfo
SegmentLabelContent="YValue"
SegmentShowLine="True"
Visible="True"
Symbol="Ellipse"
SymbolInterior="Red"
SymbolStroke="Red"
SymbolHeight="15"
SymbolWidth="15"
SegmentLabelRotation="20"
AdornmentsPosition="Top"/>
</syncfusion:ChartSeries.ChartAdornmentInfo>
</syncfusion:ChartSeries>ChartSeries lineseries = new ChartSeries();
ChartAdornmentInfo adornment = new ChartAdornmentInfo();
adornment.Visible = true;
adornment.Symbol = Symbol.Ellipse;
adornment.SymbolInterior = Brushes.Red;
adornment.SymbolWidth = 15d;
adornment.SymbolHeight = 15d;
adornment.SegmentLabelContent = LabelContent.YValue;
adornment.SegmentShowLine = true;
adornment.SegmentLabelRotation = 30d;
adornment.AdornmentsPosition = AdornmentsPosition.Top;
lineseries.AdornmentsInfo = adornment;SfChart
<syncfusion:LineSeries>
<syncfusion:LineSeries.ChartAdornmentInfo>
<syncfusion:ChartAdornmentInfo
Symbol="Cross"
UseSeriesPalette="True"
AdornmentsPosition="Top"
ShowConnectorLine="True"
ConnectorHeight="10"
SegmentLabelContent="YValue"
ShowLabel="True"
SymbolStroke="Red"
SymbolHeight="20"
SymbolWidth="20"
SymbolInterior="Red"/>
</syncfusion:LineSeries.ChartAdornmentInfo>
</syncfusion:LineSeries>LineSeries lineseries = new LineSeries();
ChartAdornmentInfo adornment = new ChartAdornmentInfo();
adornment.ShowLabel = true;
adornment.Symbol = ChartSymbol.Cross;
adornment.SymbolHeight = 20d;
adornment.SymbolWidth = 20d;
adornment.SymbolInterior = Brushes.Red;
adornment.SymbolStroke = Brushes.Red;
adornment.SegmentLabelContent = LabelContent.YValue;
adornment.AdornmentsPosition = AdornmentsPosition.Top;
adornment.ShowConnectorLine = true;
adornment.ConnectorHeight = 10d;
adornment.UseSeriesPalette = true;
lineseries.AdornmentsInfo = adornment;The following table illustrates the API comparison for Adornments.
| ChartAdornmentInfo (Chart) | ChartAdornmentInfo (SfChart) | Description |
|---|---|---|
| Visible | ShowLabel | Gets or sets a value whether to show Adornment label or not. |
| Symbol | Symbol | Gets or sets symbol for Adornment. |
| SymbolInterior | SymbolInterior | Gets or sets color for Adornment. |
| SymbolStroke | SymbolStroke | Gets or sets stroke color for Adornment symbol. |
| AdornmentsPosition | AdornmentsPosition | Gets or sets position for Adornment. |
| LabelTemplate | LabelTemplate | Gets or sets template for label. |
| SymbolTemplate | SymbolTemplate | Gets or sets template for symbol. |
| SegmentLabelContent | SegmentLabelContent | Gets or sets Adornment segment label content. |
| ConnectorTemplate | ConnectorHeight,ConnectorLineStyle | Customizing the Adornment connector line. |
| UseSeriesPalette | Gets or sets color for each connector line | |
| SegmentShowLine | ShowConnectorLine | Gets or sets a value to enable connector line. |
Interactive Cursor
The InteractiveCursor is represented as ChartCrosshairBehavior and ChartTrackballBehavior in SfChart. Following code example illustrates this,
Chart
<syncfusion:ChartArea>
<syncfusion:ChartArea.InteractiveCursors>
<syncfusion:InteractiveCursor
VerticalLabelVisibility="Visible"
HorizontalLabelVisibility="Visible"
IsBindWithMouseMove="True"
IsBindWithSegment="False"
OffsetX="100"
OffsetY="100"/>
</syncfusion:ChartArea.InteractiveCursors>
</syncfusion:ChartArea>ChartArea area= new ChartArea();
InteractiveCursor incCursor = new InteractiveCursor();
incCursor.VerticalLabelVisibility = Visibility.Visible;
incCursor.HorizontalLabelVisibility = Visibility.Visible;
incCursor.IsBindWithMouseMove = true;
incCursor.IsBindWithSegment = false;
incCursor.OffsetX = 100d;
incCursor.OffsetY = 100d;
area.InteractiveCursors.Add(incCursor);SfChart
<syncfusion:SfChart>
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartCrossHairBehavior HorizontalAxisLabelAlignment="Center" VerticalAxisLabelAlignment="Center"/>
</syncfusion:SfChart.Behaviors>
</syncfusion:SfChart>SfChart chart = new SfChart();
ChartCrossHairBehavior crosshair = new ChartCrossHairBehavior();
crosshair.VerticalAxisLabelAlignment = ChartAlignment.Center;
crosshair.HorizontalAxisLabelAlignment = ChartAlignment.Center;
chart.Behaviors.Add(crosshair);Zooming and Panning
The Zooming and Panning are achieved using the ChartZoomPanBehavior in SfChart as in the following code example.
Chart
<syncfusion:ChartArea
EnableZoomOnScroll="True"
ZoomAllAxes="True"
chart:ChartZoomingToolkit.ZoomingToolkitVisibility="Visible"
EnableMouseDragZooming="True">
</syncfusion:ChartArea>ChartArea area= new ChartArea();
area.ZoomAllAxes = true
area.EnableZoomOnScroll = true;
ChartZoomingToolkit.SetZoomingToolkitVisibility(area, Visibility.Visible);SfChart
<syncfusion:SfChart>
<syncfusion:SfChart.Behaviors>
<syncfusion:ChartZoomPanBehavior
ZoomMode="XY"
EnablePinchZooming="False"
ZoomRelativeToCursor="False"
EnableMouseWheelZooming="True"
EnableSelectionZooming="False"
EnablePanning="True">
</syncfusion:ChartZoomPanBehavior>
</syncfusion:SfChart.Behaviors>
</syncfusion:SfChart>SfChart chart = new SfChart();
ChartZoomPanBehavior zoom = new ChartZoomPanBehavior();
zoom.EnableMouseWheelZooming = true;
zoom.EnablePanning = true;
zoom.EnableSelectionZooming = false;
zoom.ZoomMode = ZoomMode.XY;
zoom.ZoomRelativeToCursor = false;
zoom.EnablePinchZooming = false;
chart.Behaviors.Add(zoom);StripLines
The following code example demonstrates the usage of StripLines in Chart and SfChart.
Chart
<syncfusion:NumericalAxis.StripLines>
<syncfusion:ChartStripLine
x:Name="strip"
Start="40"
IsSegmented="False"
SegmentStartValue="20"
SegmentEndValue="40"
RepeatEvery="10"
RepeatUntil="50"
TextRotationAngle="30"
StartFromAxis="False"
Width="5"
IsPixelWidth="False"
Background="#b4e8f3"/>
</syncfusion:NumericalAxis.StripLines>ChartArea area= new ChartArea();
ChartStripLine stripline = new ChartStripLine();
stripline.Offset = 20d;
stripline.Width = 5d;
stripline.StartFromAxis = false;
stripline.IsSegmented = false;
stripline.SegmentStartValue = 20d;
stripline.SegmentEndValue = 40d;
stripline.RepeatEvery = 10d;
stripline.RepeatUntil = 50d;
stripline.TextRotationAngle = 30;
stripline.IsPixelWidth = false;
stripline.Interior = new SolidColorBrush(Colors.Red);
stripline.Text = new FormattedText
("StripLine", CultureInfo.CurrentCulture, FlowDirection.LeftToRight, new Typeface("Times New Roman"), 20, Brushes.Black);
area.SecondaryAxis.StripLines.Add(stripline);SfChart
<syncfusion:NumericalAxis.StripLines>
<syncfusion:ChartStripLine
Start="40"
Width="5"
IsPixelWidth="True"
IsSegmented="False"
SegmentStartValue="20"
SegmentEndValue="50"
RepeatEvery="10"
RepeatUntil="50"
Label="StripLine"
LabelAngle="30"
LabelHorizontalAlignment="Center"
LabelVerticalAlignment="Center"
Background="#b4e8f3"/>
</syncfusion:NumericalAxis.StripLines>SfChart chart = new SfChart();
NumericalAxis axis = new NumericalAxis();
ChartStripLine stripline = new ChartStripLine()
{
Start = 40d,
Width = 5d,
IsPixelWidth = true,
IsSegmented = false,
SegmentStartValue = 20d,
SegmentEndValue = 50d,
RepeatEvery = 10d,
RepeatUntil = 50d,
Label = "StripLine",
LabelAngle = 30d,
LabelHorizontalAlignment = HorizontalAlignment.Center,
LabelVerticalAlignment = VerticalAlignment.Center,
Background = new SolidColorBrush(Color.FromRgb(180, 232, 243))
};
axis.StripLines.Add(stripline);
chart.SecondaryAxis = axis;The following table illustrates the API comparison between Chart and SfChart.
| ChartStripLine (Chart) | ChartStripLine (SfChart) | Description |
|---|---|---|
| Start | Start | Gets or sets start value for axis. |
| Width | Width | Gets or sets the width. When IsPixelWidth is ‘true’, then it considers unit of width as pixel otherwise it is axis value. |
| Interior | Background | Gets or sets color for strip line background. |
| Text | Label | Gets or sets text for strip line. In Chart Text as a 'Formatted Text' and in SfChart label as a 'String'. |
| TextRotationAngle | LabelAngle | Gets or sets label angle. |
| TextAlignment | LabelHorizontalAlignmentLabelVerticalAlignment | Gets or sets alignment for strip line labels. |
| RepeatEvery | RepeatEvery | Gets or sets value for strip line occurrence. |
| RepeatUntil | RepeatUntil | Gets or sets value where the strip line occurrence ends. |
| IsSegmented | IsSegmented | Gets or sets value that indicates whether strip line is segmented. |
| SegmentStartValue | SegmentStartValue | Gets or sets segment start value. |
| SegmentEndValue | SegmentEndValue | Gets or sets segment end value. |
| IsPixelWidth | IsPixelWidth | Gets or sets a value that indicates the unit of the value of Width is pixel. |
Watermark
Following code example illustrates the WatermarkAPI comparison,
Chart
<syncfusion:ChartArea>
<syncfusion:ChartArea.Watermark>
<VisualBrush
Stretch="None"
Opacity="0.5"
AlignmentX="Center"
AlignmentY="Center">
<VisualBrush.Visual>
<TextBlock
Text="Chart"
FontSize="60"
Foreground="Gray"/>
</VisualBrush.Visual>
</VisualBrush>
</syncfusion:ChartArea.Watermark>
</syncfusion:ChartArea>ChartArea area = new ChartArea();
area.Watermark = new VisualBrush()
{
Opacity = 0.5,
AlignmentX = AlignmentX.Center,
AlignmentY = AlignmentY.Center,
Stretch = Stretch.None,
Visual = new TextBlock()
{
Text = "Chart",
FontSize = 60d,
Foreground = Brushes.Gray
}
};SfChart
<syncfusion:SfChart>
<syncfusion:SfChart.Watermark>
<syncfusion:Watermark
Canvas.ZIndex="-1"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<syncfusion:Watermark.Content>
<TextBlock
Text="SfChart"
FontSize="60"
Foreground="Gray"
Opacity="0.5">
</TextBlock>
</syncfusion:Watermark.Content>
</syncfusion:Watermark>
</syncfusion:SfChart.Watermark>
</syncfusion:SfChart>SfChart chart = new SfChart();
Watermark waterMark = new Watermark();
waterMark.HorizontalAlignment = HorizontalAlignment.Center;
waterMark.VerticalAlignment = VerticalAlignment.Center;
Canvas.SetZIndex(waterMark, -1);
waterMark.Content = new TextBlock()
{
Text = "SfChart",
Foreground = Brushes.Gray,
Opacity = 0.5,
FontSize = 60d
};
chart.Watermark = waterMark;Annotation
In Chart, you can add Annotations to chart and series. Annotations added to Chart are positioned based on OffsetX and OffsetY whose values are in the unit of pixel. Annotations added to series are positioned relative to axis. Annotation shape is specified in AnnotationShape property.
Following code example illustrates the Annotation types and Annotation API’s for both Charts:
Chart
Chart having following Annotations
- Chart Annotation
<syncfusion:Chart.AnnotationLabels>
<syncfusion:ChartAnnotationLabel
AnnotationShape="None"
Template="{StaticResourcetemplateImage}"
Content="Text Annotation"
OffsetX="500"
OffsetY="100"
IsAnnotationDragDrop="True"/>
</syncfusion:Chart.AnnotationLabels>Chart chart = new Chart();
ChartAnnotationLabel chartannotation=new ChartAnnotationLabel();
chartannotation.AnnotationShape = AnnotationShapes.None;
chartannotation.Content = "Text Annotation";
chartannotation.OffsetX = 500d;
chartannotation.OffsetY = 100d;
chartannotation.IsAnnotationDragDrop = true;
chart.AnnotationLabels.Add(chartannotation);- Series Annotation
<syncfusion:ChartSeries.Annotations>
<syncfusion:AnnotationsCollection>
<syncfusion:ChartSeriesAnnotation
X="40702"
Y="468"
AnnotationShape="Diamond"
Stroke="Black"
Fill="Orange"/>
</syncfusion:AnnotationsCollection>
</syncfusion:ChartSeries.Annotations>ChartSeries columnSeries = new ChartSeries();
AnnotationsCollection annoCollection = new AnnotationsCollection();
ChartSeriesAnnotation seriesAnnotation=new ChartSeriesAnnotation();
seriesAnnotation.X = 40702;
seriesAnnotation.Y = 468;
seriesAnnotation.AnnotationShape = AnnotationShapes.Diamond;
seriesAnnotation.Stroke = Brushes.Black;
seriesAnnotation.Fill = Brushes.Orange;
annoCollection.m_annotationsCollection.Add(seriesAnnotation);
columnSeries.Annotations = annoCollection;SfChart
In SfChart, you can position Annotations in pixel unit or axis. Units are specified using CoordinateUnit property. Unlike Chart, shape is represented by class name itself in SfChart.
SfChart having the following Annotations
- Image Annotation
<syncfusion:SfChart.Annotations>
<syncfusion:ImageAnnotation
ImageSource="Annotation.png"
VerticalTextAlignment="Center"
Foreground="White"
CoordinateUnit="Axis"
X1="30" X2="75"
Y1="520"
Y2="560">
</syncfusion:ImageAnnotation>
</syncfusion:SfChart.Annotations>SfChart chart = new SfChart();
ImageAnnotation imgAnnotation = new ImageAnnotation();
imgAnnotation.ImageSource = new BitmapImage(new Uri(@"/Images/Annotation.png", UriKind.Relative));
imgAnnotation.VerticalTextAlignment = VerticalAlignment.Center;
imgAnnotation.Foreground = new SolidColorBrush(Colors.White);
imgAnnotation.CoordinateUnit = CoordinateUnit.Axis;
imgAnnotation.X1 = 30d;
imgAnnotation.X2 = 75d;
imgAnnotation.Y1 = 520d;
imgAnnotation.Y2 = 560d;
chart.Annotations.Add(imgAnnotation);- Line Annotation
<syncfusion:SfChart.Annotations>
<syncfusion:LineAnnotation
X1="3"
Y1="34"
X2="5"
Y2="38"
CanResize="True"
CanDrag="True">
</syncfusion:LineAnnotation>
</syncfusion:SfChart.Annotations>SfChart chart = new SfChart();
LineAnnotation lineAnnotation = new LineAnnotation()
{
CoordinateUnit = CoordinateUnit.Axis,
CanResize = true,
CanDrag = true,
X1 = 3d,
X2 = 34d,
Y1 = 5d,
Y2 = 38d
};
chart.Annotations.Add(lineAnnotation);- Ellipse Annotation
<syncfusion:SfChart.Annotations>
<syncfusion:EllipseAnnotation
X1="1"
Y1="36"
X2="2"
Y2="42"
CanResize="True"
CanDrag="True">
</syncfusion:EllipseAnnotation>
</syncfusion:SfChart.Annotations>SfChart chart = new SfChart();
EllipseAnnotation ellipseAnnotation = new EllipseAnnotation()
{
CoordinateUnit = CoordinateUnit.Axis,
CanResize = true,
CanDrag = true,
X1 = 36d,
X2 = 2d,
Y1 = 36d,
Y2 = 42d
};
chart.Annotations.Add(ellipseAnnotation);- Rectangle Annotation
<syncfusion:SfChart.Annotations>
<syncfusion:RectangleAnnotation
X1="4"
Y1="40"
X2="6"
Y2="42"
CanResize="True"
CanDrag="True">
</syncfusion:RectangleAnnotation>
</syncfusion:SfChart.Annotations>SfChart chart = new SfChart();
RectangleAnnotation rectAnnotation = new RectangleAnnotation()
{
CoordinateUnit = CoordinateUnit.Axis,
CanResize = true,
CanDrag = true,
X1 = 36d,
X2 = 2d,
Y1 = 36d,
Y2 = 42d
};
chart.Annotations.Add(rectAnnotation);- Vertical Line Annotation
<syncfusion:SfChart.Annotations>
<syncfusion:VerticalLineAnnotation
CanDrag="True"
ShowAxisLabel="True"
CanResize="True"
CoordinateUnit="Axis" X1="3">
</syncfusion:VerticalLineAnnotation>
</syncfusion:SfChart.Annotations>SfChart chart = new SfChart();
VerticalLineAnnotation verAnnotation = new VerticalLineAnnotation();
verAnnotation.CoordinateUnit = CoordinateUnit.Axis;
verAnnotation.ShowAxisLabel = true;
verAnnotation.CanDrag = true;
verAnnotation.X1 = 3d;
chart.Annotations.Add(verAnnotation);- Horizontal Line Annotation
<syncfusion:SfChart.Annotations>
<syncfusion:HorizontalLineAnnotation
CanDrag="True"
CanResize="True"
CoordinateUnit="Axis"
ShowAxisLabel="True"
Y1="40">
</syncfusion:HorizontalLineAnnotation>
</syncfusion:SfChart.Annotations>SfChart chart = new SfChart();
HorizontalLineAnnotation horAnnotation = new HorizontalLineAnnotation();
horAnnotation.CoordinateUnit = CoordinateUnit.Axis;
horAnnotation.ShowAxisLabel = true;
horAnnotation.CanDrag = true;
horAnnotation.Y1 = 40d;
chart.Annotations.Add(horAnnotation);- Text Annotation
<syncfusion:SfChart.Annotations>
<syncfusion:TextAnnotation
X1="0"
Y1="150"
Text="Release 1"
ContentTemplate="{StaticResource textTemplate}"
ToolTipContent="Volume 1 Released!!!"
ToolTipTemplate="{StaticResource tooltip}"
VerticalAlignment="Top"
HorizontalAlignment="Left"
ToolTipPlacement="Top"
ShowToolTip="True">
</syncfusion:TextAnnotation>
</syncfusion:SfChart.Annotations>SfChart chart = new SfChart();
TextAnnotation textAnnotation = new TextAnnotation()
{
CoordinateUnit = CoordinateUnit.Axis,
X1 = 0d,
Y1 = 150d,
Text = "Release 1",
ToolTipContent = "Volume 1 Released!!!",
HorizontalAlignment = HorizontalAlignment.Left,
ToolTipPlacement = ToolTipLabelPlacement.Top,
ShowToolTip = true
};
chart.Annotations.Add(textAnnotation);Technical Indicators
The following table illustrates the API comparison for TechnicalIndicators,
| ChartTechnicalIndicator (Chart) | AccumulationDistributionIndicator, BollingerBandIndicator… etc.,(SfChart) | Description |
|---|---|---|
| SignalLineColor | SignalLineColor | Gets or sets the Brush value that represents the indicator signal line color. |
| UpperLineColor | UpperLineColor | Gets or sets the Brush value that represents the color for the Upper Bollinger Band. |
| ConvergenceLineColor | ConvergenceLineColor | Gets or sets the Brush value that represents the line color for the convergence. |
| DivergenceLineColor | DivergenceLineColor | Gets or sets the Brush value that represents the Divergence Line color. |
| chart:ChartBollingerBand.BollingerMovingAverage | Period | Gets or sets the value that represents the indicator moving average period |
| chart:ChartExponentialAverage.ExponentialAverage | Period | Gets or sets the value that represents the indicator moving average period |
| chart:ChartSimpleAverage.MovingAverage | Period | Gets or sets the value that represents the indicator moving average period |
| chart:ChartTriangularAverage.TriangularAverage | Period | Gets or sets the value that represents the indicator moving average period |
| chart:ChartMomentum.MomentumTimeSpan | Period | Measures the amount that a security's price has changed over a given time span. |
| IndicatorType | - | In Chart, you can set the type of the indicator where as in SfChart, indicator type is indicated by the class name itself. |
Chart
<syncfusion:ChartSeries.Indicators>
<syncfusion:IndicatorCollection>
<syncfusion:IndicatorCollection.Items>
<syncfusion:ChartTechnicalIndicator
IndicatorType="BollingerBands"
chart:ChartBollingerBand.LowerLineColor="Blue"
chart:ChartBollingerBand.UpperLineColor="Red"
chart:ChartBollingerBand.SignalLineColor="Green"
chart:ChartBollingerBand.BollingerMovingAverage="50">
</syncfusion:ChartTechnicalIndicator>
</syncfusion:IndicatorCollection.Items>
</syncfusion:IndicatorCollection>
</syncfusion:ChartSeries.Indicators>ChartSeries columnSeries = new ChartSeries();
IndicatorCollection indiCollection = new IndicatorCollection();
ChartTechnicalIndicator indicator = new ChartTechnicalIndicator();
indicator.IndicatorType = IndicatorTypes.BollingerBands;
ChartBollingerBand.SetLowerLineColor(chart,Brushes.Blue);
ChartBollingerBand.SetSignalLineColor(chart, Brushes.Red);
ChartBollingerBand.SetSignalLineColor(chart, Brushes.Green);
ChartBollingerBand.SetBollingerMovingAverage(chart,50);
indiCollection.Items.Add(indicator);
columnSeries.Indicators = indiCollection;SfChart
<syncfusion:SfChart.TechnicalIndicators>
<syncfusion:BollingerBandIndicator
UpperLineColor="Brown"
LowerLineColor="DarkBlue"
Period="1"
XBindingPath="Year"
ItemsSource="{Binding CompanyDetails}"
High="High"
Open="Open"
Close="Close"
Low="Low"/>
</syncfusion:SfChart.TechnicalIndicators>SfChart chart = new SfChart();
BollingerBandIndicator indicator = new BollingerBandIndicator()
{
UpperLineColor = new SolidColorBrush(Colors.Brown),
LowerLineColor = new SolidColorBrush(Colors.DarkBlue),
XBindingPath = "Year",
High = "High",
Open = "Open",
Close = "Close",
Low = "Low",
ItemsSource = viewmodel.CompanyDetails
};
chart.TechnicalIndicators.Add(indicator);SyncChartAreas
In Chart, you can split chart area into multiple plotting areas that share common axis, crosshair/interactive cursor etc., using SyncChartAreas class.
In SfChart, you can split chart into multiple plotting areas that share common axis, crosshair/interactive cursor and zooming functionalities by defining multiple rows and columns using RowDefinitions and ColumnDefinition properties. It is similar to defining rows and columns in Grid panel.
The following code example illustrates the API’s for both charts,
Chart
SyncChartAreas
<syncfusion:Chart>
<syncfusion:SyncChartAreas>
<syncfusion:SyncChartAreas.PrimaryAxis>
<syncfusion:ChartAxis
ValueType="DateTime"
LabelDateTimeFormat="MM/dd/yy"
Header="Date">
</syncfusion:ChartAxis>
</syncfusion:SyncChartAreas.PrimaryAxis>
<syncfusion:SyncChartAreas.Areas>
<syncfusion:ChartArea x:Name="Area1">
<syncfusion:ChartArea.SecondaryAxis>
<syncfusion:ChartAxis
EdgeLabelsDrawingMode="Shift"
Interval="50"
Header="Prices">
</syncfusion:ChartAxis>
</syncfusion:ChartArea.SecondaryAxis>
<syncfusion:ChartSeries
Type="Line"
DataSource="{Binding datalist}"
BindingPathX="Time"
BindingPathsY="Low">
</syncfusion:ChartSeries>
</syncfusion:ChartArea>
<syncfusion:ChartArea x:Name="Area2">
<syncfusion:ChartArea.SecondaryAxis>
<syncfusion:ChartAxis
EdgeLabelsDrawingMode="Shift"
Interval="50"
Header="Prices">
</syncfusion:ChartAxis>
</syncfusion:ChartArea.SecondaryAxis>
<syncfusion:ChartSeries
Type="Line"
DataSource="{Binding datalist}"
BindingPathX="Time"
BindingPathsY="High">
</syncfusion:ChartSeries>
</syncfusion:ChartArea>
</syncfusion:SyncChartAreas.Areas>
</syncfusion:SyncChartAreas>
</syncfusion:Chart>SyncChartAreas areas = new SyncChartAreas();
areas.PrimaryAxis = new ChartAxis();
ChartArea area1 = new ChartArea();
area1.SecondaryAxis = new ChartAxis();
ChartSeries lineSeries1 = new ChartSeries();
lineSeries1.BindingPathX = "Time";
lineSeries1.BindingPathsY = new string[] { "Low" };
lineSeries1.DataSource = viewmodel.datalist;
lineSeries1.Type = ChartTypes.Line;
area1.Series.Add(lineSeries1);
ChartArea area2 = new ChartArea();
area2.SecondaryAxis = new ChartAxis();
ChartSeries lineSeries2 = new ChartSeries();
lineSeries2.BindingPathX = "Time";
lineSeries2.BindingPathsY = new string[] { "High" };
lineSeries2.DataSource = viewmodel.datalist;
lineSeries2.Type = ChartTypes.Line;
area2.Series.Add(lineSeries1);
areas.Areas.Add(area1);
areas.Areas.Add(area2);SfChart
Column Row Definition
<syncfusion:SfChart>
<syncfusion:SfChart.RowDefinitions>
<syncfusion:ChartRowDefinition/>
<syncfusion:ChartRowDefinition/>
</syncfusion:SfChart.RowDefinitions>
<syncfusion:SfChart.PrimaryAxis>
<syncfusion:CategoryAxis
ShowGridLines="False"
FontSize="20"
Header="Company Name"/>
</syncfusion:SfChart.PrimaryAxis>
<syncfusion:SfChart.SecondaryAxis>
<syncfusion:NumericalAxis
syncfusion:ChartBase.Row="0"
Interval="40"
FontSize="20"
Header="Gross Revenue (cr.)"/>
</syncfusion:SfChart.SecondaryAxis>
<syncfusion:LineSeries
Stroke="Red"
StrokeThickness="3"
ItemsSource="{Binding CompanyDetails}"
XBindingPath="CompanyName"
YBindingPath="CompanyTurnOver1"/>
<syncfusion:LineSeries
Stroke="Green"
StrokeThickness="3"
ItemsSource="{Binding CompanyDetails}"
XBindingPath="CompanyName"
YBindingPath="CompanyTurnOver2">
<syncfusion:LineSeries.YAxis>
<syncfusion:NumericalAxis
syncfusion:ChartBase.Row="1"
Header="Additional Axis"
PlotOffset="30"/>
</syncfusion:LineSeries.YAxis>
</syncfusion:LineSeries>
</syncfusion:SfChart>SfChart chart = new SfChart();
ChartRowDefinition row1 = new ChartRowDefinition();
ChartRowDefinition row2 = new ChartRowDefinition();
chart.RowDefinitions.Add(row1);
chart.RowDefinitions.Add(row2);
chart.PrimaryAxis = new CategoryAxis()
{
ShowGridLines = false,
FontSize = 20,
Header = "Company Name"
};
NumericalAxis numAxis1 = new NumericalAxis()
{
Interval = 40,
FontSize = 20,
Header = "Gross Revenue (cr.)"
};
ChartBase.SetRow(numAxis1, 0);
chart.SecondaryAxis = numAxis1;
LineSeries lineSeries1 = new LineSeries()
{
ItemsSource = viewmodel.CompanyDetails,
XBindingPath = "CompanyName",
YBindingPath = "CompanyTurnOver1",
Stroke = Brushes.Red,
StrokeThickness = 3
};
LineSeries lineSeries2 = new LineSeries()
{
ItemsSource = viewmodel.CompanyDetails,
XBindingPath = "CompanyName",
YBindingPath = "CompanyTurnOver2",
Stroke = Brushes.Green,
StrokeThickness = 3
};
NumericalAxis numAxis2 = new NumericalAxis()
{
Header = "Additional Axis",
PlotOffset = 30
};
ChartBase.SetRow(numAxis2, 1);
lineSeries2.YAxis = numAxis2;
chart.Series.Add(lineSeries1);
chart.Series.Add(lineSeries2);Exporting and Printing
Export to Image
Chart
Chart chart = new Chart();
SaveFileDialog saveFileDialog = new SaveFileDialog();
string C_imageFilesFilter = "Bitmap(*.bmp)|*.bmp|JPEG(*.jpg,*.jpeg)|*.jpg;*.jpeg|Gif (*.gif)|*.gif|TIFF(*.tiff)|*.tiff|PNG(*.png)|*.png|WDP(*.wdp)|*.wdp|Xps file (*.xps)|*.xps|All files (*.*)|*.*";
saveFileDialog.Filter = C_imageFilesFilter;
if (saveFileDialog.ShowDialog() == true)
{
chart.Save(saveFileDialog.FileName);
}SfChart
SfChart sfchart = new SfChart();
SaveFileDialog sfd = new SaveFileDialog();
sfd.Filter = "Bitmap(*.bmp)|*.bmp|JPEG(*.jpg,*.jpeg)|*.jpg;*.jpeg|Gif (*.gif)|*.gif|PNG(*.png)|*.png|All files (*.*)|*.*";
if (sfd.ShowDialog() == true)
{
using (Stream fs = sfd.OpenFile())
{
sfchart.Save(fs, new PngBitmapEncoder());
}
}Printing Chart
Chart
<syncfusion:Chart x:Name="chart"/>
<Button Content="Print" Command="{x:Static ApplicationCommands.Print}" CommandTarget="{Binding ElementName=chart}"/>
<Button Content="Printing Mode" Command="{x:Staticsyncfusion:ChartCommands.SwitchPrinting}" CommandTarget="{Binding ElementName=chart}"/>SfChart
SfChart chart = new SfChart();
chart.Print();NOTE
You can refer to our WPF Charts feature tour page for its groundbreaking feature representations. You can also explore our WPF Charts example to knows various chart types and how to easily configured with built-in support for creating stunning visual effects.