The line series are three, so we must add three lists with data to the XData<\/a> and YData<\/a> properties. We can do this in three ways: type the values in design time, write them in code or use data binding. In design time we use the built-in collection editors of the control:<\/p>\n The Series collection editor<\/p><\/div>\n In code we make lists with the data and add them to XData<\/a> or YData<\/a>:<\/p>\n If you want to use data binding then set DataSource<\/a> to the name of the data source, DataMember<\/a> to specify the name of the table which will supply the data and XDataFields<\/a>\/YDataFields<\/a> to provide the name(s) of the fields. In this case we will require three data base columns for each of the three series – separate the names with a comma e.g.<\/p>\n For XData<\/a> we use the same list because we want the series to appear exactly under each other:<\/p>\n The Series<\/strong><\/p>\n We set LineType<\/a> to Line and Scatter because we want to show scatters at data points:<\/p>\n The LineTypes<\/a> enumeration allows bit wise combining of its members. We use ChartPens<\/a> to set the pens for the line series. ShapesPens<\/a> and ShapeBrushes<\/a> set the pens for the outline and the brushes for filling the scatters:<\/p>\n The pens for the series are thicker than the pens for the scatters. The fill brush is slightly lighter:<\/p>\n Finally – we set the size of the shapes and their type:<\/p>\n The Separator<\/strong><\/p>\n There are two ways to draw the separator line.<\/p>\n The first is to add a custom summary value. In this case the separator line will be drawn from the The summary line is drawn with shapes at both ends, but we can hide them by setting their size to 0:<\/p>\n The second way to draw the separator line is to add it as a 4th series in the XData<\/a> and YData<\/a> lists and add a pen for it in the ChartPens<\/a> list. The advantage is that we can make the line as long as we want, in our case – as long as the length of the X-axis:<\/p>\n The Legend<\/strong><\/p>\n We use LegendLabels<\/a> to add the labels for the line series:<\/p>\n We set the background of the legend, but we don’t have to add any brushes or shapes for the legend items – they are taken automatically from the line series settings:<\/p>\n The GridType<\/a> is GridType.HorScale<\/a>. We use GridBrush<\/a>, AltGridBrush<\/a> and GridPen<\/a> to set the colors for the grid.<\/p>\n If you make the changes to the chart in code, don’t forget to call UpdateChart()<\/a> to make sure the Here is the final chart:<\/p>\n A line chart with a separator line.<\/p><\/div>\n The sample is available for download from here:<\/p>\n Download Line Chart with Separator Line Sample<\/a><\/p>\n You can download the trial version of the component with extensive documentation and many other samples from here:<\/p>\n Download MindFusion.Charting for WinForms Trial Version<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" In today’s post we’ll show how to build a line chart with several line series and a separator line. The separator line is drawn at a given height and divides the chart into two halves. The Line Series The line … Continue reading ![\"The](\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2013\/07\/collection_editor.png\")
<\/a>lineChart1.YData.Clear();\nlineChart1.YData.Add(new List { 45, 64, 38.2, 33.03, 56, 68, 39, 42 });\nlineChart1.YData.Add(new List { 34, 42, 28, 42, 35, 31, 62, 55 });\nlineChart1.YData.Add(new List { 22, 19, 32, 28, 17, 25, 31, 36 });\n<\/pre>\nlineChart1.YDataFields = \"Sales1,Sales2,Sales3\";\n<\/pre>\n
lineChart1.XData.Clear();\nlineChart1.XData.Add(new List { 10, 20, 30, 40, 50, 60, 70, 80 });\nlineChart1.XData.Add(new List { 10, 20, 30, 40, 50, 60, 70, 80 });\nlineChart1.XData.Add(new List { 10, 20, 30, 40, 50, 60, 70, 80 });\n<\/pre>\nlineChart1.LineType = MindFusion.Charting.LineTypes.Line | \nMindFusion.Charting.LineTypes.Scatter;\n<\/pre>\n
lineChart1.ChartPens.Add(new MindFusion.Drawing.Pen(Color.FromArgb(102, 205, 170), 6));\nlineChart1.ShapePens.Add(new MindFusion.Drawing.Pen(Color.FromArgb(102, 205, 170), 2)); \n<\/pre>\n
lineChart1.ShapeBrushes.Add(new MindFusion.Drawing.SolidBrush(Color.FromArgb(175, 251, 175)));\n<\/pre>\n
lineChart1.Shapes.Add(MindFusion.Charting.Shape.Circle);\nlineChart1.ShapeSizes.Add(10);\n<\/pre>\n
\nsmallest X-data value to the biggest one, parallel to the axes.<\/p>\nlineChart1.AddCustomSummary(40.0, \"\");\n<\/pre>\n
lineChart1.SummaryBrushes.Add(new MindFusion.Drawing.SolidBrush(Color.Gray));\nlineChart1.SummaryShapeSizes.Add(0);\n<\/pre>\n
lineChart1.XData.Add(new List { 0, 90 });\n<\/pre>\nlineChart1.LegendLabels = new List() { \"2010\", \"2011\", \"2012\" };\n<\/pre>\nlineChart1.LegendBackgroundBrush = new MindFusion.Drawing.SolidBrush(Color.FromArgb(253, 253, \n253));\n<\/pre>\n
\nThe Grid<\/strong><\/p>\nlineChart1.GridPen = new MindFusion.Drawing.Pen(Color.FromArgb(200, 200, 200));\nlineChart1.GridPen.DashStyle = System.Drawing.Drawing2D.DashStyle.Dash;\nlineChart1.GridType = MindFusion.Charting.GridType.HorScale;\n<\/pre>\n
\ncontrol knows changes have happened and the chart must be updated.<\/p>\n![\"A](\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2013\/07\/linechart_separator.png\")
<\/a>