2D Chart for WinForms | ComponentOne
Chart for WinForms Tutorials / Line Chart Tutorial
In This Topic
    Line Chart Tutorial
    In This Topic

    This section provides instructions for building a Line Chart with symbols which is the default chart type. A Line chart is another simple way to show the relationship of the data.

    In this example we will create a Line chart with symbols. There will be only one line so we will use one data series. The line will display the company's profit growth over time. The horizontal axis, in this example, Axis X, represents years and the vertical axis, in this example, AxisY, represents profit in thousands of dollars.

    Once you complete the following steps your chart will appear like the following line chart with symbols:


    To create a Line Chart with Symbols at design time

    This task assumes you have already added the C1Chart control to the form.

    Set the Chart Type

    The first step in configuring a chart through the Chart Properties designer is to select a gallery type from the available chart types.

    1. Right-click on the C1Chart control and click Chart Properties from its short-cut menu.
    2. Select Gallery from the treeview pane, then select Line from the Simple Types list.
    3. In the pane next to the main chart types, select the X-Y chart, lines, symbols subtype, and click Apply.

      The default Line chart will add two data series which will create two lines.


    Modify the Data Series

    1. Select Data from the treeview pane.
    2. Click Remove to remove Series 1, Series 2, and Series 3.

    Add Data to the Data Series

    1. Select Data->DataTable from the treeview pane. Click in the XY data table and enter the following numerical X-Y-values: (2004,50), (2005,100), (2006, 150), (2007, 100). Note: Click Tab to move the cursor to the next X or Y value.
    2. Delete the last XY value from the default line chart.
    3. Click Apply to update the chart.

      A preview image of the updated chart appears in the lower left pane of the Chart Properties designer.

    Modify Axes Appearance

    Next we will modify the X and Y axis default title and we will also change the axes font style using the Chart Properties designer. Select AxisX from the treeveiw pane, then select the annotation tab.

    1. Select AxisX from the tree.
    2. In the AxisX tab, type the title, "Year", then click on the Font button. The Font dialog box appears.
    3. Change the Font style to Bold and the Font size to 10, then click OK.
    4. Click Apply in the Chart Properties designer. The modifications for the X-Axis appear on the Line chart.
    5. Select AxisY from the tree.
    6. In the AxisY tab, type the title, "Profit (thousands of dollars)", then click on the Font button. The Font dialog box appears.
    7. Change the Font style to Bold and the Font size to 10, then click OK.
    8. Click Apply in the Chart Properties designer. The modifications for the Y-Axis appear on the Line chart.
    9. Click OK to close the Chart Properties designer.

    Congratulations! You created a Line symbol chart using the Chart Properties designer.

    To create a Line Chart with Symbols programmatically

    A Line chart can be created programmatically using the following steps:

    1. Add C1Chart to the form.
    2. Right-click the form and select View Code to view the code file, then add the following directive to declare the C1.Win.C1Chart namespace:

      To write code in Visual Basic

      Visual Basic
      Copy Code 
      Imports C1.Win.C1Chart;

      To write code in C#

      C#
      Copy Code 
      using C1.Win.C1Chart;
    3. Double click Form1 and add the following code in the Form1_Load procedure to create the simple pie chart:

      To write code in Visual Basic

      Visual Basic
      Copy Code 
      Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

        'create data for the chart
        Dim xdata() As Double = {2004, 2005, 2006, 2007}
        Dim ydata() As Double = {50, 100, 150, 200}

        'clear previous series
        C1Chart1.ChartGroups(0).ChartData.SeriesList.Clear()

        'add one series to the chart
        Dim ds As C1.Win.C1Chart.ChartDataSeries = _ C1Chart1.ChartGroups(0).ChartData.SeriesList.AddNewSeries()

        'copy the x and y data
        ds.X.CopyDataIn(xdata)
        ds.Y.CopyDataIn(ydata)

        'set the chart type
        C1Chart1.ChartGroups(0).ChartType = C1.Win.C1Chart.Chart2DTypeEnum.XYPlot

        'create new font for the X and Y axes
        Dim f As Font = New Font("Arial", 10, FontStyle.Bold)
        C1Chart1.ChartArea.Style.ForeColor = Color.DarkGray
        C1Chart1.ChartArea.AxisX.Font = f
        C1Chart1.ChartArea.AxisX.Text = "Year"
        C1Chart1.ChartArea.AxisX.GridMajor.Visible = True
        C1Chart1.ChartArea.AxisX.GridMajor.Color = Color.LightGray
        C1Chart1.ChartArea.AxisY.Font = f
        C1Chart1.ChartArea.AxisY.Text = "Profit (thousands of dollars)"
        C1Chart1.ChartArea.AxisY.GridMajor.Visible = True
        C1Chart1.ChartArea.AxisY.GridMajor.Color = Color.LightGray

        'change the default line style appearance
        ds.LineStyle.Color = Color.LightPink
        ds.LineStyle.Pattern = LinePatternEnum.Solid
        ds.LineStyle.Thickness = 1

        'change the default symbol style appearance
        ds.SymbolStyle.Shape = SymbolShapeEnum.Box
        ds.SymbolStyle.Color = Color.LightPink
        ds.SymbolStyle.OutlineColor = Color.Black
        ds.SymbolStyle.Size = 5
        ds.SymbolStyle.OutlineWidth = 1

        'set the backcolor for the plot area
        C1Chart1.ChartArea.PlotArea.BackColor = Color.White

