FlexChart for WinForms | ComponentOne
In This Topic
    Quick Start
    In This Topic

    The following quick-start guide will take you through the basics of FlexChart control.

    This quick start will guide you through the steps of creating a simple line symbol chart using the FlexChart control. Follow the steps below to get started:

    quickstart for creating a symbol chart

    Set up the application

    1. Create a new Windows Forms app.
    2. Drag and drop the FlexChart control from the toolbox onto the form.
      Observe: A column type chart is drawn with a default data.

    Bind the FlexChart control to a data source

    1. Create a data source.
      public List<Product> GetProductRevenue()
      {
          List<Product> _list = new List<Product>();
          _list.Add(new Product() { Name = "Desktop", Date = new DateTime(2018, 04, 07), Orders = 265, Revenue = 6625 });
          _list.Add(new Product() { Name = "Desktop", Date = new DateTime(2018, 05, 08), Orders = 107, Revenue = 2675 });
          _list.Add(new Product() { Name = "Mouse", Date = new DateTime(2018, 06, 02), Orders = 56, Revenue = 560 });
          _list.Add(new Product() { Name = "Mouse", Date = new DateTime(2018, 07, 06), Orders = 572, Revenue = 5720 });
          _list.Add(new Product() { Name = "Mouse", Date = new DateTime(2018, 08, 05), Orders = 468, Revenue = 4680 });
          _list.Add(new Product() { Name = "Printer", Date = new DateTime(2018, 09, 02), Orders = 154, Revenue = 2310 });
          _list.Add(new Product() { Name = "Desktop", Date = new DateTime(2018, 10, 03), Orders = 89, Revenue = 2225 });
          _list.Add(new Product() { Name = "Desktop", Date = new DateTime(2018, 11, 05), Orders = 347, Revenue = 8675 });
          _list.Add(new Product() { Name = "Printer", Date = new DateTime(2018, 12, 07), Orders = 204, Revenue = 3060 });
          _list.Add(new Product() { Name = "Printer", Date = new DateTime(2019, 01, 03), Orders = 34, Revenue = 510 });
          _list.Add(new Product() { Name = "Mouse", Date = new DateTime(2019, 02, 06), Orders = 223, Revenue = 2230 });
          _list.Add(new Product() { Name = "Desktop", Date = new DateTime(2019, 03, 08), Orders = 119, Revenue = 2975 });
          return _list;
      }
      
      Public Function GetProductRevenue() As List(Of Product)
          Dim _list As New List(Of Product)()
          _list.Add(New Product() With {.Name = "Desktop", .Date = New DateTime(2018, 4, 7), .Orders = 265, .Revenue = 6625})
          _list.Add(New Product() With {.Name = "Desktop", .Date = New DateTime(2018, 5, 8), .Orders = 107, .Revenue = 2675})
          _list.Add(New Product() With {.Name = "Mouse", .Date = New DateTime(2018, 6, 2), .Orders = 56, .Revenue = 560})
          _list.Add(New Product() With {.Name = "Mouse", .Date = New DateTime(2018, 7, 6), .Orders = 572, .Revenue = 5720})
          _list.Add(New Product() With {.Name = "Mouse", .Date = New DateTime(2018, 8, 5), .Orders = 468, .Revenue = 4680})
          _list.Add(New Product() With {.Name = "Printer", .Date = New DateTime(2018, 9, 2), .Orders = 154, .Revenue = 2310})
          _list.Add(New Product() With {.Name = "Desktop", .Date = New DateTime(2018, 10, 3), .Orders = 89, .Revenue = 2225})
          _list.Add(New Product() With {.Name = "Desktop", .Date = New DateTime(2018, 11, 5), .Orders = 347, .Revenue = 8675})
          _list.Add(New Product() With {.Name = "Printer", .Date = New DateTime(2018, 12, 7), .Orders = 204, .Revenue = 3060})
          _list.Add(New Product() With {.Name = "Printer", .Date = New DateTime(2019, 1, 3), .Orders = 34, .Revenue = 510})
          _list.Add(New Product() With {.Name = "Mouse", .Date = New DateTime(2019, 2, 6), .Orders = 223, .Revenue = 2230})
          _list.Add(New Product() With {.Name = "Desktop", .Date = New DateTime(2019, 3, 8), .Orders = 119, .Revenue = 2975})
          Return _list
      End Function
      
    2. Bind the FlexChart to this data source by setting the DataSource property.
      //Passing data to FlexChart
      this.flexChart1.DataSource = GetProductRevenue();
      
      'Passing data to FlexChart
      Me.flexChart1.DataSource = GetProductRevenue()
      

    Configure the FlexChart control

    1. Clear the default series getting displayed in the chart.
    2. Add a new series using Add method and configure the X and Y axes by setting the BindingX and Binding property.
    3. Configure the chart by setting the ChartType and other required properties.
      flexChart1.Series.Clear();
      
      //Selecting chart's type 
      this.flexChart1.ChartType = C1.Chart.ChartType.LineSymbols;
      
      //Setting chart's Header and styling it
      this.flexChart1.Header.Content = "DateWise Revenue";
      
      //Adding a Series to chart and binding it (AxisY) to 'Revenue' field of DataCollection
      this.flexChart1.Series.Add(new C1.Win.Chart.Series
      {
          //Name property specifies the string to be displayed corresponding to this Series in Legend
          Name = "Sales",
          Binding = "Revenue"
      });
      
      //Binding chart's AxisX to 'Date' so Dates are shown in Horizontal axis
      this.flexChart1.BindingX = "Date";
      
      flexChart1.Series.Clear()
      
      'Selecting chart's Type 
      Me.flexChart1.ChartType = C1.Chart.ChartType.LineSymbols
      
      'Setting chart's Header and styling it
      Me.flexChart1.Header.Content = "Datewise Revenue"
      
      'Adding a Series to chart and binding it (AxisY) to 'Revenue' field of DataCollection
      'Name property specifies the string to be displayed corresponding to this Series in Legend
      Me.flexChart1.Series.Add(New C1.Win.Chart.Series() With {
            .Name = "Sales",
            .Binding = "Revenue"
      })
      
      'Binding chart's AxisX to 'Date' so Dates are shown in Horizontal axis
      Me.flexChart1.BindingX = "Date"
      
    To create a simple WinForms application in .NET 5 Core for FlexChart control, complete the following steps: 
    1. Create a new Windows Forms application.

    2. Switch to code editor. Initialize and add the FlexChart control to the form.

      C#
      Copy Code
      // Initialize the control
      FlexChart flexChart = new FlexChart();
      // Add the control to form
      this.Controls.Add(flexChart);
      
    3. Create a data source:

      C#
      Copy Code
      // Creating data source
      public List<Product> GetProductRevenue()
      {
          List<Product> _list = new List<Product>();
          _list.Add(new Product() { Name = "Desktop", Date = new DateTime(2018, 04, 07), Orders = 265, Revenue = 6625 });
          _list.Add(new Product() { Name = "Desktop", Date = new DateTime(2018, 05, 08), Orders = 107, Revenue = 2675 });
          _list.Add(new Product() { Name = "Mouse", Date = new DateTime(2018, 06, 02), Orders = 56, Revenue = 560 });
          _list.Add(new Product() { Name = "Mouse", Date = new DateTime(2018, 07, 06), Orders = 572, Revenue = 5720 });
          _list.Add(new Product() { Name = "Mouse", Date = new DateTime(2018, 08, 05), Orders = 468, Revenue = 4680 });
          _list.Add(new Product() { Name = "Printer", Date = new DateTime(2018, 09, 02), Orders = 154, Revenue = 2310 });
          _list.Add(new Product() { Name = "Desktop", Date = new DateTime(2018, 10, 03), Orders = 89, Revenue = 2225 });
          _list.Add(new Product() { Name = "Desktop", Date = new DateTime(2018, 11, 05), Orders = 347, Revenue = 8675 });
          _list.Add(new Product() { Name = "Printer", Date = new DateTime(2018, 12, 07), Orders = 204, Revenue = 3060 });
          _list.Add(new Product() { Name = "Printer", Date = new DateTime(2019, 01, 03), Orders = 34, Revenue = 510 });
          _list.Add(new Product() { Name = "Mouse", Date = new DateTime(2019, 02, 06), Orders = 223, Revenue = 2230 });
          _list.Add(new Product() { Name = "Desktop", Date = new DateTime(2019, 03, 08), Orders = 119, Revenue = 2975 });
          return _list;
      }
      
    4. Bind the FlexChart control with the data source.

      C#
      Copy Code
      // Passing data to flexchart
      flexChart.DataSource = GetProductRevenue();
      
    5. Configure the control and add a chart type. Set other properties of the control.

      C#
      Copy Code
      // Configuring FlexChart
      flexChart.Series.Clear();
      //Selecting chart's type 
      flexChart.ChartType = C1.Chart.ChartType.LineSymbols;
      //Setting chart's Header and styling it
      flexChart.Header.Content = "DateWise Revenue";
      
    6. Add a Series to the chart and bind it (AxisY) to the 'Revenue' field of DataCollection.

      C#
      Copy Code
      //Adding a Series to chart and binding it (AxisY) to 'Revenue' field of DataCollection
      flexChart.Series.Add(new C1.Win.Chart.Series
      {
          //Name property specifies the string to be displayed corresponding to this Series in Legend
          Name = "Sales",
          Binding = "Revenue"
      });
      
    7. Bind the chart's AxisX to 'Date'.

      C#
      Copy Code
      //Binding chart's AxisX to 'Date' so Dates are shown in Horizontal axis
      flexChart.BindingX = "Date";
      

      Run the code and observe the output:

      An image depicting the control FlexChart.

    Note: WinForms .NET 5 Edition does not include rich design-time support yet. We will enhance it in future releases.
    See Also