Series is a set of related data points that are plotted on a chart. By default, FlexChart displays a column chart with dummy data series at design-time. However, you need to provide the control with data to render the chart at runtime.

In FlexChart, a series is represented by the Series class. Although, axis and chart type related properties are generally set on the whole chart, FlexChart also provides you AxisX, AxisY, ChartType, DataSource etc. for each series as well. This is helpful in scenarios such as rendering mixed charts, multiple axes etc. The Series class also provides the Name property whose text value represents that chart series in the legend. In case of line chart and area chart, you can also handle the null values in data to avoid gaps in plotting the chart series by setting the InterpolateNulls property to true.

Add a Series

FlexChart lets you add a series at design-time as well as through code. Follow the steps below to add a series:

At design-time

1. Open Properties window to view FlexChart properties.
2. Navigate to the Series field and click the Ellipsis button next to it.
   Series Collection Editor appears with a pre-added series, Series 1.
3. Click the Add button to add an additional series.

Using code

To add a series through code, first create a series by creating an instance of the Series class and then, add it to the FlexChart series collection by using the Add method. FlexChart series collection can be accessed through the FlexChart.Series property.

   //  Adding a Series to chart and binding it(AxisY) to 'Orders' 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 = "Orders",
     Binding = "Orders"
   });
                        

   'Adding a Series to chart and binding it (AxisY) to 'Revenue' field of DataCollection   
    Me.flexChart1.Series.Add(New C1.Win.Chart.Series() With {
      'Name property specifies the string to be displayed corresponding to this Series in Legend
      .Name = "Sales",
      .Binding = "Revenue"
   })

Add Data to Series

FlexChart provides multiple ways to add data to a chart series. You can opt for fetching all the data to plot a chart from a single data source or, bind a particular series or axis individually with separate data sources. For more information on binding and adding data to a chart series, see Binding.

Hide a Series

FlexChart provides flexibility to hide or display a series on plot area as well as legend through the Visibility property. This property accepts values from SeriesVisibility enumeration which lets you show or hide the series completely and also gives you options to display a series in legend or in plot area only.

   //  Adding a Series to chart and binding it(AxisY) to 'Orders' 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 = "Orders",
     Binding = "Orders",
     Visibility = C1.Chart.SeriesVisibility.Plot
   });
                        

    'Adding a Series to chart and binding it (AxisY) to 'Revenue' field of DataCollection   
     Me.flexChart1.Series.Add(New C1.Win.Chart.Series() With {
        'Name property specifies the string to be displayed corresponding to this Series in Legend
        .Name = "Sales",
        .Binding = "Revenue"
        .Visibility = C1.Chart.SeriesVisibility.Plot
     })

Moreover, FlexChart also provides LegendToggle property that allows the end user to toggle the visibility of series by clicking on the corresponding legend entry.

  // Displays or hides a series by clicking on corresponding legend entry
   this.flexChart1.LegendToggle = true;                        

  'Displays or hides a series by clicking on corresponding legend entry
   Me.flexChart1.LegendToggle = True

Style a Series

FlexChart provides the Style property of Series class to change the appearance of a series. For symbol charts such as scatter, line symbol etc., you can also change the markers, their size and style by setting the SymbolMarker, SymbolSize, SymbolStyle properties. Moreover, chart also provides built-in chart palettes so that you can easily customize the look of your chart by just setting the Palette property. For more information on palettes, see Appearance and Styling.

   // Style the series
   this.flexChart1.Series[0].Style.StrokeColor = Color.Blue;
   this.flexChart1.Series[0].SymbolMarker = SymbolMarker.Cross;
   this.flexChart1.Series[0].SymbolSize = 20;         

   ' Style the series
   Me.flexChart1.Series(0).Style.StrokeColor = Color.Blue
   Me.flexChart1.Series(0).SymbolMarker = SymbolMarker.Cross
   Me.flexChart1.Series(0).SymbolSize = 20