End Sub

      To write code in C#

      C#
      Copy Code 
      private void Form1_Load(object sender, EventArgs e)
{

        //create data for the chart
        double[] xdata = { 2004, 2005, 2006, 2007 };
        double[] ydata = { 50, 100, 150, 200 };

        //clear previous series
        c1Chart1.ChartGroups[0].ChartData.SeriesList.Clear();

        //add one series to the chart
        C1.Win.C1Chart.ChartDataSeries ds = c1Chart1.ChartGroups[0].ChartData.SeriesList.AddNewSeries();

        //copy the x and y data
        ds.X.CopyDataIn(xdata);
        ds.Y.CopyDataIn(ydata);

        //set the chart type
        c1Chart1.ChartGroups[0].ChartType = C1.Win.C1Chart.Chart2DTypeEnum.XYPlot;

        //create new font for the X and Y axes
        Font f = new Font("Arial", 10, FontStyle.Bold);
        c1Chart1.ChartArea.Style.ForeColor = Color.DarkGray;
        c1Chart1.ChartArea.AxisX.Font = f;
        c1Chart1.ChartArea.AxisX.Text = "Year";
        c1Chart1.ChartArea.AxisX.GridMajor.Visible = true;
        c1Chart1.ChartArea.AxisX.GridMajor.Color = Color.LightGray;
        c1Chart1.ChartArea.AxisY.Font = f;
        c1Chart1.ChartArea.AxisY.Text = "Profit (thousands of dollars)";
        c1Chart1.ChartArea.AxisY.GridMajor.Visible = true;
        c1Chart1.ChartArea.AxisY.GridMajor.Color = Color.LightGray;

        //modify line style appearance
        ds.LineStyle.Color = Color.LightPink;
        ds.LineStyle.Pattern = LinePatternEnum.Solid;
        ds.LineStyle.Thickness = 1;

        //modify the symbol style appearance
        ds.SymbolStyle.Shape = SymbolShapeEnum.Box;
        ds.SymbolStyle.Color = Color.LightPink;
        ds.SymbolStyle.OutlineColor = Color.Black;
        ds.SymbolStyle.Size = 5;
        ds.SymbolStyle.OutlineWidth = 1;
        c1Chart1.ChartArea.PlotArea.BackColor = Color.White;

}
    See Also
    Pie Chart Tutorial